CSS动画

最新推荐文章于 2022-02-27 16:29:04 发布

朗福德_豪

最新推荐文章于 2022-02-27 16:29:04 发布

阅读量402

点赞数

分类专栏： BS 文章标签： css 动画圆圈转动

本文链接：https://blog.csdn.net/qq_39674002/article/details/86556185

版权

BS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

最近两天在研究CSS应为要懂想看懂前端的代码,并且能够做出前端网页这也是基础的东西,用css实现动画,这个功能虽然不复杂,但是对提高学习兴趣还是很有帮助的,所以今天就选了一个慕课上的例子自己模仿着做了一下,对于初学者来说模仿也是一种修炼.

正文

首先咱们来看看网页动画的整体效果吧.
在这里插入图片描述
主要用到了四个元素如下图所示

下面简单给介绍一下body中的代码:

<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>

css中的代码是什么呢?

<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>

css实现动画主要就是使用animation的属性来进行搭配,常用到的几个属性:

transform-style 属性

语法:
transform-style: flat|preserve-3d;

flat值表示:子元素将不保留其3D位置
preserve-3d值表示:子元素将保留3D位置

animation 复合属性检索或设置对象所应用的动画特效

语法:
animation:name duration timing-function delay iteration-count direction fill-mode play-state;

animation-timing-function属性检索或设置对象动画的过度类型

语法:
animation-timing-function:ease | linear | ease-in | ease-in-out | step-start | step-end | …
linear:线性过渡.等同于贝塞尔曲线(0.0,0.0,1.0,1.0)
ease:平滑过渡.等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
ease-in:由慢到快.等同于贝塞尔曲线(0.42,0,1.0,1.0)
ease-out:由快到慢.等同于贝塞尔曲线(0,0,0.58,1.0)
ease-in-out:由慢到快再到慢.等同于贝塞尔曲线(0.42,0,0.58,1.0)
以上五个属性是经常使用到的.

结束

慢慢学习总是能够学到东西的,只要坚持不懈总会成功的.所以加油!

朗福德_豪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
15
评论
CSS动画

前言最近两天在研究CSS应为要懂想看懂前端的代码,并且能够做出前端网页这也是基础的东西,用css实现动画,这个功能虽然不复杂,但是对提高学习兴趣还是很有帮助的,所以今天就选了一个慕课上的例子自己模仿着做了一下,对于初学者来说模仿也是一种修炼.正文首先咱们来看看网页动画的整体效果吧.主要用到了四个元素如下图所示下面简单给介绍一下body中的代码:&lt;body&gt;&lt;di...
复制链接

扫一扫