实现十字光标其实很简单,用更原始的方法也可以实现,本例使用伪类:after和:before来进行定位实现。
第二个案例鼠标悬停,所有的外圆的一圈点会跟随着一个一个的变动颜色, 在鼠标悬停上后,会一个一个的变成蓝色。这个也只是用到了css3的过渡,其实,也没有什么难度。只要基础打的好,都可以写出来,里面的dom和css样式,都是通过js循环生成的,因为样式都一样,只是数值有区别。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
<style type="text/css" id="top_style">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
.div{
background:#1caffc;
position: absolute;
top:100px;
left:100px;
}
.div:after{
content: "";
height: 20px;
width: 100px;
background: #1caffc;
display: block;
position: absolute;
left:-40px;
top:0;
border-radius: 10px;
}
.div:before{
content: "";
height: 100px;
width: 20px;
background: #1caffc;
display: block;
position: absolute;
top:-40px;
left:0;
border-radius: 10px;
}
.animationDiv{
left:300px;
height:20px;
width: 20px;
}
#animationDiv .box{
background: #bbb;
width: 20px;
height: 10px;
position: absolute;
top:5px;
left: 0;
}
#animationDiv:hover .box{
background: #1caffc;
}
</style>
</head>
<body>
<div class="div"></div>
<div class="div animationDiv" id="animationDiv">
</div>
</body>
<script type="text/javascript">
var len = 12;
var div = document.getElementById("animationDiv");
var deg = 360/len;
var animationKeyFrames = "";
var time = 1; //切换总共时间
for(var i = 0; i < len; i++){
//添加div
var box = document.createElement("div");
box.className = "box";
box.style.cssText = "transform:rotate("+ deg*i +"deg) translateY(-80px)";
div.appendChild(box);
//生成过渡动画
animationKeyFrames += "#animationDiv .box:nth-child("+ (i+1) +"){transform:background "+(1/len*time)+"s linear; transition-delay: "+(i/len*time)+"s;}\n";
}
document.getElementById("top_style").innerText += animationKeyFrames;
console.log(animationKeyFrames);
</script>
</html>