手机网站和电脑网站一样吗,金融 网站建设,宿迁网站建设价格,html5视频网站开发效果展示 页面结构组成
通过效果展示图#xff0c;我们可以看出页面布局比较常规#xff0c;最核心的就是卡片#xff0c;当鼠标没有悬停在卡片上时#xff0c;文字和头像处于半透明状态#xff0c;当鼠标悬停在卡片上是#xff0c;底部会展示社交图标。
CSS 知识点
b…效果展示 页面结构组成
通过效果展示图我们可以看出页面布局比较常规最核心的就是卡片当鼠标没有悬停在卡片上时文字和头像处于半透明状态当鼠标悬停在卡片上是底部会展示社交图标。
CSS 知识点
backdrop-filter 回顾transitiontransform
实现卡片基础布局
div classcontainerdiv classcarddiv classcontentdiv classimg_boximg src./images/user-1.jpg //divdiv classcontent_boxh3someone famousbr /spancreative designer/span/h3/div/divulli 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实现卡片样式
.container .card {position: relative;width: 300px;height: 400px;background: rgba(255, 255, 255, 0.05);margin: 20px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);border-radius: 15px;display: flex;justify-content: center;align-items: center;backdrop-filter: blur(10px);
}.container .card .content {position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;opacity: 0.5;transition: 0.5s;
}.container .card:hover .content {opacity: 1;transform: translateY(-20px);
}.container .card .content .img_box {position: relative;width: 150px;height: 150px;border-radius: 50%;overflow: hidden;border: 10px solid rgba(0, 0, 0, 0.25);
}实现社交图标动画
.container .card ul {position: absolute;bottom: 80px;display: flex;
}.container .card ul li {list-style: none;margin: 0 10px;transform: translateY(50px);transition: 0.5s;transition-delay: calc(0.1s * var(--i));opacity: 0;
}.container .card:hover ul li {/* 动画执行部分 */transform: translateY(30px);opacity: 1;
}完整代码下载
完整代码下载
