css3 实现十字光标和光标外圆圈环绕

实现十字光标其实很简单，用更原始的方法也可以实现，本例使用伪类：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>

css3 实现十字光标和光标外圆圈环绕相关推荐

java 设置光标_java光标位置怎么设置 java设置光标位置方法
java设置光标位置方法: 方法一. import Java.awt.TextField; import javax.swing.JFrame; public class InsertPosition ...
android监听输入框光标,EditText光标的移动
在做项目时,我们可能会遇到当输入框的内容变化后让光标自动显示在下一个输入框,这样就省去了手工的点击,从而提高了效率. requestFocus() 获取焦点即光标的显示 setOnFocusCha ...
在.NET中实现彩色光标/动画光标和自定义光标[转]
Test.cs using System; using System.Drawing; using System.Windows.Forms; using System.Runtime.Interop ...
css鼠标点击后取消光标焦点,光标设置透明
鼠标点击后会有光标闪烁如果想取消可以将其光标设置为透明 /* 点击后光标设置为透明 */caret-color: rgba(0,0,0,0);
怎样隐藏光标—设置光标
一.隐藏光标 1.引入头文件window.h 2. 定义光标信息结构体变量 CONSOLE_CURSOR_INFO cursor info={1,0}; typedef struct _CONSO ...
css3 html5宽高不变,html – CSS圆圈,不使用固定的宽度和高度
请参阅此仅CSS解决方案.为1位数设置相同的最小宽度和最小高度值.使用伪元素进行垂直对齐并保持方形. border-radius适用于圆的容器. .circle { display: inline-b ...
CSS3盒子边框阴影，内阴影外阴影
// X:横向阴影(偏移值) // Y:纵向阴影(偏移值) // Z:扩散面积 // #FF00FF:阴影颜色box-shadow: X Y Z #FF00FF; div {box-shadow: 0 ...
实现绘图区的大十字光标
有时,我们需要用VB快速开发一个试验数据绘图处理程序,将绘图控件内的鼠标光标改变成与AutoCAD软件中使用的大十字光标的形式,将可以比普通的箭头光标达到更好的效果.那么我们如何实现这样的大十字光标呢 ...
Visual C++——设置光标Cursor
API LoadCursor:第一个参数是要载入光标的程序的实例,当使用系统预定义光标的时候,要设置为空.当要使用自定义光标的时候,设置为AfxGetInstanceHandle(). 更换LoadC ...

css3 实现十字光标和光标外圆圈环绕

css3 实现十字光标和光标外圆圈环绕相关推荐

最新文章

热门文章