CSS3怎么实现简易加载中动画

这篇文章主要介绍了CSS3怎么实现简易加载中动画的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS3怎么实现简易加载中动画文章都会有所收获，下面我们一起来看看吧。

泰州网站建设公司创新互联公司,泰州网站设计制作，有大型网站制作公司丰富经验。已为泰州近1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的泰州做网站的公司定做！

1.简易加载中

@keyframes myfirst

{

from{transform: rotate(0deg)}to{transform: rotate(360deg)}

}

.loading{

animation: myfirst 1.5s infinite linear;//infinite控制执行次数这里一直执行，linear执行速度，匀速

border: 16px solid #f3f3f3;

border-radius: 50%;

border-top:16px solid blue;

width: 120px;

height: 120px;

}

2.简易进度条

.move {

width: 0px;

height: 10px;

animation: moveHover 5s infinite linear;

}

3.过渡属性

.change

{

transition: width 2s;

font-size: 10px;

width: 100px;

height: 20px;

background: yellow;

-moz-transition: width 2s;    /* Firefox 4 */

-webkit-transition: width 2s;    /* Safari 和 Chrome */

-o-transition: width 2s;    /* Opera */

}

.change:hover

{

width: 500px;

}

.bigger{

font-size: 20px;

width: 0;

height: 0;//scale根据宽高变大，必须设置width和height

background: #2A9F00;

transition: transform 5s;

}

.bigger:hover{

transform: scale(10);

}

关于“CSS3怎么实现简易加载中动画”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS3怎么实现简易加载中动画”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。