<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* box的补间动画*/ .box{ width: 300px; height: 200px; background-color: pink; transition: all 2s ease; margin: 200px auto; } .box:hover{ width: 500px; transform: rotate(45deg); } /*box2的补间动画*/ .box2{ width: 200px; height:200px; text-align: center; line-height: 200px; background: blue; color: #fff; margin: 10px auto; font-size: 30px; transition: all 2s ease; } span{ display: inline-block; } .box2:hover{ background: #fff; border: 1px solid blue; color: blue; transform: rotate(45deg); } .box2:hover span{ font-size: 35px; transform: rotate(-45deg); } </style> </head> <body> </body> <div class="box"></div> <div class="box2"> <span>AA</span> </div> </html>
css动画之补间动画
最新推荐文章于 2024-03-31 11:49:36 发布