CSS毛玻璃选中效果

2023-11-28 22:08:16

毛玻璃选中效果

知识点总结：
在本次学习中，新get到一种图标的开源使用方式

网址：https://fontawesome.dashgame.com/
使用方法：
将以下代码粘贴到网页HTML代码的 head 部分

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

然后搜索你想要的图标，将他的代码放入适当的位置即可

<i class="fa fa-camera-retro"></i>

backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。
此属性是定义筛选器属性的筛选器效果模块级别1的扩展。它使用与filter属性相同的语法，但效果将应用于元素的背景。
transform:skewX(45deg)

HTML部分

<!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">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="boli.css">
    <title>Document</title>
</head>
<body>
    <section>
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
    </section>
    <ul>
        <li><a href="#">
                <i class="fa fa-facebook" aria-hidden="true"></i></a></li>
        <li><a href="#">
                <i class="fa fa-twitter" aria-hidden="true"></i></a></li>
        <li><a href="#">
                <i class="fa fa-instagram" aria-hidden="true"></i></a></li>
        <li><a href="#">
                <i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
        <li><a href="#">
                <i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
    </ul>
</body>

</html>

CSS部分

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    overflow: hidden;
}
section 
{
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #ff359b,#dff1ff);
    /*渐变色*/
}
section::before{
    content:'';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    z-index: 1;
    backdrop-filter: blur(5px);
    border-top:1px solid rgba(255,255,255,0.5);
}
section .color{
    position: relative;
    filter: blur(150px);
    /*加个高斯滤镜参数越大越模糊*/
}
section .color:nth-child(1){
    background: #ff359b;
    width: 600px;
    height: 600px;
    top: -350px;
}
section .color:nth-child(2){
    background: #00d2ff;
    width: 500px;
    height: 500px;
    bottom: -150px;
    left: 100px;
}
section .color:nth-child(3){
    background: #fffd87;
    width: 300px;
    height: 300px;
    bottom: -150px;
    right: 0px;
}
/*三个颜色块向右下方分布*/
ul{
    position: relative;
    display: flex;
    z-index: 2;
}
ul li {
    position: relative;
    list-style: none;/*去掉li的小圆点*/
    margin: 10px;
    top:245px;
    left:40%;  
}
ul li a{
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    border-radius: 10px;    
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-size: 2em;
    border:1px solid rgba(255,255,255,0.4);
    border-right:1px solid rgba(255,255,255,0.2);
    border-bottom:1px solid rgba(255,255,255,0.2);
    box-shadow: 0 5px 45px rgba(0,0,0,0.1);
    backdrop-filter: blur(2px);
    transition: 0.5s;
    overflow: hidden;
}
ul li a:hover{
    transform:translateY(-20px);
}
ul li a::before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 50px;
    height: 100%;
    background:rgba(255,255,255,0.5);
    transform:skewX(45deg) translateX(150px);
    transition:0.5s;
}
ul li a:hover::before{
    transform:skewX(45deg) translateX(-150px);
}

来源于YouTube教学视频

码农公寓

相关文章