昨天我们通过css实现了一个水波浪的特效动画,今天我们就用css实现一个类似百事可乐图标Logo的动画效果,如下图所示:
<html> <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png"> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico"> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111"> <title>css实现类似百事可乐图标Logo的动画效果www.woaidaogu.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> html, body { width: 100%; height: 100%; display: flex; background: #000; } .g-wrap { position: relative; margin: auto; width: 200px; height: 200px; border-radius: 50%; } .g-container { position: absolute; top: 0; left: 0; width: 200px; height: 200px; display: flex; align-items: flex-end; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #e31d25; } .rect { border-radius: 0; } .g-item { --time: 1s; --delay: 0.1s; --f: calc(var(--time) / -30); --h: 35px; --angle: 10deg; flex-grow: 1; background-color: #060283; -webkit-animation: heightChange var(--time) infinite ease-in-out alternate, skewChange var(--time) infinite ease-in-out alternate; animation: heightChange var(--time) infinite ease-in-out alternate, skewChange var(--time) infinite ease-in-out alternate; z-index: 5; } .g-container-h1 .g-item { --time: 1.1s; --delay: -0.3s; --h: 70px; background: #468ef6; z-index: 4; } .g-container-h2 .g-item { --time: 1.2s; --delay: -0.5s; --h: 110px; background: #03e8fe; z-index: 3; } .g-container-h3 .g-item { --time: 1.3s; --h: 118px; background: #04a348; z-index: 2; } .g-container-h4 .g-item { --time: 1.4s; --h: 160px; background: #ff5621; z-index: 1; } .g-item:nth-child(1) { -webkit-animation-delay: calc(var(--f) * 0), calc(var(--f) * 0 - 0.5s); animation-delay: calc(var(--f) * 0), calc(var(--f) * 0 - 0.5s); } .g-item:nth-child(2) { -webkit-animation-delay: calc(var(--f) * 1), calc(var(--f) * 1 - 0.5s); animation-delay: calc(var(--f) * 1), calc(var(--f) * 1 - 0.5s); } .g-item:nth-child(3) { -webkit-animation-delay: calc(var(--f) * 2), calc(var(--f) * 2 - 0.5s); animation-delay: calc(var(--f) * 2), calc(var(--f) * 2 - 0.5s); } .g-item:nth-child(4) { -webkit-animation-delay: calc(var(--f) * 3), calc(var(--f) * 3 - 0.5s); animation-delay: calc(var(--f) * 3), calc(var(--f) * 3 - 0.5s); } .g-item:nth-child(5) { -webkit-animation-delay: calc(var(--f) * 4), calc(var(--f) * 4 - 0.5s); animation-delay: calc(var(--f) * 4), calc(var(--f) * 4 - 0.5s); } .g-item:nth-child(6) { -webkit-animation-delay: calc(var(--f) * 5), calc(var(--f) * 5 - 0.5s); animation-delay: calc(var(--f) * 5), calc(var(--f) * 5 - 0.5s); } .g-item:nth-child(7) { -webkit-animation-delay: calc(var(--f) * 6), calc(var(--f) * 6 - 0.5s); animation-delay: calc(var(--f) * 6), calc(var(--f) * 6 - 0.5s); } .g-item:nth-child(8) { -webkit-animation-delay: calc(var(--f) * 7), calc(var(--f) * 7 - 0.5s); animation-delay: calc(var(--f) * 7), calc(var(--f) * 7 - 0.5s); } .g-item:nth-child(9) { -webkit-animation-delay: calc(var(--f) * 8), calc(var(--f) * 8 - 0.5s); animation-delay: calc(var(--f) * 8), calc(var(--f) * 8 - 0.5s); } .g-item:nth-child(10) { -webkit-animation-delay: calc(var(--f) * 9), calc(var(--f) * 9 - 0.5s); animation-delay: calc(var(--f) * 9), calc(var(--f) * 9 - 0.5s); } .g-item:nth-child(11) { -webkit-animation-delay: calc(var(--f) * 10), calc(var(--f) * 10 - 0.5s); animation-delay: calc(var(--f) * 10), calc(var(--f) * 10 - 0.5s); } .g-item:nth-child(12) { -webkit-animation-delay: calc(var(--f) * 11), calc(var(--f) * 11 - 0.5s); animation-delay: calc(var(--f) * 11), calc(var(--f) * 11 - 0.5s); } .g-item:nth-child(13) { -webkit-animation-delay: calc(var(--f) * 12), calc(var(--f) * 12 - 0.5s); animation-delay: calc(var(--f) * 12), calc(var(--f) * 12 - 0.5s); } .g-item:nth-child(14) { -webkit-animation-delay: calc(var(--f) * 13), calc(var(--f) * 13 - 0.5s); animation-delay: calc(var(--f) * 13), calc(var(--f) * 13 - 0.5s); } .g-item:nth-child(15) { -webkit-animation-delay: calc(var(--f) * 14), calc(var(--f) * 14 - 0.5s); animation-delay: calc(var(--f) * 14), calc(var(--f) * 14 - 0.5s); } .g-item:nth-child(16) { -webkit-animation-delay: calc(var(--f) * 15), calc(var(--f) * 15 - 0.5s); animation-delay: calc(var(--f) * 15), calc(var(--f) * 15 - 0.5s); } .g-item:nth-child(17) { -webkit-animation-delay: calc(var(--f) * 16), calc(var(--f) * 16 - 0.5s); animation-delay: calc(var(--f) * 16), calc(var(--f) * 16 - 0.5s); } .g-item:nth-child(18) { -webkit-animation-delay: calc(var(--f) * 17), calc(var(--f) * 17 - 0.5s); animation-delay: calc(var(--f) * 17), calc(var(--f) * 17 - 0.5s); } .g-item:nth-child(19) { -webkit-animation-delay: calc(var(--f) * 18), calc(var(--f) * 18 - 0.5s); animation-delay: calc(var(--f) * 18), calc(var(--f) * 18 - 0.5s); } .g-item:nth-child(20) { -webkit-animation-delay: calc(var(--f) * 19), calc(var(--f) * 19 - 0.5s); animation-delay: calc(var(--f) * 19), calc(var(--f) * 19 - 0.5s); } .g-item:nth-child(21) { -webkit-animation-delay: calc(var(--f) * 20), calc(var(--f) * 20 - 0.5s); animation-delay: calc(var(--f) * 20), calc(var(--f) * 20 - 0.5s); } .g-item:nth-child(22) { -webkit-animation-delay: calc(var(--f) * 21), calc(var(--f) * 21 - 0.5s); animation-delay: calc(var(--f) * 21), calc(var(--f) * 21 - 0.5s); } .g-item:nth-child(23) { -webkit-animation-delay: calc(var(--f) * 22), calc(var(--f) * 22 - 0.5s); animation-delay: calc(var(--f) * 22), calc(var(--f) * 22 - 0.5s); } .g-item:nth-child(24) { -webkit-animation-delay: calc(var(--f) * 23), calc(var(--f) * 23 - 0.5s); animation-delay: calc(var(--f) * 23), calc(var(--f) * 23 - 0.5s); } .g-item:nth-child(25) { -webkit-animation-delay: calc(var(--f) * 24), calc(var(--f) * 24 - 0.5s); animation-delay: calc(var(--f) * 24), calc(var(--f) * 24 - 0.5s); } .g-item:nth-child(26) { -webkit-animation-delay: calc(var(--f) * 25), calc(var(--f) * 25 - 0.5s); animation-delay: calc(var(--f) * 25), calc(var(--f) * 25 - 0.5s); } .g-item:nth-child(27) { -webkit-animation-delay: calc(var(--f) * 26), calc(var(--f) * 26 - 0.5s); animation-delay: calc(var(--f) * 26), calc(var(--f) * 26 - 0.5s); } .g-item:nth-child(28) { -webkit-animation-delay: calc(var(--f) * 27), calc(var(--f) * 27 - 0.5s); animation-delay: calc(var(--f) * 27), calc(var(--f) * 27 - 0.5s); } .g-item:nth-child(29) { -webkit-animation-delay: calc(var(--f) * 28), calc(var(--f) * 28 - 0.5s); animation-delay: calc(var(--f) * 28), calc(var(--f) * 28 - 0.5s); } .g-item:nth-child(30) { -webkit-animation-delay: calc(var(--f) * 29), calc(var(--f) * 29 - 0.5s); animation-delay: calc(var(--f) * 29), calc(var(--f) * 29 - 0.5s); } @-webkit-keyframes heightChange { from { height: var(--h); } to { height: calc(var(--h) + 30px); } } @keyframes heightChange { from { height: var(--h); } to { height: calc(var(--h) + 30px); } } @-webkit-keyframes skewChange { from { transform: translate3d(0, 10px, 0) skewY(calc(var(--angle) * 1)); } to { transform: translate3d(0, 10px, 0) skewY(calc(var(--angle) * -1)); } } @keyframes skewChange { from { transform: translate3d(0, 10px, 0) skewY(calc(var(--angle) * 1)); } to { transform: translate3d(0, 10px, 0) skewY(calc(var(--angle) * -1)); } } </style> <script> window.console = window.console || function (t) { }; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="g-container g-container-h1"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="g-container g-container-h2"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="g-container g-container-h3"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="g-container g-container-h4"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;"> <div></div> <a id="xl_chrome_ext_download" href="javascript:;">下载视频</a> <a id="xl_chrome_ext_close" href="javascript:;"></a> </div> </body> </html>
通过以上内容我们知道了css如何实现类似百事可乐图标Logo的动画效果?感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!