CSS3一直上下动效 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4 <meta charset="UTF-8">
 5 <title>CSS3一直上下动效</title>
 6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
 8 <!-- IE兼容 -->
 9 <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
10 <style type="text/css">
11 @-webkit-keyframes bounce-down {
12 25% {
13 -webkit-transform: translateY(-3px);
14 }
15 50%, 100% {
16 -webkit-transform: translateY(0);
17 }
18 75% {
19 -webkit-transform: translateY(3px);
20 }
21 }
22 @keyframes bounce-down {
23 25% {
24 transform: translateY(-3px);
25 }
26 50%, 100% {
27 transform: translateY(0);
28 }
29 75% {
30 transform: translateY(3px);
31 }
32 }
33 .animate-bounce-down{
34 -webkit-animation: bounce-down 1.3s linear infinite;
35 animation: bounce-down 1.3s linear infinite;
36 }
37 
38 </style>
39 </head>
40 
41 <body>
42 <div class="animate-bounce-down">
43 <span>上下动</span>
44 </div>
45 </body>
46 </html>

 第二个例子是网页中常用的向下的标识箭头,由小变大,由无变有的浮动效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>由小变大由有变无</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <!-- Bootstrap  -->

    <style type="text/css">
        .s-xguide-down{
   width:70px;
    height:70px;
    display:inline-block;
    position:fixed;
    bottom:80px;
    left:50%;
    opacity:.7;
    cursor:pointer
}
@keyframes xguide_down{
    0%,100%{
        transform:scale(0.0);
        -moz-transform:scale(0.0);
        -o-transform:scale(0.0);
        -webkit-transform:scale(0.0);
        -ms-transform:scale(0.0);
        opacity:0
    }
    50%{
        transform:scale(1.0);
        -moz-transform:scale(1.0);
        -o-transform:scale(1.0);
        -webkit-transform:scale(1.0);
        -ms-transform:scale(1.0);
        opacity:1
    }
 
}
@-webkit-keyframes xguide_down{
    0%,100%{
        -webkit-transform:scale(0.0);
        -moz-transform:scale(0.0);
        -o-transform:scale(0.0);
        -ms-transform:scale(0.0);
        transform:scale(0.0);
        opacity:0
    }
    50%{
        -webkit-transform:scale(1.0);
        -moz-transform:scale(1.0);
        -o-transform:scale(1.0);
        -ms-transform:scale(1.0);
        transform:scale(1.0);
        opacity:1
    }
 
}
@-moz-keyframes xguide_down{
    0%,100%{
        -moz-transform:scale(0.0);
        -o-transform:scale(0.0);
        -webkit-transform:scale(0.0);
        -ms-transform:scale(0.0);
        transform:scale(0.0);
        opacity:0
    }
    50%{
        -moz-transform:scale(1.0);
        -o-transform:scale(1.0);
        -webkit-transform:scale(1.0);
        -ms-transform:scale(1.0);
        transform:scale(1.0);
        opacity:1
    }
 
}
@-o-keyframes xguide_down{
    0%,100%{
        -o-transform:scale(0.0);
        -moz-transform:scale(0.0);
        -webkit-transform:scale(0.0);
        -ms-transform:scale(0.0);
        transform:scale(0.0);
        opacity:0
    }
    50%{
        -o-transform:scale(1.0);
        -moz-transform:scale(1.0);
        -webkit-transform:scale(1.0);
        -ms-transform:scale(1.0);
        transform:scale(1.0);
        opacity:1
    }
 
}
.s-xguide-down.trans{
    -webkit-animation:xguide_down 4.0s infinite ease-in-out;
    -moz-animation:xguide_down 4.0s infinite ease-in-out;
    -o-animation:xguide_down 4.0s infinite ease-in-out;
    animation:xguide_down 4.0s infinite ease-in-out
}
.s-xguide-down.arrow-1{
    animation-delay:-2.0s;
    -webkit-animation-delay:-2.0s;
    -moz-animation-delay:-2.0s;
    -o-animation-delay:-2.0s
}
    </style>
</head>

<body>
  <div class="middle-header " >
    
            <p class="s-xguide-down trans">
               <a href="#">
                    <span >
                        可放箭头                                             
                    </span>
                </a>
            </p>
  </div>                             
</body>
</html>

 第三种箭头持续往下移动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>由小变大由有变无</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <!-- Bootstrap  -->

    <style type="text/css">
        .middle-header{
            width: 200px;
            height: 300px;
            margin: 20px auto;
            background-color: #66512C;
        }
        .middle-header p{
            text-align: center;
        }
        a:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
    left: 50%;
    top: 100px; 
    -webkit-transform: rotate(45deg) translate(-50%, 0);
    transform: rotate(45deg) translate(-50%, 0);
    -webkit-animation: arrowGo 5s infinite steps(10, end);
    animation: arrowGo 5s infinite steps(10, end)
}
@-webkit-keyframes arrowGo {
    0%{
        opacity: 0.5; 
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(45deg) translate(-50%, 0)
    }
    100%{
        opacity: 1;
        -webkit-transform-origin:center center;
        -webkit-transform: rotate(45deg) translate(-50%, 0) scale(2);
        top: 280px
    }
}
@keyframes arrowGo {
    0% {
        opacity: 0.5;
        transform-origin: center center;
        transform: rotate(45deg) translate(-50%, 0)
    }
    100% {
        opacity: 1;
        transform-origin: center center;
        transform: rotate(45deg) translate(-50%, 0) scale(2);
        top: 280px;
    }
}
    </style>
</head>

<body>
  <div class="middle-header" >
            <p>
               <a href="#">  
                   这里的文字                                             
                </a>
            </p>
  </div>                             
</body>
</html>

 第四种样式:三个箭头逐渐出现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>三个箭头逐渐出现</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <!-- Bootstrap  -->

    <style type="text/css">
       #section{
          width: 300px;
          height: 300px;
           margin: 20px auto;
           position: relative;
           background-color: #66512C;

        }
        #section::after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 80%;
        }
        #section h2{
            font-size: 20px;
            text-align: center;
            margin-bottom: 100px;
        }
        .middle-header  p{
            text-align: center;
            position: relative;
        }
        #section a {
            position: absolute;
            top: 20px;
            left: 41%;
            z-index: 2;
            display: inline-block;
            -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
            color: #fff;
            font: normal 400 20px/1 'Josefin Sans', sans-serif;
            letter-spacing: .1em;
            text-decoration: none;
            transition: opacity .3s;
            padding-top: 80px;
        }
        #section a span {
            position: absolute;
            top: 0;
            left: 50%;
            width: 24px;
            height: 24px;
            margin-left: -12px;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-animation: sdb07 2s infinite;
            animation: sdb07 2s infinite;
            opacity: 0;
            box-sizing: border-box;
        }
        #section a span:nth-of-type(1) {
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
        }
        #section a span:nth-of-type(2) {
            top: 16px;
            -webkit-animation-delay: .15s;
            animation-delay: .15s;
        }
        #section a span:nth-of-type(3) {
            top: 32px;
            -webkit-animation-delay: .3s;
            animation-delay: .3s;
        }
        @-webkit-keyframes sdb07 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes sdb07 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
</head>

<body>
  <div class="middle-header" id="section">
      <h2>Scroll Down Button</h2>
      <p>
          <a><span></span><span></span><span></span>Scroll</a>
      </p>
     
  </div>                             
</body>
</html>

 第五种:像个扣子在动

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>点在动出现</title>
  6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7     <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
  8     <!-- IE兼容 -->
  9     <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
 10     <meta http-equiv="X-UA-Compatible" content="IE=9"/>
 11     <!-- Bootstrap  -->
 12 
 13     <style type="text/css">
 14        .section{
 15           width: 300px;
 16           height: 300px;
 17            margin: 20px auto;
 18            position: relative;
 19            background-color: #66512C;
 20 
 21         }
 22         .section::after {
 23             position: absolute;
 24             bottom: 0;
 25             left: 0;
 26             content: '';
 27             width: 100%;
 28             height: 80%;
 29         }
 30         .section h1{
 31             font-size: 20px;
 32             text-align: center;
 33             padding: 10px;
 34             margin-bottom: 100px;
 35             color: #fff;
 36         }
 37         .section p{
 38             text-align: center;
 39             position: relative;
 40             height: 300px;
 41             overflow: hidden;
 42             margin-top: 120px;
 43         }
 44         #section10 a {
 45             padding-top: 83px;
 46             display: block;
 47         }
 48         #section10 a span {
 49             position: absolute;
 50             top: 0;
 51             left: 50%;
 52             width: 30px;
 53             height: 50px;
 54             margin-left: -15px;
 55             border: 2px solid #fff;
 56             border-radius: 50px;
 57             box-sizing: border-box;
 58         }
 59         #section10 a span::before {
 60             position: absolute;
 61             top: 10px;
 62             left: 50%;
 63             content: '';
 64             width: 6px;
 65             height: 6px;
 66             margin-left: -3px;
 67             background-color: #fff;
 68             border-radius: 100%;
 69             -webkit-animation: sdb10 2s infinite;
 70             animation: sdb10 2s infinite;
 71             box-sizing: border-box;
 72         }
 73         @-webkit-keyframes sdb10 {
 74             0% {
 75                 -webkit-transform: translate(0, 0);
 76                 opacity: 0;
 77             }
 78             40% {
 79                 opacity: 1;
 80             }
 81             80% {
 82                 -webkit-transform: translate(0, 20px);
 83                 opacity: 0;
 84             }
 85             100% {
 86                 opacity: 0;
 87             }
 88         }
 89         @keyframes sdb10 {
 90             0% {
 91                 transform: translate(0, 0);
 92                 opacity: 0;
 93             }
 94             40% {
 95                 opacity: 1;
 96             }
 97             80% {
 98                 transform: translate(0, 20px);
 99                 opacity: 0;
100             }
101             100% {
102                 opacity: 0;
103             }
104         }
105     </style>
106 </head>
107 
108 <body>
109   <div class="middle-header" id="section">
110       <section id="section10" class="demo section">
111     <h1>Scroll Down Button #10</h1>
112     <p>
113         <a href="#thanks"><span></span>Scroll</a>
114     </p>
115     
116 </section>
117   </div>                             
118 </body>
119 </html>
View Code

 

 

 

 

posted @ 2018-05-02 17:04  摩姆苏  阅读(274)  评论(0)    收藏  举报