使用css3实现卡通的独角鲸动画特效

# 使用css3实现卡通的独角鲸动画特效

# 快速导航

# 具体实例

# 具体代码


<!DOCTYPE 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" />
    <title>用css3实现一只能动的鲸鱼</title>
    <style>
      #narwhal {
  transform: translate(10%, -5%);
  height: 50vh;
  width: 50vw;
}

#wavyFin {
  animation: 2s wavyFin infinite ease-in-out;
  transform-origin: 50px 100px;
}

#leftFin {
  animation: 1s leftFin infinite ease-in-out;
  transform-origin: 160px 120px;
}

#rightFin {
  animation: 1s rightFin infinite ease-in-out;
  transform-origin: 180px 120px;
}

@keyframes wavyFin {
  0%,
  100% {
    transform: rotate(0deg) translate(50px);
  }
  50% {
    transform: rotate(60deg) translate(70px);
  }
}
@keyframes leftFin {
  0%,
  100% {
    transform: rotate(-10deg) translatey(10px);
  }
  50% {
    transform: rotate(10deg) translatey(10px);
  }
}
@keyframes rightFin {
  0%,
  100% {
    transform: rotate(0deg) translatey(10px);
  }
  50% {
    transform: rotate(-20deg) translatey(10px);
  }
}

#star1 {
  animation: 1500ms rotateStar infinite linear;
  transform-origin: 33px 42px;
}

#star2 {
  opacity: 0;
  animation: 1500ms rotateStar infinite alternate;
  animation-delay: 1s;
  transform-origin: 35px 20px;
}

@keyframes rotateStar {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  40%,
  60% {
    opacity: 1;
  }
  50% {
    transform: rotate(360deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(720deg) scale(0);
  }
}
    </style>
  </head>
  <body>
       <div id="bgContainer">
        <div id="background"></div>
        <svg id="narwhal" width="211" height="204" version="1.1" viewBox="0 0 211.03 204.22" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(7.1125 -5.1801)">
    <path d="m77.215 83.558c1.4405-0.60569 2.2867-2.2553 1.9155-3.7342-0.6446-2.5683-3.8498-3.4357-5.7338-1.5517-2.6146 2.6146 0.36421 6.7382 3.8183 5.2859zm-41.591 0.32282c1.2292-0.19662 2.5542-1.9723 2.5542-3.4231 0-1.6496-1.6219-3.1891-3.3422-3.1725-1.6666 0.01609-2.6435 0.72969-3.2054 2.3417-0.82222 2.3586 1.3535 4.6762 3.9935 4.254z" fill="#646565" stroke-width=".40736" />

    <g transform="rotate(-7.7226 -43.169 -86.721)" stroke-width=".40736" id="wavyFin">
      <g id="point"></g>
      <path d="m-32.219 158.99c17.782-3.4586 22.953-8.605 30.452-14.663 19.075-22.07 8.1615-11.969 1.0529-30.258-7.5572 5.1319-14.075 8.7611-19.344 14.504-6.1573 6.711-11.951 16.106-13.941 22.604-0.84424 2.7577-1.7072 7.596-1.3905 7.7963 0.12956 0.0819 1.5562 0.0895 3.1704 0.0168z" fill="#51c9cc" />
      <path d="m9.0792 131.3c-11.266-7.8558-10.668-10.718-15.603-6.6943-5.7205 4.9496-13.655 10.976-17.506 32.372 14.324-3.115 25.071-12.809 33.109-25.677z" fill="#3cabab" />
    </g>
    <g stroke-width=".40736">
      <path d="m147.72 174.63c-15.966-22.909-58.78-43.53-95.861-47.218 0 0-4.2286 3.0102-23.261 9.8931-2.8252 9.8267-4.4778 17.924 1.5561 26.202 12.339 20.743 30.507 32.945 54.003 39.404 30.542 6.7475 60.809-3.6828 63.563-28.281z" fill="#ebe8e3" />
      <path d="m121.8 209.15c18.64-1.9313 32.041-7.9477 42.807-19.217 13.687-14.328 17.776-30.369 18.819-58.773-2.1262-20.645-19.555 30.433-35.705 43.468l-1.714 1.4874c-12.247 10.628-28.319 16.037-47.63 16.03-15.341-6e-3 -31.019-3.0079-49.291-9.4393l-4.6847-1.6489 2.6572 2.5608c13.542 13.05 32.434 22.066 52.337 24.977 5.1151 0.74813 17.566 1.0567 22.405 0.55531z" fill="#d2d0cc" />
      <path d="m27.225 157c-0.10138-3.132 1.0156-6.9296 3.0212-10.271 4.2148-7.0228 11.797-11.322 23.819-13.504 5.6029-1.017 16.997-1.0162 21.387 2e-3 3.4971 0.8108 9.4187 2.9425 9.7749 3.5188 0.11932 0.19308 0.66337 2.1109 1.209 4.2618 2.133 8.4085 6.9758 16.359 14.669 24.083 4.1929 4.2095 10.027 9.1187 10.852 9.1316 0.38255 6e-3 2.3118-7.1496 2.8545-10.588 0.26528-1.6804 0.53846-3.124 0.60708-3.2081 0.0686-0.0841 1.4232 0.8097 3.0102 1.9862 6.2798 4.6554 12.586 8.0157 18.583 9.9029 9.8588 3.102 21.833 3.1044 33.503 7e-3 -16.032-18.666-28.397-7.6412-47.229-58.591-3.2866-7.8704-5.2768-15.5-7.0718-27.11-1.8932-12.245-2.6953-15.256-5.5744-20.926-6.0659-11.945-17.821-20.854-31.318-23.735-4.2924-0.91631-15.675-1.0269-19.146-0.18609-3.6088 0.87419-6.5178 1.8152-6.5178 2.1084-7.8081 3.8859-11.664 7.7692-17.268 11.504-0.73679 0.23088-4.5953 5.5047-7.0712 9.6649-4.143 6.9614-8.0859 16.76-10.245 25.46-1.2781 5.1504-2.0262 10.11-2.5193 16.702-0.02123 27.334 4.8844 34.677 10.67 49.786z" fill="#51c9cc" />
      <path d="m159.78 174.21c3.585-0.39273 10.014-1.7382 14.244-2.9811l3.2449-0.95343 1.3417-3.4225c3.9829-10.16 6.7923-24.56 7.2643-37.234 0.1168-3.1367 0.31192-6.8534 0.4336-8.2592l0.22122-2.5561c-13.272-2.0557-13.046-1.9342-22.472 0.55054 0 0.85638-4.4756 7.8656-6.8987 10.804-1.713 2.0773-6.0718 5.3995-8.3775 6.3853-0.96429 0.41227-2.7251 0.70382-4.3135 0.7142-6.2876 0.0411-11.338-4.3527-17.326-15.073-1.2202-2.1844-2.1218-3.5134-2.0037-2.9533 0.11817 0.56012 0.60034 2.8412 1.0715 5.069 2.758 13.041 9.9852 25.459 18.623 31.998 2.6291 1.9903 9.4579 5.708 11.418 6.2162 0.94408 0.24473 0.93791 0.26659-0.79694 2.8217-0.96162 1.4163-3.0938 4.0874-4.7381 5.9358l-2.9897 3.3608 4.6014-0.0553c2.5308-0.0304 5.8846-0.19588 7.453-0.36769z" fill="#3cabab" />
    </g>
    <path d="m53.989 43.352-30.989-38.172 13.146 49.775c2.2505 11.895 11.571 14.82 18.292 10.534 11.23-8.3835 4.4778-15.983-0.44904-22.138z" fill="#e4c0e3" />
    <path d="m77.215 83.558c2.4423-2.0551 1.0277-6.0335-2.1453-6.0335-3.7508 0-4.9367 4.8468-1.6183 6.6142 1.3696 0.72943 2.3946 0.57127 3.7636-0.58072zm-41.461 0.43689c2.2616-1.2286 2.2019-4.9348-0.0987-6.1245-3.6762-1.901-6.9907 2.6256-4.0649 5.5515 1.3048 1.3048 2.511 1.4708 4.1636 0.57303z" fill="#194848" stroke-width=".40736" />
    <g fill="#3cabab" stroke-width=".40736">
      <path d="m173.9 104.25c-0.8293-7.33-4.929-15.109-11.788-22.368-3.0059-3.1812-11.072-9.8734-11.901-9.8734-0.51892 0-1.5495 3.5982-2.2638 7.9037-0.64431 3.8838-0.24052 11.88 0.79763 15.795 2.0181 7.6106 5.4099 13.434 11.342 19.474 2.0863 2.124 3.7932 4.0161 3.7932 4.2048 18.218 17.136 10.686-9.3106 10.02-15.135z" id="leftFin"></path>
      <path d="m186.53 118.8 2.1052-1.0585c4.8261-2.4266 8.1976-5.3425 10.885-9.4137 4.6438-7.036 5.6052-15.666 2.9075-26.097-0.6559-2.536-1.387-4.8055-1.6248-5.0432-0.30476-0.30476-1.2517 0.01462-3.2104 1.0828-9.8039 5.3464-17.629 14.782-22.811 27.508-1.8294 8.1482-0.95851 4.9072-4.1135 13.979 5.9294 2.1947 15.862-0.9573 15.862-0.9573z" id="rightFin" />
      <path d="m121.74 162.33c-9e-3 -6.5028-2.7543-15.091-7.1822-22.47-1.8017-3.0026-3.2965-4.9969-2.8078-3.7463 2.586 6.6187 3.5041 11.439 3.5306 18.535l0.0205 5.4994 2.6186 1.9511c3.7802 2.8166 3.824 2.8192 3.8204 0.23117z" />
    </g>
    <g transform="matrix(.93575 -.024637 .024637 .93575 -1563.8 -2547.1)">
      <path d="m1631.5 2867.7c1.052 9.3458 8.3323 14.376 21.516 14.756 0-2e-4 0.01 0 0.016 0 0.01 2e-4 0.01 0 0.016 0 0.1521 0 0.2896-0.014 0.4375-0.021 0.1472 0.01 0.2841 0.021 0.4356 0.021 0.01 0 0.01 2e-4 0.016 0 0.01 0 0.016-2e-4 0.016 0 13.183-0.3804 20.464-5.4101 21.516-14.756-7.475 2.6408-14.485 4.191-21.531 4.3477-0.1387 0-0.2774-0.011-0.4161-0.02-0.012 8e-4 -0.023 0-0.035 0-0.012-8e-4 -0.025 0-0.037 0-0.1386 0.01-0.2774 0.016-0.416 0.02-7.0466-0.1567-14.056-1.7069-21.531-4.3477z" fill="#6d0000" stroke="#be0000" />
      <path d="m1647.4 2876.2a8.5079 5.0064 0 0 0-7.8301 3.0606c3.4202 1.7496 7.8746 2.7262 13.369 2.8848 0-2e-4 0.01 0 0.016 0 0.01 2e-4 0.01 0 0.016 0 0.1521 0 0.2896-0.015 0.4375-0.022 0.1472 0.01 0.284 0.022 0.4355 0.022 0.01 0 0.012 2e-4 0.018 0 0.01 0 0.016-2e-4 0.016 0 4.839-0.1397 8.8751-0.9112 12.107-2.2872a8.5079 5.0064 0 0 0-8.1855-3.6582 8.5079 5.0064 0 0 0-5.2051 1.0489 8.5079 5.0064 0 0 0-5.1934-1.0489z" fill="#a80000" />
      <path d="m1646 2877.2c-6.1847 0.3889 1.3627 1.6532 3.4649 1.7519 3.8155 0.3579 9.093 0.1126 11.721-1.0488-4.8302-1.982-9.3338 1.4165-14.031-0.7187l-0.3769-0.01-0.7774 0.024z" fill="#d30000" />
      <g transform="matrix(.99553 -.094459 .094459 .99553 -255.03 180.94)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.99964 .026851 .026851 .99964 3229.4 -30.907)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.77397 -.1033 .1033 .77397 88.854 828.81)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.76365 -.16291 .16291 .76365 -61.873 956.26)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.74833 -.22297 .22297 .74833 -205.53 1098.5)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.58527 -.17797 .17797 .58527 194.86 1489.8)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.56974 -.22276 .22276 .56974 94.485 1607.5)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.99447 -.10505 -.10505 .99447 3591.1 201.42)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.9993 .037484 -.037484 .9993 109.08 -47.484)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.77612 -.085709 -.085709 .77612 3171.8 793.55)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.76715 -.14555 -.14555 .76715 3325.4 917.55)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.75319 -.20593 -.20593 .75319 3472.2 1056.5)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.58916 -.16465 -.16465 .58916 3080.8 1456.8)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.57464 -.20977 -.20977 .57464 3183.8 1572.1)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
    </g>
    <g fill="#fdffc2" stroke="gray" stroke-width=".2">
      <path id="star1" d="m36.77 46.872-4.0824-3.4429-4.3026 3.1634 3.4429-4.0824-3.1634-4.3026 4.0824 3.4429 4.3026-3.1634-3.4429 4.0824z" />
      <path id="star2" d="m38.654 23.708-4.0824-3.4429-4.3026 3.1634 3.4429-4.0824-3.1634-4.3026 4.0824 3.4429 4.3026-3.1634-3.4429 4.0824z" />
    </g>
  </g>
        </svg>  
      </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
# 实现原理

鲸鱼的绘制,是使用svg实现的,而鲸鱼的动画是通过css3动画实现的
留言
解答
← css实现switch开关图片闪光效果 →