animation動畫--跳動
阿新 • • 發佈：2018-12-07
給大家分享一個小案例，讓靜態的一行字與一個球變為動態跳動
第一個文字動畫
<title></title> <style> .box{ width: 600px; height: 150px; margin: auto; margin-top: 300px; background-color: deepskyblue; } .box p{ display: inline-block; font-size: 50px; text-align: center; margin-left: 20px; animation: dong 2s infinite; /*設定動畫效果，dong與後面的動畫設定相連線 完整運動時間為兩秒，一直迴圈*/ } /*選擇第二個p標籤*/ .box p:nth-of-type(2){ animation-delay: 0.5s; } .box p:nth-of-type(3){ animation-delay: 0.75s; } .box p:nth-of-type(4){ animation-delay: 1s; }.box p:nth-of-type(5){ animation-delay: 1.25s; } .box p:nth-of-type(6){ animation-delay: 1.5s; } .box p:nth-of-type(7){ animation-delay: 1.75s; } .box p:nth-of-type(8){ animation-delay: 2s; } /*動畫設定*/ @keyframes dong{ 0%{} 50%{transform: translateY(-50px)} 100%{} } </style> </head> <body> <div> <div class="box"> <p>正</p> <p>在</p> <p>加</p> <p>載</p> <p>中</p> <p>.</p> <p>.</p> <p>.</p> </div> </div> </body>
第二個小球跳動動畫
<title></title> <style> .div{ margin: 0 auto; width: 800px; height: 700px; margin-top: 100px; } .box1{ width: 80px; height: 80px; border-radius: 50%; background-image: linear-gradient(blue,black);/*給小球新增一個顏色漸變*/ margin-top: 500px; margin-left: 400px; animation:dong 2s infinite; } .box2{ width: 80px; height: 10px; border-radius: 50%; background-color: cadetblue; margin-left: 400px; } @keyframes dong{ 0%{} 50%{ transform: translateY(-300px);} 100%{} } </style> </head> <body> <div class="div"> <div class="box1"></div> <div class="box2"></div> </div> </body>
