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

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

　　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;

　　}

　　<div class="loading"></div>

　　2.简易进度条

　　.move {

　　width: 0px;

　　height: 10px;

　　animation: moveHover 5s infinite linear;

　　}

　　<div class="move"></div>

　　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;

　　}

　　<div class="change">鼠标滑过</div>

　　.bigger{

　　font-size: 20px;

　　width: 0;

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

　　background: #2A9F00;

　　transition: transform 5s;

　　}

　　.bigger:hover{

　　transform: scale(10);

　　}

　　<div class="bigger">大</div>

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