零基础建站培训教程介绍

当前位置:

css3动画:分享css3水滴动画特效代码

随着CSS3的功能越来越强大,很多做网站的站长都使用css3做网站动画。下面是一个通过CSS3水滴动画特效,很好看。可以直接拿去用于网页制作。

效果如下:

css3动画:分享css3水滴动画特效代码

代码如下:

  1. 在网页的head部分引入以下的css文件;
    
    
    <style>
    body {
      background-color: #3498DB;
      overflow: hidden;
    }
     
    div {
      margin: 175px auto;
    }
     
    .drop {
      position: relative;
        width: 20px;
        height: 20px;
      top: -30px;
      margin: 0 auto;
        background: #FFF;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
      -moz-animation-name: drip;
      -webkit-animation-name: drip;
      animation-name: drip;
      -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
      -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
      animation-timing-function: cubic-bezier(1,0,.91,.19);
      -moz-animation-duration: 2s;
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }
     
    .drop:before {
      content: "";
      position: absolute;
      width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 30px solid rgba(255,255,255,1);
      top: -22px;
    }
     
    .wave {
      position: relative;
      opacity: 0;
      top: 0;
        width: 2px;
        height: 1px;
      border: #FFF 7px solid;
        -moz-border-radius: 300px / 150px;
        -webkit-border-radius: 300px / 150px;
        border-radius: 300px / 150px;
      -moz-animation-name: ripple;
      -webkit-animation-name: ripple;
      animation-name: ripple;
      -moz-animation-delay: 2s;
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
      -moz-animation-duration: 2s;
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }
     
    .wave:after {
      content: "";
      position: absolute;
      opacity: 0;
      top: -5px;
      left: -5px;
        width: 2px;
        height: 1px;
      border: #FFF 5px solid;
        -moz-border-radius: 300px / 150px;
        -webkit-border-radius: 300px / 150px;
        border-radius: 300px / 150px;
      -moz-animation-name: ripple-2;
      -webkit-animation-name: ripple-2;
      animation-name: ripple-2;
      -moz-animation-duration: 2s;
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }
     
    @keyframes ripple {
        from {
          opacity: 1;
        }
        to {
          width: 600px;
          height: 300px;
          border-width: 1px;
          top: -100px;
          opacity: 0;
        }
    }
     
    @keyframes ripple-2 {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      100% {
        width: 200px;
        height: 100px;
        border-width: 1px;
        top: 100px;
        left: 200px;
      }
    }
     
    @keyframes drip {
        to {
          top: 190px;
        }
    }
    </style>
  2. 使用以下的HTML代码在网页上引入动画。
    
    
    <div class="drop"></div>
    <div class="wave"></div>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学做网站论坛零基础学建网站课程