<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*p的关键帧动画*/ p { font-size: 35px; align-content: center; animation: light 3s linear infinite; } @keyframes light { 0% { text-shadow: 0 0 0 #fff; } 25% { text-shadow: 0 0 10px red; } 50% { text-shadow: 0 0 30px blue; } 75% { text-shadow: 0 0 10px red; } 100% { text-shadow: 0 0 0 #fff ; } } /*box的关键帧动画*/ .box { width: 200px; height: 200px; background: blue; animation: run 2s ease infinite; animation-fill-mode: forwards; } @keyframes run { 0% { width: 200px; } 25% { width: 300px; } 50% { width: 500px; } 100% { width: 300px; opacity: 0.3; } } /*shan的关键帧动画*/ .shan{ width: 100%; height: 20px; background: blue; animation: shan 2s ease infinite; } @keyframes shan { 0%{ background: yellow; } 50%{ background: green; } 100%{ background: yellow; } } </style> </head> <body> <div class="box"></div> <p>kaljfal</p> <div class="shan"></div> </body> </html>
css动画之关键帧动画
最新推荐文章于 2024-05-13 14:34:46 发布