<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css3属性——transform</title>
<!--css-->
<style>
*{margin:0;padding:0;}
body{background:#111;}
.box{width:500px;margin:50px auto;}
.box img{border-radius:50%;transform:rotate(10deg);width:400px;height:400px;}
.box img:hover{box-shadow:1px 5px 7px white;}
.m_box{width:600px;position:relative;}
.moon{width:200px;height:200px;background:white;border-radius:50%;margin:10px auto;box-shadow:1px 2px 86px white;}
#b_m{width:200px;height:200px;background:#111;border-radius:50%;left:400px;top:0px;position:absolute;}
</style>
<!--js-->
<script type="text/javascript">
window.onload = function(){
var Deg = 5;
setInterval(function(){
var e = document.getElementById("pc");
e.style.transform="rotate("+Deg+"deg)";
Deg = Deg + 5;
},80);
setInterval(function(){
var e2 = document.getElementById("b_m");
var pix = 400 - Deg;
e2.style.left= pix+"px";
Deg += 1;
if(pix < 0){
e2.style.left= "400px";
Deg = 0;
}
},333);
};
</script>
</head>
<body>
<div class="box">
<img src="images/1.jpg" id="pc"/>
</div>
<div class="m_box">
<div class="moon"></div>
<div id="b_m"></div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css3属性——transform</title>
<!--css-->
<style>
*{margin:0;padding:0;}
body{background:#111;}
.box{width:500px;margin:50px auto;}
.box img{border-radius:50%;transform:rotate(10deg);width:400px;height:400px;}
.box img:hover{box-shadow:1px 5px 7px white;}
.m_box{width:600px;position:relative;}
.moon{width:200px;height:200px;background:white;border-radius:50%;margin:10px auto;box-shadow:1px 2px 86px white;}
#b_m{width:200px;height:200px;background:#111;border-radius:50%;left:400px;top:0px;position:absolute;}
</style>
<!--js-->
<script type="text/javascript">
window.onload = function(){
var Deg = 5;
setInterval(function(){
var e = document.getElementById("pc");
e.style.transform="rotate("+Deg+"deg)";
Deg = Deg + 5;
},80);
setInterval(function(){
var e2 = document.getElementById("b_m");
var pix = 400 - Deg;
e2.style.left= pix+"px";
Deg += 1;
if(pix < 0){
e2.style.left= "400px";
Deg = 0;
}
},333);
};
</script>
</head>
<body>
<div class="box">
<img src="images/1.jpg" id="pc"/>
</div>
<div class="m_box">
<div class="moon"></div>
<div id="b_m"></div>
</div>
</body>
</html>
扫一扫
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
