- 效果图:
1GIF.gif
- xxx.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.选转.html</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 214px;
height: 214px;
position: relative;
margin: 50px auto;
}
div img{
animation: rotate linear 2s infinite;
}
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
div p{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 214px;
}
</style>
</head>
<body>
<div>
<img src="images/web.png" alt="">
<p>web 前端</p>
</div>
</body>
</html>
-
素材
web.png
