首页 /  web前端 /  css3 / css3旋转动画效果

0 180

css3旋转动画效果

css3圆形图片可以转圈圈哦

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转动画</title>
<style>
*{margin: 0; padding: 0;}
.ta_c{text-align: center;
margin-top: 100px;}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation:hover{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
.img{border-radius: 250px;}
</style>
</head>
<body>
<div class="ta_c"><img class="Rotation img" src="https://yuanmouren.erlyun.com/assets/attachment/avatar/276/276_avatar_middle.jpg" width="50" height="50"/></div>
</body>
</html>

[来源] http://yuanmouren.erlyun.com/p.php?id=87

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

添加一条新回复
前端攻城妹 2019-11-18 00:25
0
送花
20积分一朵