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

html-css018

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>