CSS3--animation属性（direction）

最新推荐文章于 2024-04-16 22:03:31 发布

AsaZyf

最新推荐文章于 2024-04-16 22:03:31 发布

阅读量425

点赞数

文章标签： CSS3 animation direction

本文链接：https://blog.csdn.net/AsaZyf/article/details/83858458

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

图片链接见https://blog.csdn.net/AsaZyf/article/details/83831462

code：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation-direction</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation-name: circle_middle;
            animation-name: circle_middle;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation-name: circle_outer;
            animation-name: circle_outer;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
    from { transform: rotateX(0deg);   }
    to   { transform: rotateX(360deg); }
}
@keyframes circle_middle {
    from { transform: rotateY(0deg);   }
    to   { transform: rotateY(360deg); }
}
@keyframes circle_outer {
    from { transform: rotateZ(0deg);   }
    to   { transform: rotateZ(360deg); }
}
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

AsaZyf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3--animation属性（direction）

图片链接见https://blog.csdn.net/AsaZyf/article/details/83831462code：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;animation-direction&lt
复制链接

扫一扫