成都创新互联网站制作重庆分公司

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怎么实现简易加载中动画”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


分享标题:CSS3怎么实现简易加载中动画
路径分享:http://cxhlcq.com/article/gopojo.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部