css箭头跟随鼠标的代码

html-css09

css箭头跟随鼠标的代码,第1张

.asd {

cursor: pointer

}

css代码里加这么一条就行了把pointer改成别的就可以让鼠标变成别的样子,也可以输入图片的定位符变成指定的形状!

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .jt {

        position: relative

        height: 30px

    }

    

    .jt span {

        -webkit-transition: all .5s ease

        transition: all .5s ease

        position: absolute

        left: 0

    }

    

    .jt:hover span {

        left: 50px

    }

    </style>

</head>

<body>

    <div class="jt"><span>-></span></div>

</body>

</html>

使用

当然,其他任意方向也是可以的,只需要控制旋转角度rotate即可。原理是构造了一个正方形,隐藏了其中的两条边left和bottom,然后进行旋转。

通过使用正方形左下两条边,并向下向右平移,再旋转,得到一个向下并居中的箭头