搜索一下
关于
登录
首页
生活随笔
表面功夫
运筹帷幄
Godot游戏
0
1
分享
css特效之玻璃形态卡片悬停效果
表面功夫
13 天前
相信神话
先看效果: ![PixPin_2024-05-07_08-02-39.gif](http://www.agoodlife.cn/usr/uploads/2024/05/341053772.gif) # Html代码 ```html
Glassmorphism Cards Hover Effects
Someone
SEO Expert
Someone
Magician
Someone
Graphic Designer
Someone
Actress
``` CSS代码 ```css @import url("https://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", sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; transition: 0.5s; } body:has(.box[data-color="clr1"]:hover) { background-color: #162527; } body:has(.box[data-color="clr2"]:hover) { background-color: #202011; } body:has(.box[data-color="clr3"]:hover) { background-color: #5b4510; } body:has(.box[data-color="clr4"]:hover) { background-color: #611417; } .container { position: relative; display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; } .container .box { position: relative; width: 200px; height: 200px; border-radius: 10px; display: flex; justify-content: center; align-items: center; transition: 0.5s; } .container .box .imgBx { position: absolute; inset: 0; border-radius: 12px; border: 4px solid rgba(0, 0, 0, 0.2); } .container .box .imgBx img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; border-radius: 10px; } .container .box:hover .imgBx img { opacity: 0.5; } .container .box .glass { position: absolute; inset: 0; background: linear-gradient(#fff2, transparent); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 15px 15px rgba(0, 0, 0, 0.25); backdrop-filter: blur(15px); border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden; scale: 0; opacity: 0; transition: 0.5s; } .container .box .glass::before { content: ""; position: absolute; bottom: 0; width: 100%; height: 40px; background-color: rgba(255, 255, 255, 0.05); } .container .box:hover { transform: rotate(-15deg); } .container .box:hover .glass { transform: rotate(20deg); scale: 1; opacity: 1; } .container .box .glass h3 { font-size: 1.25em; color: #fff; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; line-height: 0.8em; } .container .box .glass h3 span { font-weight: 400; font-size: 0.5em; } .container .box ul { position: absolute; bottom: 0; width: 100%; display: flex; justify-content: center; gap: 15px; } .container .box ul a { color: #fff8; font-size: 1.25em; scale: 0; transition: 0.25s; transition-delay: scale calc(0.2s * var(--i)); } .container .box:hover ul a { scale: 1; } .container .box ul a:hover { color: #fff; } ```
标签
css
html
评论
发表
没有更多啦
相信神话
江深竹静两三家,多事红花映白花。报答春光知有处,应须美酒送生涯
以蝼蚁之行,展鸿鹄之志
(本站总访问量 513 次)
热门文章
1
欢迎来到美好生活,让生活回归该有的样子
2
Javascript特效之鼠标悬停特效
3
Javascript特效之输入框点击效果
4
css特效之发光边角效果(炫酷、实用)
5
css特效之创意登录注册框
6
css特效之玻璃形态卡片悬停效果
7
css特效之曲线导航菜单指示器
8
css特效——使用 CSS Clip-path 的纯 CSS3 水波文本动画效果
9
CSS实用技巧——滚动页面菜单指示器导航
10
CSS特效之数据雨云效果——震撼啊
最新评论
1
ヾ(≧∇≦*)ゝ
2
欢迎加入 Typecho 大家族
日志存档
2024年05月
热门标签
css
html
javascript
其它
虫洞
开往
评论