重构技巧二：解说css3 实现加载小动画。

最新推荐文章于 2024-07-19 23:42:48 发布

SongMM_HW

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量437

点赞数

分类专栏： html5 文章标签：重构 animation 动画 html5 css3

本文链接：https://blog.csdn.net/qq_16074807/article/details/39230537

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

只写了webkit内核的。直接用weibkit内核的浏览器如chrome及大部分智能手机浏览器。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css3 动画</title>
<style>
/*加载动画*/
.loading {
    display:inline-block;
    height:3em;
    width:3em;
    background:transparent url(http://hi3ms-image.huawei.com/hi/showimage-17220611-72867-6366ac4a0c663907f7d5d57319c45ac6.jpg) no-repeat;
    background-size:100% 100%;
    -webkit-animation:rotate 1s infinite linear;
    }
@-webkit-keyframes rotate {
    0% {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);}
    }
</style>
</head>
<body>
    <div class="loading"> </div>
</body>
</html>

这一段代码，呵呵，内容颇多啊。

解说：

class名称为loading的元素，其样式为{

display:inline-block;// 其展示方式为行内-块元素，同意其他元素在同一行上，且自身是个块元素。

height:3em;//宽高就不说了，单位em是相对大小，初始状态1em=16px。

width:3em;

background:transparent url(http://hi3ms-image.huawei.com/hi/showimage-17220611-72867-6366ac4a0c663907f7d5d57319c45ac6.jpg) no-repeat;// 背景：背景色为透明背景地址是一个链接背景图展示一次不重复

background-size:100% 100%;//背景大小以其宽高大小为参考伸展铺开

-webkit-animation:rotate 1s infinite linear;// -webkit-内核的浏览器的动画：名称rotate，用时1s完成totate 永久的进行动画线性的进行动画

}

@-webkit-keyframes rotate {// webkit内核的动画，动画名称叫rotate

0% {-webkit-transform:rotate(0deg);}// 初始时{ 元素进行变换：旋转0°。}

100% {-webkit-transform:rotate(360deg);}// 末了{ 元素变换：旋转360°。}

}

以上就是说页面加载时，就能有一个动画，这个动画把图片进行360度旋转且永不停歇。和一个旋转的gif也没啥区别，但是，光这段代码，就显示了animation 动画 transform 变换这两个及其重要的东东。

transform : 可以进行 rotate旋转，skew倾斜，scale缩放，translate平移，且支持3D变换。

animation: 动画可以用@keyframes去定期动画的初始状态、中间过程、末状态的样式。可以设定动画的时间线性等方式变换播放几次或者永久的是否进行逆向播放。

附上我认为解析非常详细的文章，http://www.zhangxinxu.com/wordpress/?p=1268 解说了transform transition 和 animation 这三个属性。

有个很牛掰的演示：翻书-别人写的，忒牛逼了：http://www.yuyihanqing.com/m/demo/page-flip/ 。