CSS斑马条纹背景、毛玻璃效果、线性小三角

最新推荐文章于 2022-10-02 18:01:33 发布

hellozhxyuan

最新推荐文章于 2022-10-02 18:01:33 发布

阅读量171

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45010908/article/details/118677220

版权

在这里插入图片描述

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-content: space-around;
			width: 1000px;
			height: 900px;
		}
		
		.bg {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 300px;
			height: 200px;
			color: white;
			font-size: 36px;
		}
		
		/*渐变*/
		.bg-first {
			/**
			 * 0-20%为#cc95c0，20%-80%为#cc95c0到#7aa1d2的渐变，80%-100%为#7aa1d2
			 */
			background: linear-gradient(#cc95c0 20%, #7aa1d2 80%);
		}
		
		/*分割*/
		.bg-second {
			/**
			 * 0-50%为#cc95c0，50%-100%为#7aa1d2
			 */
			background: linear-gradient(#cc95c0 50%, #7aa1d2 50%);
		}
		
		/*斑马条纹*/
		.bg-third {
			background: linear-gradient(#cc95c0 50%, #dbd4b4 50%);
			background-size: 100% 40px;
		}
		
		/*三色斑马条纹*/
		.bg-fourth {
			/**
			 * 100% ÷ 3 = 33.3%
			 */
			background: linear-gradient(#cc95c0 33.3%, #dbd4b4 0, #dbd4b4 66.6%, #7aa1d2 0);
			background-size: 100% 40px;
		}
		
		/*竖向双色斑马条纹*/
		.bg-fifth {
			background: linear-gradient(to right, #cc95c0 50%, #dbd4b4 0);
			background-size: 40px 100%;
		}
		
		/*竖向三色斑马条纹*/
		.bg-sixth {
			/**
			 * 100% ÷ 3 = 33.3%
			 */
			background: linear-gradient(to right, #cc95c0 33.3%, #dbd4b4 0, #dbd4b4 66.6%, #7aa1d2 0);
			background-size: 40px 100%;
		}
		
		/*斜向双色斑马条纹*/
		.bg-seventh {
			/**
			 * 50% ÷ 2 = 25%
			 */
			background: linear-gradient(45deg, #cc95c0 25%, #dbd4b4 0, #dbd4b4 50%, #cc95c0 0, #cc95c0 75%, #dbd4b4 0);
			background-size: 40px 40px;
		}
		
		/*斜向三色斑马条纹*/
		.bg-eighth {
			/**
			 * 50% ÷ 3 = 16.66%
			 */
			background: linear-gradient( 45deg, #cc95c0 0, #cc95c0 16.66%, #dbd4b4 16.66%, #dbd4b4 33.33%, #7aa1d2 33.33%, #7aa1d2 50%, #cc95c0 50%, #cc95c0 66.66%, #dbd4b4 66.66%, #dbd4b4 83.33%, #7aa1d2 83.33%, #7aa1d2);
			background-size: 40px 40px;
		}
		
		/*repeating-linear-gradient虚化斑马条纹*/
		.bg-ninth {
			background: #cc95c0;
			background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1) 15px, transparent 0, transparent 30px);
		}
		
		/*repeating-linear-gradient斜向双色条纹*/
		.bg-tenth {
			background: repeating-linear-gradient(45deg, #cc95c0, #cc95c0 15px, #dbd4b4 0, #dbd4b4 30px);
		}
		
		/*鳞片式三角条纹*/
		.bg-eleventh {
			background: linear-gradient(45deg, #cc95c0 50%, #dbd4b4 0);
			background-size: 40px 40px;
		}
		
		/*十字格条纹*/
		.bg-twelveth {
			background-image: linear-gradient(0deg, rgba(200, 0, 0, .5) 50%, transparent 50%), linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%);
			background-size: 40px 40px;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="bg bg-first">示例一</div>
		<div class="bg bg-second">示例二</div>
		<div class="bg bg-third">示例三</div>
		<div class="bg bg-fourth">示例四</div>
		<div class="bg bg-fifth">示例五</div>
		<div class="bg bg-sixth">示例六</div>
		<div class="bg bg-seventh">示例七</div>
		<div class="bg bg-eighth">示例八</div>
		<div class="bg bg-ninth">示例九</div>
		<div class="bg bg-tenth">示例十</div>
		<div class="bg bg-eleventh">示例十一</div>
		<div class="bg bg-twelveth">示例十二</div>
	</div>
</body>

二、毛玻璃效果

在这里插入图片描述

<main>
    <blockquote>
        "少年贪玩，青年迷恋爱情，壮年汲汲于成名成家，暮年自安于自欺欺人。人寿几何，顽铁能炼成的精金，能有多少？但不同程度的锻炼，必有不同程度的成绩；不同程度的纵欲放肆，必积下不同程度的顽劣。
        <br />
        <br />
        "上苍不会让所有幸福集中到某个人身上，得到爱情未必拥有金钱；拥有金钱未必得到快乐；得到快乐未必拥有健康；拥有健康未必一切都会如愿以偿。保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。一切快乐的享受都属于精神，这种快乐把忍受变为享受，是精神对于物质的胜利，这便是人生哲学。"
        <footer>——
            <cite>杨绛</cite>
        </footer>
    </blockquote>
</main>
body, main::before{
    background: url("imgs/animals.jpg") 0 / cover fixed;
}
main{
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 800px;
    height: 500px;
    line-height: 2;
    margin: auto;
    border-radius: 5px;
    background: rgba(255, 255, 255, .3);
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
    overflow: hidden;
}
main::before{
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}

小三角

.sanjiao:before{
			position: absolute;
	 	left: 22%;
		 right: 20/px;
		 top: 12.2%;
		 width: 12px;
		height: 12px;
		margin-top: -2px;
			border-right: 1px solid #3498DB;
		border-bottom: 1px solid #3498DB;
	-webkit-transform: rotate(225deg);
			content: '';
		 }

hellozhxyuan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS斑马条纹背景、毛玻璃效果、线性小三角

<head> <meta charset="UTF-8"> <title></title> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; width: 1000px; height: 900px; } .b...
复制链接

扫一扫