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

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

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

HTML代码:

 <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" 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
});

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS磨砂玻璃形态加鼠标悬停视差效果

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们