学做网站培训课程介绍

当前位置:

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>

 

发表评论

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

相关教程

  • 通过CSS样式可以控制网页中各个元素的显示方式,通过CSS样式可以在网页中画出一个三角形,圆形等形状。(了解更多CSS知识,请学习CSS视频教程)CSS
  • 什么是自适应网页随着网站浏览设备屏幕大小不同(包括PC,IPAD,手机等浏览设备),为了适应不同的屏幕,做网站制作时可以自动根据浏览网站的屏幕尺
  • 网页如何添加视频动画 视频教程 (1107243 次浏览)
    在网站制作过程中,特别是学习视频网站制作教程时,是需要给网站中添加很多的视频的,对于网站如何添加视频有二种方法:一种是添加自己网站的视频,另
  • 这是自己学习了仿站课程,自己仿张老师做的超漂亮电器售后企业站(U型动画),特别适合电器售后服务类网站使用,这个电器售后企业站最大的难点就是用了
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • 分享一款超漂亮的内衣模板,适合内衣销售衣服类物品,化妆品展示都可以。自己做的二次开发,使用很简单,直接在WP程序后台安装就可以了。喜欢的同学可
  • 随着CSS3的功能越来越强大,很多做网站的站长都使用css3做网站动画。下面是一个通过CSS3水滴动画特效,很好看。可以直接拿去用于网页制作。效果如
  • 我们在制作一些图片网站,由于图片比较多的情况,可以使用先让用户看到一些图片的缩略图,然后通过光标移动到小图后,显示大图的效果,就叫做图片相册
  • canvas是html5中比较重要的一个标签,canvas的实现需要借助原生态的js特效代码才能很好的展示出来。今天学做网站论坛就给大家讲一讲如何使用html5中ca
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 学做网站时,经常要修改代码,很多时候需要用到颜色代码,由于太多,不可能都记住,所以找到了一个带有中文颜色名称表示的颜色代码表,以便后期网页设