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

最新推荐文章于 2023-12-07 09:43:02 发布

暮志未晚NAN

最新推荐文章于 2023-12-07 09:43:02 发布

阅读量3.7k

点赞数

分类专栏： html5 文章标签： css3 十字标动画进度圆

本文链接：https://blog.csdn.net/qq_30100043/article/details/75304169

版权

html5 专栏收录该内容

46 篇文章 3 订阅

订阅专栏

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

暮志未晚NAN

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 实现十字光标和光标外圆圈环绕

实现十字光标其实很简单，用更原始的方法也可以实现，本例使用伪类：after和：before来进行定位实现。第二个案例鼠标悬停，所有的外圆的一圈点会跟随着一个一个的变动颜色，在鼠标悬停上后，会一个一个的变成蓝色。这个也只是用到了css3的过渡，其实，也没有什么难度。只要基础打的好，都可以写出来，里面的dom和css样式，都是通过js循环生成的，因为样式都一样，只是数值有区别。
复制链接

扫一扫

专栏目录