1.简单loading效果
<div class="mint-spinner-snake" style="border-top-color: rgb(38, 162, 255); border-left-color: rgb(38, 162, 255); border-bottom-color: rgb(38, 162, 255); height: 88px; width: 88px;"></div>CSS样式部分：
.mint-spinner-snake{
animation: circle 1s infinite linear;
-webkit-animation:circle 1s infinite linear; /* Safari 和 Chrome */
border:4px solid transparent;
border-radius: 50%
}
@-webkit-keyframes circle{
0%{transform:rotate(0deg);}
100%{transform: rotate(-360deg)}
}2. :hover放大图片
<!DOCTYPE html>
<html>
<head>
<title>hover图片变大</title>
<style type="text/css">
.lis{
width:200px;
height:200px;
background-color:pink;
overflow: hidden;
}
.img{
width:200px;
height:200px;
transition: all 0.6s;
cursor:pointer;
}
.img:hover{
transform:scale(1.4);
}
</style>
</head>
<body>
<ul>
<li class="lis">
<image class="img" src="./images/lis.jpg"></image>
</li>
</ul>
</body>
</html>3. css3 rotate 3D无限旋转 鼠标放上停止旋转
<!DOCTYPE html>
<html>
<head>
<title>动画无限旋转2D和无限旋转3D</title>
<style type="text/css">
.divs{
width:200px;
height:200px;
border-radius: 50%;
overflow: hidden;
transform:rotateY(120deg);
animation:rotate 4s ease infinite;
}
/*3d旋转效果*/
@keyframes rotate{
0%{
transform:rotateY(0deg);
}
50%{
transform:rotateY(180deg);
}
100%{
transform:rotateY(360deg);
}
}
.divs:hover{
cursor:pointer;
animation-play-state:paused; /*停止动画*/
}
/*css3 animation 暂停动画播放 ，动画处于播放完成状态
aniamtion-play-state: running , paused*/
.img{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="divs">
<image class="img" src="./images/lis.jpg"></image>
</div>
</body>
</html>
4833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
