この記事では主に CSS3 の効果を紹介します。「W」の形の走行軌跡は CSS を通じて実現できます。必要な友人は参考にしてください。
ドキュメントを整理し、CSS3 効果 (「W」の字型の走行軌跡の例のコード) を探して整理し、共有するために少し合理化します。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; } #p{ width:900px; height:400px; border:2px solid black; margin: 100px auto; } #span{ float:left; display: block; font-size: 100px; width: 100px; height: 100px; line-height: 80px; text-align: center; border-radius: 50%; background: radial-gradient(blue,green); animation: move 4s ease 0s infinite alternate; } @keyframes move { 0%{ transform: translate(0px,0px); } 25%{ transform: translate(200px,300px); } 50%{ transform: translate(400px,0px); } 75%{ transform: translate(600px,300px); } 100%{ transform: translate(800px,0px); } } </style> </head> <body> <p id="p"> <span id="span">w</span> </p> </body> </html>
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
以上がCSS3 でカスタムの「W」字型のランニング軌道を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。