<!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>
用css3制作美猴王刷金箍棒
原文地址：http://www.cnblogs.com/Jack1816274408/p/7434774.html