<html lang="zh-cn">
<头>
<title>交互式玻璃卡</title>
* {
保证金：0；
填充：0；
框大小：边框框；
}
身体 {
背景：线性渐变（135deg，#101010，#1f1f1f）；
高度：100vh；
显示：柔性；
对齐项目：居中；
调整内容：居中；
溢出：隐藏；
字体系列：Arial、无衬线字体；
}
.neon-shapes {
位置：绝对；
顶部：0；
左：0；
宽度：100%；
高度：100%；
指针事件：无；
}
.圆，.三角形，.矩形{
位置：绝对；
不透明度：0.8；
滤镜：模糊（2px）；
}
。圆圈 {
宽度：200px；
高度：200px；
背景：rgba(0, 255, 255, 0.8);
边界半径：50%；
顶部：20%；
左：15%；
}
。三角形 {
宽度：0；
高度：0；
左边框：100px 实心透明；
右边框：100px 实心透明；
边框底部: 200px 实心 rgba(255, 0, 255, 0.8);
顶部：50%；
左：70%；
}
。长方形 {
宽度：220px；
高度：180像素；
背景：rgba(255, 255, 0, 0.8);
顶部：70%；
左：30%；
}
.card-container {
显示：柔性；
间隙：20px；
位置：相对；
z 索引：1；
}
。卡片 {
背景：rgba(255, 255, 255, 0.1);
背景过滤器：模糊（10px）；
宽度：230px；
高度：320像素；
边框半径：15px；
显示：柔性；
弹性方向：列；
对齐项目：居中；
对齐内容：空间之间；
内边距：20px；
盒子阴影：0 4px 30px rgba(0, 0, 0, 0.5);
过渡：transform 0.3s 缓动，box-shadow 0.3s 缓动；
}
.card img {
宽度：100px；
高度：100px；
边界半径：50%；
过渡：变换0.3s，box-shadow 0.3s；
}
.卡 h3 {
颜色: 白色;
字体系列：“Lucida Sans”、“Lucida Sans Regular”、Geneva、Verdana、sans-serif；
}
。作者 {
颜色: 白色;
字体大小：14px；
顶部边距：-10px；
}
.follow-btn {
背景：rgba(0, 255, 127, 0.7);
边框：无；
内边距：15 像素 25 像素；
边框半径：20px；
颜色: 白色;
字体大小：18px；
光标：指针；
文本转换：大写；
动画：霓虹灯闪烁 2s 无限；
过渡：背景0.3s；
}
.follow-btn:悬停{
背景：rgba(0, 255, 127, 1);
}
@keyframes 霓虹灯闪烁 {
0%, 100% {
框阴影: 0 0 10px rgba(0, 255, 127, 0.8), 0 0 30px rgba(0, 255, 127, 0.8), 0 0 50px rgba(0, 255, 127, 0.8);
}
50% {
框阴影: 0 0 20px rgba(0, 255, 127, 1), 0 0 40px rgba(0, 255, 127, 1), 0 0 60px rgba(0, 255, 127, 1);
}
}.card:悬停{
变换：缩放（1.1）；
盒子阴影: 0 8px 50px rgba(0, 255, 127, 0.8);
}
.card img {
宽度：100px；
高度：100px；
边界半径：50%；
过渡：变换 0.3s 缓动，过滤 0.3s 缓动；
}
.card:悬停img {
变换：translateY(-10px);
}
.card img.active {
变换：translateY(-30px) 缩放(1.2)；
过滤器： drop-shadow(0 0 20px rgba(255, 255, 0, 1));
}
</风格>
</头>
<div>
</div>
以上是使用 html css 和 javascript 代码的 Glassmorphism 卡错觉的详细内容。更多信息请关注PHP中文网其他相关文章！
