css动画,div设置了动画,但不希望DIV内部的文字也跟着动?

发布网友发布时间：2022-05-26 11:52

共1个回答

热心网友时间：2023-10-15 19:15

把文字和背景分别放到两个平级的div中，文字覆盖在背景的上面，然后只需要把动画作用到背景所在的div上，这样文字不受影响就可以保持不动了。而且，这样一来，外框与背景就不需要做反向运动，只需要背景动即可，外框保持不动，这样只需要一个动画，提高了效率：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myDIV
{
width:100px;
height:100px;
position:relative;
}
@keyframes mymove
{
0% {}
100% {-webkit-transform:rotate(360deg);}
}
#mybak{
position:absolute;
left:0;
top:0;
width:100px;
height:100px;
background:black;
-webkit-animation:mymove 10s infinite;
}
#mynum{
position:absolute;
left:0;
top:0;
width:100px;
height:100px;
text-align:center;
color:white;
font-size:70px;
line-height:100px;
}
</style>

</head>

<body>
<div id="myDIV"><div id="mybak"></div><div id="mynum">10</div></div>

</body>

</html>