作者:手机用户2502860727 | 来源:互联网 | 2023-05-19 10:36
小编给大家分享一下CSS3如何创建简单动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
1.简易加载中
@keyframes myfirst
{
from{transform: rotate(0deg)}to{transform: rotate(360deg)}
}
.loading{
//infinite控制执行次数这里一直执行,linear执行速度,匀速
animation: myfirst 1.5s 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如何创建简单动画”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程笔记行业资讯频道!