css实现山间日出火箭动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现山间日出火箭动画效果代码

代码标签: css 日出 火箭 山间

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --trees-z1: hsl(20, 60%, 20%);
          --trees-z2: hsl(20, 60%, 30%);
          --trees-z3: hsl(20, 60%, 50%);
          --trees-z4: hsl(20, 60%, 60%);
          --rocket-1: #f00;
          --rocket-2: #b00;
          --hills: hsl(20, 60%, 40%);
          --mountains: #f90;
          --snow: #fa0;
          --sky: #f60;
          --sun: #f90;
          --angle: -20deg;
        }
        
        svg {
          width: 100vh;
          height: 100vh;
          margin: 0 auto;
        }
        svg *{
          transition: all 2s;
        }
        svg:hover{
           --trees-z1: #0b3253;
          --trees-z2: #0c3b5b;
          --trees-z3: #1e566b;
          --trees-z4: #bcc7b0;
          --rocket-1: #bfe2cd;
          --rocket-2: #c5efd4;
          --hills: #486a72;
          --mountains: #bdd8ba;
          --snow: #d2e8cf;
          --sky: #a0cdb3;
          --sun: #fff;
          --angle: 2.........完整代码请登录后点击上方下载按钮下载查看

网友评论0