CSS3实现360度循环旋转功能
1.整个div360度旋转
<style type="text/css">
.div3 {
position:absolute;
z-index:3;
left:40px;
top:40px;
font-weight:bold;
background:red;
animation: myfirst2 15s infinite linear;
}
@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}
</style>
<div class="div3">旋转吧</div>
效果图：
<html>
<head>
<style type="text/css">
body {
background:#000a2d;
}
.div2 {
position:absolute;
z-index:2;
left:40px;
top:40px;
font-weight:bold;
height:400px;
width:400px;
animation: myfirst2 15s infinite linear;
}
.div3 {
position:absolute;
z-index:3;
left:11%;
top:22%;
font-weight:bold;
color:#fff;
background:red;
}
@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}
</style>
</head>
<body>
<div class="div3">最上层</div>
<div class="div2"><img src="./centerBg3.png" style="width:100%;height:100%;"></div>
</body>
</html>
效果
到此这篇关于CSS3实现360度循环旋转的文章就介绍到这了,更多相关CSS3 循环旋转内容请搜索软件开发网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持软件开发网！
相关文章
Laurie
2020-11-30
Heidi
2020-03-04
Dabria
2020-01-05
Querida
2023-04-14
Pandora
2023-04-16
Serafina
2023-04-19
Rhea
2023-04-19
Malinda
2023-04-19
Kathy
2023-04-19
Nora
2023-04-19
Pandora
2023-04-19
Tani
2023-04-19
Tanisha
2023-04-19
Crystal
2023-05-12
Thalia
2023-05-17
Ida
2023-07-20
Irma
2023-07-20
Samira
2023-07-20
Valora
2023-07-20