手机网站和电脑网站一样吗,wordpress 2m附件,厦门长实建设有限公司网站,南山网站多少钱效果展示 页面结构组成
通过效果展示图#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;
}完整代码下载
完整代码下载
