站长忽略的观点,紧急通知网页升级,花艺企业网站建设项目规划,网站建设的简历制作效果展示 页面结构
从上述的效果展示可以看到#xff0c;页面是由多个卡片组成#xff0c;并且鼠标悬停在卡片上时#xff0c;会旋转用户图片并且韩式对应的用户信息框。
CSS3 知识点
:has 属性的运用
实现页面整体结构
div classcontainerdiv…效果展示 页面结构
从上述的效果展示可以看到页面是由多个卡片组成并且鼠标悬停在卡片上时会旋转用户图片并且韩式对应的用户信息框。
CSS3 知识点
:has 属性的运用
实现页面整体结构
div classcontainerdiv classcard data-colorclr1div classimg_boximg srcimages/user-1.jpg //divdiv classglassh3Someonebr /spanSEO Expert/span/h3ulli style--i: 1a href#i classfa fa-qq aria-hiddentrue/i/a/lili style--i: 2a href#i classfa fa-weixin aria-hiddentrue/i/a/lili style--i: 3a href#i classfa fa-weibo aria-hiddentrue/i/a/lili style--i: 4a href#i classfa fa-tencent-weibo aria-hiddentrue/i/a/li/ul/div/div
/div实现卡片基础样式
.container .card {position: relative;width: 200px;height: 200px;border-radius: 10px;display: flex;justify-content: center;align-items: center;transition: 0.5s;
}实现用户头像样式
.container .card .img_box {position: absolute;inset: 0;border-radius: 12px;border: 4px solid rgba(0, 0, 0, 0.2);
}.container .card .img_box img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: 0.5s;border-radius: 10px;
}.container .card:hover .img_box img {opacity: 0.5;
}实现用户信息框样式
.container .card .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;scale: 0;display: flex;flex-flow: row wrap;justify-content: center;align-items: center;overflow: hidden;opacity: 0;transition: 0.5s;
}.container .card .glass::before {content: ;display: block;position: absolute;bottom: 0;width: 100%;height: 50px;background: rgba(255, 255, 255, 0.05);
}.container .card ul {position: absolute;bottom: 14px;width: 100%;display: flex;justify-content: center;gap: 15px;
}.container .card ul li {list-style: none;
}.container .card ul a {color: #fff8;font-size: 1.25em;scale: 0;transition: 0.25s;transition-delay: scale calc(0.2s * var(--i));
}.container .card:hover ul a {scale: 1;
}.container .card ul a:hover {color: #fff;
}实现对应的悬停样式
.container .card:hover .img_box img {opacity: 0.5;
}.container .card:hover {transform: rotate(-15deg);
}.container .card:hover .glass {scale: 1;opacity: 1;transform: rotate(20deg);
}使用 has 属性修改背景颜色
body:has(.card[data-colorclr1]:hover) {background: #d18c55;
}body:has(.card[data-colorclr2]:hover) {background: #fff6a3;
}body:has(.card[data-colorclr3]:hover) {background: #eeb973;
}body:has(.card[data-colorclr4]:hover) {background: #f7f3ea;
}完整代码下载
完整代码下载
