问题描述:
利用CSS过渡-Transitions(制作动态效果) 让小兔子走起来
动态效果图:
当鼠标放到这兔子边上就会自动走
代码实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>rabbit</title> <style> .box1{ width: 100px; height: 200px; background-image: url(../images/rabbit.png); margin:0 auto; background-position: 0 0; transition: 0.5s steps(3); } .box1:hover{ background-position: -300px 0; } </style> </head> <body> <div class="box1"></div> </body> </html>
html+css布局实例:CSS过渡-Transitions(制作动态效果) 让小兔子走起来
于 2022-03-23 12:06:57 首次发布