skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第163个小实例：纯CSS实现彩虹倒映水面的唯美背景

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-06-09 15:51:35 +08:00
parent a51be71728
commit 2852170a9a
4 changed files with 90 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -169,4 +169,5 @@
159. HTML5+CSS3+JS小实例：翻滚吧乔巴自定义滑块控件
160. HTML5+CSS3小实例：带标题的3D多米诺人物卡片
161. HTML5+CSS3+JS小实例：环形文字动画特效
162. HTML5+CSS3+JS小实例：科技感满满的鼠标移动推开粒子特效
162. HTML5+CSS3+JS小实例：科技感满满的鼠标移动推开粒子特效
163. HTML5+CSS3小实例：纯CSS实现彩虹倒映水面的唯美背景

64
code/163/163.css Normal file
View File

@ -0,0 +1,64 @@
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口宽高 */
height: 100vh;
/* 渐变背景 */
background: linear-gradient(to bottom,#9795f0 0%,#fbc8d4 45%,#fbc8d4 55%,#9795f0 100%);
/* 溢出隐藏 */
overflow: hidden;
}
.container{
width: 100%;
height: 100%;
position: relative;
}
.container::before,
.container::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
/* 彩虹+山 */
.container::after{
/* 设置背景图像 */
background-image:
/* 左边的山（径向渐变，黑色到透明） */
radial-gradient(ellipse at 0% 100%,#0b0b31 50%,transparent 50.5%),
/* 右边的山（同上） */
radial-gradient(ellipse at 100% 100%,#0b0b31 50%,transparent 50.5%),
/* 彩虹（径向渐变 彩虹的七颜色+中心镂空底色） */
radial-gradient(circle at 50% 100%,#f5c4d1aa 30%,#845FA7AA 30.5%,#845FA7AA 35%,#5461ACAA 35.5%,#5461ACAA 40%,#64CDF3AA 40.5%,#64CDF3AA 45%,#91C83DAA 45.5%,#91C83DAA 50%,#FAF04FAA 50.5%,#FAF04FAA 55%,#FAAE51AA 55.5%,#FAAE51AA 60%,#DF4348AA 60.5%,#DF4348AA 65%,transparent 65.5%);
/* 背景不平铺 */
background-repeat: no-repeat;
/* 分别指定三个背景的大小（左山，右山，彩虹） */
background-size: 75% 86px,75% 86px,416px 208px;
/* 分别指定三个背景的定位（左山，右山，彩虹） */
background-position: 0% 50%,100% 50%,50% 40%;
}
.container::before{
/* 设置背景图像 */
background-image:
/* 左边的山（径向渐变，黑色到透明） */
radial-gradient(ellipse at 0% 0%,#0b0b31 50%,transparent 50.5%),
/* 右边的山（同上） */
radial-gradient(ellipse at 100% 0%,#0b0b31 50%,transparent 50.5%),
/* 彩虹（径向渐变 彩虹的七颜色+中心镂空底色） */
radial-gradient(circle at 50% 0%,#f5c4d1aa 30%,#845FA7AA 30.5%,#845FA7AA 35%,#5461ACAA 35.5%,#5461ACAA 40%,#64CDF3AA 40.5%,#64CDF3AA 45%,#91C83DAA 45.5%,#91C83DAA 50%,#FAF04FAA 50.5%,#FAF04FAA 55%,#FAAE51AA 55.5%,#FAAE51AA 60%,#DF4348AA 60.5%,#DF4348AA 65%,transparent 65.5%);
/* 背景不平铺 */
background-repeat: no-repeat;
/* 分别指定三个背景的大小（左山，右山，彩虹） */
background-size: 85% 86px,85% 86px,400px 200px;
/* 分别指定三个背景的定位（左山，右山，彩虹） */
background-position: 0% 57%,100% 57%,50% 65%;
/* 模糊滤镜 */
filter: blur(13px);
/* 放大（沿X轴放大1.05倍，沿Y轴放大1.2倍） */
transform: scale(1.05,1.2);
}

16
code/163/163.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>纯CSS实现彩虹倒映水面的唯美背景</title>
<link rel="stylesheet" href="163.css">
</head>
<body>
<div class="container"></div>
</body>
</html>

8
code/163/color.txt Normal file
View File

@ -0,0 +1,8 @@
彩虹色（最后面的AA是不透明度，这里加一点不透明度，让颜色浅一点点）
红：#DF4348AA
橙：#FAAE51AA
黄：#FAF04FAA
绿：#91C83DAA
蓝：#64CDF3AA
靛：#5461ACAA
紫：#845FA7AA