2. it技术
  3. 用css3 Animation实现轮播图效果

用css3 Animation实现轮播图效果

it2023-08-14  66

用css3 transform实现轮播图效果

css3提供了 Animation动画支持， Animation动画允许开发者定义多个关键帧，浏览器会负责计算、插入关键帧之间的虚拟动画帧。

@keyframes定义关键帧

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .slide { width: 100%; height: 450px; overflow: hidden; } .img02 { margin-top: -5px; border: 0; width: 100%; height: 400px; background: url(img/pj.jpg)no-repeat; background-size: 100% 800px; animation:runAnimation 5s steps(2) infinite; } @keyframes runAnimation { from{background-position: 0px 0px;} to{background-position: 0px -800px;} } </style> </head> <body> <div class="slide"> <div class="img02"> </div> </div> </body> </html>

图片

最新回复(0)