放假快乐--css项目这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查看活动详情。我正在参加码上掘金

这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查看活动详情。
我正在参加码上掘金体验活动，详情：show出你的创意代码块一起养成写作习惯！

也是第27天啦

项目展示

技术分析

html:span标签、p段落标签 css:全局选择器，标签选择器，linear-gradient渐变效果，blur虚化效果，

代码展示

html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
    
</head>
<body>
    <div class="box">
        <div class="boxmin">
            <span>放假快乐!</span>
            <P>喜迎5天假期</P>
        </div>
        
    </div>
</body>
</html>

css

	/* 清除浏览器格式 */
	padding: 0;
	margin: 0;
}
body {
	/* flex布局 */
	display: flex;
	justify-content: center;
	background: linear-gradient(to left,
			rgb(251, 234, 255),
			rgb(0, 201, 167));
}

.box {
	position: relative;
	width: 500px;
	height: 150px;
	top: 150px;
	bottom: 150px;
}

.boxmin {
	
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	/* 设置渐变 */
	background: linear-gradient(to right bottom,
			rgba(255, 255, 255, .5),
			rgba(255, 255, 255, .4),
			rgba(255, 255, 255, .3),
			rgba(255, 255, 255, .2));
	/* 让背景虚化 blur：模糊 */
	backdrop-filter: blur(15px);
	
}

.boxmin span {
	/* 设"放假快乐"的字体 */
	font: 1000 50px '';
	position: absolute;
	top: 100px;
	left: 50px;
}

.boxmin p {
	/* 设"喜迎5引假期"的字体 */
	
	font: 900 20px '';
	position: absolute;
	bottom: 50px;
	right: 90px;
	color: rgba(255, 255, 255, .3);
}

文章思路

首先，先使用p标签和span标签，将要放假了这么一个快乐的消息写出来，之后要给这些文字一些装饰，先给它了一个背景，这里使用的是渐变色。然后给文字框上框，在这里选择了一个圆圈，把整个文字包围住，同样是选择了渐变色，让整个圈看起来层次分明。整个效果就出来啦~

后续延伸

后续可以将整个球动起来，或者是整个背景有波纹的效果，配合起来会更好~