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

html-css023

css动画，div设置了动画，但不希望DIV内部的文字也跟着动？,第1张

把文字和背景分别放到两个平级的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>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

*{padding:0margin:0border:0}

.left{width:50%float:left

animation:myfirst 5s

-moz-animation:myfirst 5s/* Firefox */

-webkit-animation:myfirst 5s/* Safari and Chrome */

-o-animation:myfirst 5s/* Opera */

}

.right{width:50%float:left

animation:myfirst 5s

-moz-animation:myfirst 5s/* Firefox */

-webkit-animation:myfirst 5s/* Safari and Chrome */

-o-animation:myfirst 5s/* Opera */

animation-delay: 5s/* W3C 和 Opera */

-moz-animation-delay: 5s/* Firefox */

-webkit-animation-delay: 5s/* Safari 和 Chrome */

}

@keyframes myfirst

{

0% { opacity:0}

100% { opacity:1}

}

@-moz-keyframes myfirst /* Firefox */

{

0% { opacity:0}

100% { opacity:1}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

0% { opacity:0}

100% { opacity:1}

}

@-o-keyframes myfirst /* Opera */

{

0% { opacity:0}

100% { opacity:1}

}

</style>

</head>

<body>

<div>

<div class="left"><img src="images/xxx.jpg"></div>

<div class="right">文字XXXXXXXXXXXXXXXXXXXXXXXX </div>

</div>

</body>

</html>