位置: IT常识 - 正文

今日的CSS小案例(css案例教程)

编辑：rootadmin

今日的CSS小案例

推荐整理分享今日的CSS小案例(css案例教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:csshtml经典案例,css 案例,css案例源代码,今日的css小案例分享,css经典案例,css经典案例,css 案例,今日的css小案例分享,内容如对您有帮助，希望把文章链接给更多的朋友！

个人名片： 😊作者简介：一名大一在校生，web前端开发专业 🤡 个人主页：几何小超 🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。 🎅**学习目标: 坚持每一次的学习打卡，学好前端

今天需要做的是原神的手风琴，看其他挺好玩，我就做了一个，现在还是把展示图放出来吧哈哈，因为本人也是个二次元LSP

点击之后实现悬浮效果，看起来挺好看的，然后让咱们一起来设置

架构

这个布局相对于简单一点，有一个大盒子shell

里面放了一个版心card

然后把图片放盒子里面

下面的文字放另外一张盒子里面

简单介绍一下架构之后，接下展示css代码，里面大量运用到了子集选择器，伪类选择器

介绍一下子集选择器><是指选择这个内容里面单独的内容

还是老规矩清除默认边距然后在加上css3盒子模型

给body设置弹性布局，然后缩放盒子大小，加上背景颜色，基本的样式就完成

然后其他的我相信大家都应该清除差不多了，不懂的再去查查资料这里就重点讲几个标签

今天的练习中遇到的两个新标签

object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。

这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间

cube-bezier() 函数定义三次贝塞尔曲线（Cubic Bezier curve）。

三次贝塞尔曲线由 P0、P1、P2 和 P3 四个点进行定义。P0 和 P3 是曲线的起点和终点，在 CSS 中，这两个点是固定的，因为坐标是成比例。P0 为 (0, 0)，代表初始时间和初始状态，P3 为 (1, 1)，代表最终时间和最终状态。

伪类的话不用我多说了吧，详细情况还是查看W3C

这里是css代码

* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%); background-size: cover; } .shell{ width: 1700px; margin: 0 auto; margin-top: 5rem; height: 750px; display: flex; } .card{ flex-basis: 13%; position: relative; overflow: hidden; } .card:not(:nth(1)){ margin-left: 20px; } .card:hover{ overflow: initial; } .box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all .1s cubic-bezier(0.165,0.84,0.44,1); overflow: hidden; border-radius: 10px; background-image: linear-gradient(100deg,#a18cd1,#fcaa55c,#141414ce); } .box>img{ object-fit: contain; width: 100%; height: 100%; transform: translate(-50%,10% ) scale(3); position: relative; z-index: -1; } .card:hover>.box img{ opacity: 0; } .card:hover>.box{ transform: scaleY(1.5); background-image: initial; background-color: #7d419f; z-index: 2; cursor: pointer; } .card>h4{ position: absolute; display: block; width: 120px; text-align: center; color: rgba(255,255,255,0.2); bottom: 0; left: 50%; transform: translate(-50%, -35%); font-size: 28px; z-index: 100; transition: .2s; } .card:hover h4{ color: #fff; transform: translate(-50%,250%); } .card:hover .character>img{ opacity: 1; } .card>.character{ position: absolute; top: -100px; left: -400px; width: 100%; height: 100%; z-index: 3; pointer-events: none; } .character>img{ width: 820px; height: 820px; object-fit: contain; opacity: 0; transition: all .3s; position: relative; z-index: -10; }

这里提供源码，大家可以尝试一边理解一边来写哦，嘻嘻

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">* { margin: 0; padding: 0; box-sizing: border-box;}body { min-height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center;background-image: linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%); background-size: cover;}.shell{width: 1700px;margin: 0 auto;margin-top: 5rem;height: 750px;display: flex;}.card{flex-basis: 13%;position: relative;overflow: hidden;}.card:not(:nth(1)){margin-left: 20px;}.card:hover{overflow: initial;}.box{position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: all .1s cubic-bezier(0.165,0.84,0.44,1);overflow: hidden;border-radius: 10px;background-image: linear-gradient(100deg,#a18cd1,#fcaa55c,#141414ce);}.box>img{object-fit: contain;width: 100%;height: 100%;transform: translate(-50%,10% ) scale(3);position: relative;z-index: -1;}.card:hover>.box img{opacity: 0;}.card:hover>.box{transform: scaleY(1.5);background-image: initial;background-color: #7d419f;z-index: 2;cursor: pointer;}.card>h4{position: absolute;display: block;width: 120px;text-align: center;color: rgba(255,255,255,0.2);bottom: 0;left: 50%;transform: translate(-50%, -35%);font-size: 28px;z-index: 100;transition: .2s;}.card:hover h4{color: #fff;transform: translate(-50%,250%);}.card:hover .character>img{opacity: 1;}.card>.character{position: absolute;top: -100px;left: -400px;width: 100%;height: 100%;z-index: 3;pointer-events: none;}.character>img{width: 820px;height: 820px;object-fit: contain;opacity: 0;transition: all .3s;position: relative;z-index: -10;}</style></head><body> <div class="shell"> <div class="card"> <div class="box"> <img src="./img/1.png" /> </div> <div class="character"> <img src="./img/1.png" /> </div> <h4>凝光</h4> </div> <div class="card"> <div class="box"> <img src="./img/3.png" /> </div> <div class="character"> <img src="./img/3.png" /> </div> <h4>多莉</h4> </div> <div class="card"> <div class="box"> <img src="./img/4.png" /> </div> <div class="character"> <img src="./img/4.png" /> </div> <h4>刻晴</h4> </div> <div class="card"> <div class="box"> <img src="./img/5.png" /> </div> <div class="character"> <img src="./img/5.png" /> </div> <h4>七七</h4> </div> <div class="card"> <div class="box"> <img src="./img/6.png" /> </div> <div class="character"> <img src="./img/6.png" /> </div> <h4>纳西妲</h4> </div> <div class="card"> <div class="box"> <img src="./img/8.png" /> </div> <div class="character"> <img src="./img/8.png" /> </div> <h4>雷电将军</h4> </div> <div class="card"> <div class="box"> <img src="./img/7.png" /> </div> <div class="character"> <img src="./img/7.png" /> </div> <h4>可莉</h4> </div> <div class="card"> <div class="box"> <img src="./img/10.png" /> </div> <div class="character"> <img src="./img/10.png" /> </div> <h4>芭芭拉</h4> </div> </div></body></body></html>

本文链接地址:https://www.jiuchutong.com/zhishi/296199.html 转载请保留说明！

上一篇：基于Vue+Python的应用搭建——前端[1](pycharm vue)

下一篇：Ubuntu系统不使用snap安装firefox，使用firefox官网下载的安装包安装firefox(ubuntu busier)