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
});

以上关于CSS磨砂玻璃形态加鼠标悬停视差效果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。