HTML5+CSS3+JS小实例：逼真的玻璃卡片悬停效果

制作不易 安利给大家前端实用的小实例  cv可直接运行使用 

---

效果图：

HTML：

    
    

    
    



    

        

            

                
01
                
Card One
                
Realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect.
                Read More
            
        
        

            

                
02
                
Card Two
                
Realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect.
                Read More
            
        
        

            

                
03
                
Card Three
                
Realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect.
                Read More
            
        
    
    
    

 css：

/* 引入网络字体：Poppins */
@import url("http://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 设置字体 */
    font-family: "Poppins";
}
body{
    /* 100%窗口高度 */
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #161626;
}
/* 给背景增加两个渐变圆 */
body::before{
    content: "";
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 渐变背景 */
    background: linear-gradient(#2193b0,#6dd5ed);
    /* 将元素剪切微一个圆形【30%表示圆的直径】【right 70%表示圆心位置】 */
    clip-path: circle(30% at right 70%);
}
body::after{
    content: "";
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 渐变背景 */
    background: linear-gradient(#ee9ca7,#ffdde1);
    /* 将元素剪切微一个圆形【30%表示圆的直径】【right 70%表示圆心位置】 */
    clip-path: circle(20% at 10% 10%);
}
.container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 1;
}
.container .card{
    /* 相对定位 */
    position: relative;
    width: 280px;
    height: 400px;
    background-color: rgba(255,255,255,0.1);
    margin: 30px;
    border-radius: 15px;
    /* 阴影 */
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    /* 溢出隐藏 */
    overflow: hidden;
    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);
}
.container .card .content{
    padding: 20px;
    text-align: center;
    /* 默认下移+隐藏 */
    transform: translateY(100px);
    opacity: 0;
    transition: 0.5s;
}
.container .card:hover .content{
    /* 鼠标移入，上移+显示 */
    transform: translateY(0);
    opacity: 1;
}
.container .card .content h2{
    position: absolute;
    top: -80px;
    right: 25px;
    font-size: 128px;
    color: rgba(255,255,255,0.05);
}
.container .card .content h3{
    font-size: 28px;
    color: #fff;
}
.container .card .content p{
    font-size: 16px;
    color: #fff;
    font-weight: 300;
    margin: 10px 0 15px 0;
}
.container .card .content a{
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    margin-top: 15px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* 这里要让玻璃效果更加逼真，需要用到一个JS库：vanilla-tilt.js */
/* 我事先下载好了，需要这个JS库的可以找我拿 */
/* 看操作~ */

js： 

   js在压缩包里，需要可以直接下载压缩

---

更多干货

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “✍️评论” “收藏” 一键三连哦！
【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 
以上内容技术相关问题欢迎一起交流学习嘉vx+18634371151