CSS磨砂玻璃形态加鼠标悬停视差效果

CSS 磨砂玻璃形态加鼠标悬停视差效果

HTML 代码：

 <link rel="preconnect" rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly9mb250cy5nc3RhdGljLmNvbQ==">
<link rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3MyP2ZhbWlseT1GaXJhK0NvZGUmYW1wO2Rpc3BsYXk9c3dhcA==" rel="stylesheet">
<link rel="nofollow" href="https://mybj123.com/links?url=aHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3MyP2ZhbWlseT1BY21lJmFtcDtkaXNwbGF5PXN3YXA=" rel="stylesheet">
<div class="wrapper">
            <div class="box">
                <div class="description">
                    <h2>Box 1</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?</p>
                    <ul class="list">
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-github"></i></a></li>
                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="box">
                <div class="description">
                    <h2>Box 2</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?</p>
                    <ul class="list">
                       <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-github"></i></a></li>
                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="box">
                <div class="description">
                    <h2>Box 3</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?</p>
                    <ul class="list">
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-github"></i></a></li>
                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
<script src="https://kit.fontawesome.com/bad7f7f5d4.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>

CSS 代码：

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    min-height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper{
    width:100%;
    height:100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-image: url("https://images.unsplash.com/photo-1633115712191-ae1f505605fd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2340&q=80");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; 
}
.wrapper .box{
    position: relative;
    width:280px;
    height:400px;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    border-radius:15px;
    margin:30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(5px);
    transform-style: preserve-3d;
    transform: perspective(800px) 
}
h2{
    color:#f5f5f5;
    font-size:2.5rem;
    text-align: center;
    font-family: 'Acme', sans-serif;
}
p{
    color:#ccc;
    margin:20px 10px;
    font-family: 'Fira Code', monospace;
}
ul{
    list-style: none;
    width:100%;
    display: flex;
    justify-content: space-evenly;
    margin:30px 0;
    padding:10px;
}

li{
    cursor: pointer;
    width:30px;
    height:30px;
}
i{
    color:#ccc;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}
li:hover .fa-twitter{
    transform:translate3d(0,-10px,20px);
    color:#00acee;
}
li:hover .fa-github{
    transform:translate3d(0,-10px,20px);
    color:gray;
}
li:hover .fa-linkedin-in{
    transform:translate3d(0,-10px,20px);
    color:#077099;
}

JS 代码：

VanillaTilt.init(document.querySelectorAll(".box"), {
    max: 25,
    speed: 400,
    easing:"cubic-bezier(.03,.98,.52,.99)",
    perspective:500,
    transition:true
});