CSS3边框会动的信封

最新推荐文章于 2022-11-29 23:50:06 发布

weixin_33716941

最新推荐文章于 2022-11-29 23:50:06 发布

阅读量153

点赞数

原文链接：http://www.cnblogs.com/Man-Dream-Necessary/p/6652361.html

版权

<!DOCTYPE html>
<html>

<head>
    <title>酷炫的CSS3</title>
    <meta charset="utf-8">
</head>
<style>
    @keyframes ants {
        to {
            background-position: 100%;
        }
    }

    .demo {
        display: block;
        margin: 200px auto;
        width: 300px;
        height: 200px;
        border: 1em solid transparent;
        background: linear-gradient(white, white) padding-box,
        repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;
        animation: ants 12s linear infinite;
    }
</style>
<body>
<div class="demo"></div>
</body>

</html>

静态效果图：

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/6652361.html

优惠劵

weixin_33716941

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3边框会动的信封

<!DOCTYPE html><html><head> <title>酷炫的CSS3</title> <meta charset="utf-8"></head><style> @keyframes ants { to { background-pos...
复制链接

扫一扫