純css製作彩色圓環彈跳效果
阿新 • • 發佈：2019-02-20
這個效果是由185行純css程式碼製作，佈局相對簡單，有正在學習前端基礎的小夥伴可以用來練習一下，現在越來越多的企業重視起基礎知識了，所以有要找工作的小夥伴和正在找工作的小夥伴記得多練習基礎的知識，把基礎練紮實哦。
文章分享之前小編推薦一下我的前端學習群：575308719，裡面都是學習前端的，如果你想製作酷炫的特效，想學習前端知識，小編歡迎你的加入。小編會在群中不定期分享乾貨原始碼，包括我精心整理的一份前端教程。歡迎各位感興趣的的小夥伴。
html程式碼：
<div class='contain'> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> <svg height='80' width='210'> <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse> </svg> </div>
css程式碼：
<style> .contain { position: relative; margin: 155px auto; width: 200px; } svg { position: absolute; } svg ellipse { -webkit-transform-origin: center; transform-origin: center; } svg:nth-of-type(1) ellipse { stroke: #F1725D; cx: 25px; stroke-width: 3px; -webkit-animation: jump 600ms infinite ease-in-out; animation: jump 600ms infinite ease-in-out; opacity: .7; -webkit-animation-delay: 0ms; animation-delay: 0ms; } svg:nth-of-type(2) ellipse { stroke: #38BDAB; cx: 65px; stroke-width: 3px; -webkit-animation: jump 600ms infinite ease-in-out; animation: jump 600ms infinite ease-in-out; opacity: .7; -webkit-animation-delay: 75ms; animation-delay: 75ms; } svg:nth-of-type(3) ellipse { stroke: #9D30A5; cx: 105px; stroke-width: 3px; -webkit-animation: jump 600ms infinite ease-in-out; animation: jump 600ms infinite ease-in-out; opacity: .7; -webkit-animation-delay: 150ms; animation-delay: 150ms; } svg:nth-of-type(4) ellipse { stroke: #B779E2; cx: 145px; stroke-width: 3px; -webkit-animation: jump 600ms infinite ease-in-out; animation: jump 600ms infinite ease-in-out; opacity: .7; -webkit-animation-delay: 225ms; animation-delay: 225ms; } svg:nth-of-type(5) ellipse { stroke: #683893; cx: 185px; stroke-width: 3px; -webkit-animation: jump 600ms infinite ease-in-out; animation: jump 600ms infinite ease-in-out; opacity: .7; -webkit-animation-delay: 300ms; animation-delay: 300ms; } svg:nth-of-type(6) ellipse { fill: #333333; opacity: .05; rx: 0; ry: 0; cx: 25px; cy: 48px; -webkit-animation: shadow 600ms infinite ease-in-out; animation: shadow 600ms infinite ease-in-out; -webkit-animation-delay: 0ms; animation-delay: 0ms; } svg:nth-of-type(7) ellipse { fill: #333333; opacity: .05; rx: 0; ry: 0; cx: 65px; cy: 48px; -webkit-animation: shadow 600ms infinite ease-in-out; animation: shadow 600ms infinite ease-in-out; -webkit-animation-delay: 75ms; animation-delay: 75ms; } svg:nth-of-type(8) ellipse { fill: #333333; opacity: .05; rx: 0; ry: 0; cx: 105px; cy: 48px; -webkit-animation: shadow 600ms infinite ease-in-out; animation: shadow 600ms infinite ease-in-out; -webkit-animation-delay: 150ms; animation-delay: 150ms; } svg:nth-of-type(9) ellipse { fill: #333333; opacity: .05; rx: 0; ry: 0; cx: 145px; cy: 48px; -webkit-animation: shadow 600ms infinite ease-in-out; animation: shadow 600ms infinite ease-in-out; -webkit-animation-delay: 225ms; animation-delay: 225ms; } svg:nth-of-type(10) ellipse { fill: #333333; opacity: .05; rx: 0; ry: 0; cx: 185px; cy: 48px; -webkit-animation: shadow 600ms infinite ease-in-out; animation: shadow 600ms infinite ease-in-out; -webkit-animation-delay: 300ms; animation-delay: 300ms; } @-webkit-keyframes jump { 40% { -webkit-transform: translateY(20px) scale(1.3); transform: translateY(20px) scale(1.3); opacity: .9; } 40% { rx: 10px; ry: 10px; stroke-width: 3px; } 45% { rx: 15px; ry: 7px; stroke-width: 4px; } 55% { rx: 10px; ry: 10px; } } @keyframes jump { 40% { -webkit-transform: translateY(20px) scale(1.3); transform: translateY(20px) scale(1.3); opacity: .9; } 40% { rx: 10px; ry: 10px; stroke-width: 3px; } 45% { rx: 15px; ry: 7px; stroke-width: 4px; } 55% { rx: 10px; ry: 10px; } } @-webkit-keyframes shadow { 45% { opacity: .15; rx: 10px; ry: 3px; -webkit-transform: translateY(5px) scale(1.3); transform: translateY(5px) scale(1.3); } } @keyframes shadow { 45% { opacity: .15; rx: 10px; ry: 3px; -webkit-transform: translateY(5px) scale(1.3); transform: translateY(5px) scale(1.3); } } </style>