您的位置：首页 > Web前端 > CSS

css之transform属性

2016-06-20 23:17 555 查看

<!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>



<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>



<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航