CSS3--animation属性复合

最新推荐文章于 2024-10-03 08:30:00 发布

原创最新推荐文章于 2024-10-03 08:30:00 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #CSS动画 #animation

css3 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了一个使用HTML和CSS实现的三维旋转动画案例。通过设置不同的背景图片和关键帧动画，三个不同层级的div元素分别围绕X轴、Y轴和Z轴进行无限循环的旋转，营造出立体视觉效果。文章深入解析了动画的实现原理，包括如何利用transform-style属性创建3D空间，以及如何定义关键帧动画实现平滑过渡。

code：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</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: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation: circle_middle linear 10s infinite;
            animation: circle_middle linear 10s infinite;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation: circle_outer linear 10s infinite;
            animation: circle_outer linear 10s infinite;
}
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>