用css3制作美猴王刷金箍棒

最新推荐文章于 2024-07-22 15:54:19 发布

anjiong9142

最新推荐文章于 2024-07-22 15:54:19 发布

阅读量125

点赞数

原文链接：http://www.cnblogs.com/Jack1816274408/p/7434774.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 padding:0;
 margin:0;
 }


 
 #hd{
 width:800px;
 height:600px;
 border: 2px solid blue;
 background: url("sun2.jpg") no-repeat
 right 50px;
 background-size: 500px;
 position: relative;
 
 }
 #hd:hover #jgb{
 transform: rotate(360deg);
 }
 #jgb{
 width:50px;
 height:500px;
 border: red;
 /*margin:0 auto;*/
 /*transform: rotate(30deg);*/
 position: absolute;
 left:309px;
 top:50px;
 transition: transform 1s;
 
 }
 #jgb div:nth-child(1){
 width:50px;
 height:100px;
 background: gold;
 
 }
 #jgb div:nth-child(2){
 width:50px; height:300px; background: red; color: yellow; font-size:30px; font-family:"微软雅黑"; text-align: center; padding-top: 30px; } #jgb div:nth-child(3){ width:50px; height:100px; background: gold; } </style></head><body><div id="hd"> <div id="jgb"> <div></div> <div>如意金箍棒</div> <div></div> </div></div></body></html>