哪个网站使用vue 做的王通seo
实现十字光标其实很简单，用更原始的方法也可以实现，本例使用伪类：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++){//添加divvar 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>