共计 809 个字符,预计需要花费 3 分钟才能阅读完成。
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>
正文完