用css3 Animation实现轮播图效果

用css3 transform实现轮播图效果


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

@keyframes定义关键帧


<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>

图片
用css3 Animation实现轮播图效果_第1张图片

你可能感兴趣的:(web学习,css,css3,html)