卡通的独角鲸动画特效

一款使用css3绘制圆形径向动态背景的独角兽ui动画，卡通的独角鲸挥手翘尾巴动画特效。
老好看了~快去试试吧

html代码

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>独角鲸派对</title><link rel="stylesheet" href="css/style.css"></head>
<body><div id="bgContainer"><div id="background"></div>
</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>
</body>
</html>

css代码

#bgContainer {overflow: hidden;position: absolute;top: 0;bottom: 0;left: 0;right: 0;
}
#background {height: 100%;width: 100%;background: radial-gradient(circle,rgba(238, 182, 71, 0.5) 1%,rgba(230, 88, 59, 0.5) 13%,rgba(239, 78, 123, 0.5) 26%,rgba(175, 104, 187, 0.5) 39%,rgba(65, 131, 203, 0.5) 52%,rgba(18, 157, 179, 0.5) 65%,rgba(7, 179, 155, 0.5) 77%,rgba(111, 186, 130, 0.5) 89%,rgba(172, 191, 85, 0.5) 98%);z-index: -1;animation: 1s backgroundWarp infinite;
}@keyframes backgroundWarp {50% {transform: scale(5);}
}#narwhal {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);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);}
}

卡通的独角鲸动画特效相关推荐

html弹跳特效,有趣的纯CSS3弹性卡通小怪物弹跳动画特效
这是一款使用纯CSS3制作的非常有趣的卡通小怪物弹跳动画特效.该CSS3特效中有三个卡通小怪物,它们在不停的上下弹跳,并且各自的身体也带有一些弹性效果. 使用方法 HTML结构每一个卡通小怪物的HT ...
HTML+CSS+JS实现 ❤️卡通湖面上日出动画特效❤️
css3卡通房子店铺图形动画js特效
下载地址基于css3绘制的卡通房子店铺图形动画特效,该场景动画包括店铺.树.云朵和飞鸟等元素. dd:
卡通的平板卧推男孩动画特效
纯css3绘制卡通的健身男孩,平板卧推健身ui图形动画特效. <div class="container"><div class="bench-cont ...
html map热点特效,html5 svg卡通世界地图热点动画特效
特效描述:html5 svg 卡通世界地图热点动画特效.html5 svg绘制圆形世界地图热点线性动画展示特效. 代码结构 1. 引入JS 2. HTML代码 var select = functi ...
html5 svg画钟表,html5 svg创意卡通粒子时钟动画特效
非常简单可爱的一款html5 svg绘制的创意卡通粒子时钟动画特效,时钟走动指针动画非常有意思. 查看演示下载资源: 12 次下载资源下载积分: 20 积分 js代码 // Utilities ...
html css 圆形按钮仿uc,10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
html5鼠标滑过图片图片弹出层,纯CSS3鼠标滑过图片遮罩层动画特效
简要教程这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效.该特效中,当鼠标滑过或悬停在图片上面时,会在图片上出现遮罩层动画,展示出图片的描述信息和链接图标按钮. 使用方法在页面中引入boot ...
纯CSS3卡通模型飞机飞行动画
下载地址纯CSS3卡通模型飞机飞行动画是一款逼真的塞斯纳飞机天空飞行动画特效. dd:

卡通的独角鲸动画特效

卡通的独角鲸动画特效相关推荐

最新文章

热门文章