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>效果图：
2.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>效果
