好看的鼠标经过特效纯CSS

最新推荐文章于 2024-06-01 17:33:11 发布

爱吃烧鸭蛋的叶安

最新推荐文章于 2024-06-01 17:33:11 发布

阅读量1k

点赞数

分类专栏：特效文章标签： css css3 html

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/121953116

版权

特效专栏收录该内容

31 篇文章 2 订阅

订阅专栏

效果：
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好看的鼠标经过特效</title>
    <style>
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
            background-size: 400% 400%;
            background-repeat: no-repeat;
            transition: .5s all;
        }
        /* 通过改变背景渐变的位置做到鼠标经过的特效 */
        .box:hover{
            background-position: 100% 100%;
        }
        .img {
            position: absolute;
            left: 0;
            top: 0;
            background: #000 url(https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb) no-repeat center center;
            background-size: cover;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: .5;
            /* 混合模式 */
            mix-blend-mode: screen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="img"></div>
    </div>
</body>
</html>

爱吃烧鸭蛋的叶安

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
好看的鼠标经过特效纯CSS

效果：完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
复制链接

扫一扫