CSS特效（一）：制作盒子荧光特效

最新推荐文章于 2023-03-27 20:28:47 发布

wait......

最新推荐文章于 2023-03-27 20:28:47 发布

阅读量1.9k

点赞数

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

本文链接：https://blog.csdn.net/qwerty053/article/details/120464147

版权

CSS特效专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天记录我的第一篇CSDN博客，开始我的前端之旅~

荧光特效，最主要是利用hover以及box-shadow来制作，学习的过程中遇到了之前没有使用过的flex布局、filter、transform以及z-index，记录一下介绍这些属性的位置：

transform：CSS 2D 转换 (w3school.com.cn)

filter：(29条消息) CSS中filter属性的使用_weixin_33910759的博客-CSDN博客

zindex：(29条消息) CSS 中的z-index属性_Min的博客-CSDN博客_z-index属性

<!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>Document</title>
    <style>
        main {
            width: 90vw;
            height: 90vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
      
        #one {
            width: 150px;
            height: 150px;
            position: relative;
            top: 40px;
            left: 20px;
            z-index: 1;
            background-color: aquamarine;
            transform: rotate(20deg);
            transform: rotateX(30deg);
            filter:blur(5px);
        }
        
        #one:hover{
            filter: blur(0) drop-shadow(6px 0 20px rgba(51, 141, 231, 0.603));
            border-radius: 0;
            box-shadow: 0px 6px 20px rgba(51, 141, 231, 0.603);
            transition: 0.2s;
        }

        #two {
            width: 150px;
            height: 150px;
            position: relative;
            top: 60px;
            z-index: 2;
            background-color: rgb(255, 127, 80);
            border-radius: 50%;
            transform: scale(2, 2);
            transform: skewY(-30deg);
        }
    </style>
</head>

<body>
    <main>
        <div id="one"></div>
        <!-- <div id="two"></div> -->
    </main>
</body>

</html>

最后实现的效果就是最开始高斯模糊的方框在鼠标放上去之后变成了带荧光的方框（最简单的例子QAQ）

在这里插入图片描述

wait......

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS特效（一）：制作盒子荧光特效

今天记录我的第一篇CSDN博客，开始我的前端之旅~荧光特效，最主要是利用hover以及box-shadow来制作，学习的过程中遇到了之前没有使用过的flex布局、filter、transform以及z-index，记录一下介绍这些属性的位置：transform：CSS 2D 转换 (w3school.com.cn)filter：(29条消息) CSS中filter属性的使用_weixin_33910759的博客-CSDN博客zindex：(29条消息) CSS 中的z-index属性_Min的博客-
复制链接

扫一扫