湖上日出

演示，自适应 vmin

各组成部分讲解

拆解

配色方案 => 定义两组颜色变量

背景色
 height: 100vh; position: relative; overflow: hidden; 渐变

山脉
border-radius八点控制，渐变，box-shadow晨光，绝对定位

倒影
伪类，scaleY(-0.6)，filter: blur(3px); CSS编辑器: inherit

云朵
color，currentColor，box-shadow，animation

水面

石头

荷叶
conic-gradient，skew

草
border-right，border-radius弧度，box-shadow晨光，filter: drop-shadow复制

芦苇
rotate，transform-origin，伪类，box-shadow: inherit；animation

涟漪
动画：scale(0) => scale(1)，opacity: 0;
循环设置 animation-delay
50%和100%同值

太阳

朝霞
分别映照天空和湖面。radial-gradient，mix-blend-mode: color-burn; fade

太阳倒影

闪闪鳞光
循环设置 top，width，animation-delay