|
|
|
2024.08.14
カテゴリ：css
 border-radiusを使います。 <!DOCTYPE html> <head> <title>色紙が変形</title> <style> #name{ font-size: 20px; color: rgb(255, 0, 13); } .paper0{ position: absolute; top: -100%; left: 0; width: 200px; height: 300px; left: 0%; background: rgb(55, 0, 255); animation-duration: 3s; animation-delay: 0s; animation: paper0 3s 0s linear infinite; } @keyframes paper0 { 0% { background: rgb(43, 226, 119); top: 0%; transform: translateX(0) rotateX(0) rotateY(0); } 30% { border-radius:30% 30% 50% 70%; background: rgb(70, 43, 226); top: 10%; transform: translateX(200px) rotateX(0) rotateY(0); } 50% { border-radius:50% 30% 50% 70%; background: rgb(226, 43, 67); top: 20%; transform: translateX(0px) rotateX(0) rotateY(0); } 80% { border-radius:80% 30% 50% 70%; background: rgb(70, 43, 226); top: 30%; transform: translateX(200px) rotateX(0) rotateY(0); } 100% { border-radius:100% 30% 50% 70%; background: rgb(226, 43, 58); top: 40%; transform: translateX(0) rotateX(0) rotateY(0); } } </style> </head> <body> <p id="name">変形/変色</p> <div class="paper0"> </div> </body> </html> お気に入りの記事を「いいね！」で応援しよう
最終更新日
2024.08.14 09:04:04
コメント(0) | コメントを書く
[css] カテゴリの最新記事
|
|
