湖上日出

  1. 演示,自适应 vmin

  2. 各组成部分讲解

  3. 拆解

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

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

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

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

  1. 云朵
    color,currentColor,box-shadow,animation

  2. 水面

  3. 石头

  4. 荷叶
    conic-gradient,skew


  1. border-right,border-radius弧度,box-shadow晨光,filter: drop-shadow复制

  2. 芦苇
    rotate,transform-origin,伪类,box-shadow: inherit;animation

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

  1. 太阳

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

  1. 太阳倒影

  2. 闪闪鳞光
    循环设置 top,width,animation-delay

Make in ZC APP Platform