今日的CSS小案例

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

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

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

架构

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

里面放了一个版心card

然后把图片放盒子里面

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

 <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>

简单介绍一下架构之后,接下展示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>

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>