闪亮玻璃图标悬浮效果

最新推荐文章于 2021-09-30 23:24:45 发布

IABQL

最新推荐文章于 2021-09-30 23:24:45 发布

阅读量196

点赞数

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

本文链接：https://blog.csdn.net/qq_48078182/article/details/120351633

版权

html 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

效果展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
     利用<i>标签设计的图标需要引入css
    css样式下载地址：https://www.thinkcmf.com/font_awesome.html
    将下载的包放入项目中，并引用其中的font-awesome.min.css
-->
    <link rel="stylesheet"type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to bottom,#ff00ff,white);
        }
        section:before{
            content: "";
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50%;
            z-index: 1;
            border-top: 1px solid rgba(255,255,255,0.6);
        }
        .color{
            position: absolute;
            /*给图像设置高斯模糊,数值越大越模糊，实现毛玻璃*/
            filter: blur(150px);
        }
        .color:nth-child(1){
            background: #ff359b;
            width: 600px;
            height: 600px;
            top: -350px;
        }
        .color:nth-child(2){
            background: #00d2ff;
            width: 600px;
            height: 600px;
            bottom: -150px;
            left: 100px;
        }
        .color:nth-child(3){
            background: #fffd87;
            width: 600px;
            height: 600px;
            bottom: 50px;
            right: 0px;
        }
        ul{
            display: flex;
            z-index: 2;
            list-style: none;
        }
        ul li{
            margin: 10px;
        }
        .ico{
            width: 80px;
            height: 80px;
            display: block;
            border: 1px solid rgba(255,255,255,0.4);
            /*盒子阴影*/
            box-shadow:1px 5px 45px rgba(0,0,0,0.1);
            border-right: 1px solid rgba(255,255,255,0.2);
            border-bottom: 1px solid rgba(255,255,255,0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            border-radius: 10px;
        /*    图标大小，颜色*/
        /*    因为是用<i>标签设计的图标，而<i>是用来让字体变斜*/
            font-size: 2em;
            color: #fff;
            /*
            backdrop-filter：让背景模糊，图标底下的那一层（那根线）；
            filter: blur(150px)：是让本身模糊
            */
            backdrop-filter: blur(2px);
            transition: 0.5s;
            /*当光闪背景，就是一个白色盒子背景，溢出图标外时隐藏*/
            overflow: hidden;
        }
        .ico:hover{
        /*    图标上移20px*/
            transform: translateY(-20px);
        }
        /*
        光闪背景，就是一个白色盒子背景，将白色盒子向右移出图标（图标右边）之外，当鼠标放上图标时，将白色盒子向左移出图标（图标）左边之外
        */
        .ico::before{
            position: absolute;
            content: '';
            width: 50px;
            height: 100%;
            background: rgba(255,255,255,0.5);
            transform: skewX(45deg) translateX(150px);
            transition: 0.5s;
        }
        .ico:hover::before{
            transform: skewX(45deg) translateX(-150px);
        }
    </style>
</head>
<body>
<!--<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<section>
<!-- 让3个颜色盒子随意放置，再用filter: blur(150px)将盒子模糊处理，实现毛玻璃效果   模糊背景效果-->
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
<!--    5个图标-->
    <ul>
        <li><a href="#"class="ico"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
        <li><a href="#"class="ico"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
        <li><a href="#"class="ico"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
        <li><a href="#"class="ico"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
        <li><a href="#"class="ico"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
    </ul>
</section>
</body>
</html>

毛玻璃实现原理：加上filter: blur(150px);让图片变模糊

光闪背景，就是一个白色盒子背景，将白色盒子向右移出图标（图标右边）之外，当鼠标放上图标时，将白色盒子向左移出图标（图标）左边之外

IABQL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
闪亮玻璃图标悬浮效果

效果展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 利用<i>标签设计的图标需要引入css css样式下载地址：https://www.thinkcmf.com/font_awesome.html 将下载的包放入项目中，并引用其..
复制链接

扫一扫