争怎路由网/网站教程/内容

css如何完成水纹扩散的动画效果(纯代码)

网站教程2024-03-13 阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于css如何实现水纹扩散的动画效果(纯代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

<div class="main clearfix">
   <!--3*70=210 2*50=100 310-->
   <div class="circle">
      <!--<div class="box"></div>-->
      <div class="box-a"></div>
      <div class="box-b"></div>
      <div class="box-c"></div>
      <div class="box-icon icon-a icon-a-1"></div>
   </div>
   <!--hr正常灰色 hr-x出错  hr-r正确-->
   <div class="hr hr-x"></div>

   <div class="circle">
      <!--<div class="box"></div>-->
      <div class="box-a"></div>
      <div class="box-b"></div>
      <div class="box-c"></div>
      <div class="box-icon icon-b icon-b-2"></div>

   </div>
   <div class="hr hr-r"></div>

   <div class="circle">
      <!--<div class="box"></div>-->
      <div class="box-a"></div>
      <div class="box-b"></div>
      <div class="box-c"></div>
      <div class="box-icon icon-c icon-c-3"></div>
   </div>
</div>

css:

.main{
    position: relative;
    height:70px;
    width: 310px;
    margin: 0 auto;
    background-color: #f34147;
}
.circle{
    position: relative;
    float: left;
    height:70px;
    width: 70px;


}
/*线*/
.hr{
    position: relative;
    float: left;
    width: 50px;
    height:70px;
    background: url("../images/hr_1.png") no-repeat center center;
    background-size: auto 18px;

}
.hr-x{
    background: url("../images/hr_2.png") no-repeat center center;
    background-size: auto 18px;
}
.hr-r{
    background: url("../images/hr_3.png") no-repeat center center;
    background-size: auto 18px;
}

/*按钮  大:47 小:39*/
.box-icon{
    position: absolute;
    z-index: 9999;
    top:0;
    right:0;
    left:0;;
    bottom: 0;
    width: 70px;
    height: 70px;
}
/*小 不亮*/
.icon-a{
    background: url("../images/icon_a_3.png") no-repeat center center;
    background-size:39px 39px;
}
.icon-b{
    background: url("../images/icon_b_3.png") no-repeat center center;
    background-size:39px 39px;
}
.icon-c{
    background: url("../images/icon_c_3.png") no-repeat center center;
    background-size:39px 39px;
}
/*小 亮*/
.icon-a-1{
    background: url("../images/icon_a_2.png") no-repeat center center;
    background-size:39px 39px;
}
.icon-b-1{
    background: url("../images/icon_b_2.png") no-repeat center center;
    background-size:39px 39px;
}
.icon-c-1{
    background: url("../images/icon_c_2.png") no-repeat center center;
    background-size:39px 39px;
}


/*大 亮*/
.icon-a-2{
    background: url("../images/icon_a_1.png") no-repeat center center;
    background-size:47px 47px;
}
.icon-b-2{
    background: url("../images/icon_b_1.png") no-repeat center center;
    background-size:47px 47px;
}
.icon-c-2{
    background: url("../images/icon_c_1.png") no-repeat center center;
    background-size:47px 47px;
}


/*动效*/
@keyframes warn {
     0% {
        transform: scale(0.6);
        opacity: 0;
    }
    25% {
        transform: scale(0.6);
        opacity: 0.8;
    }
    /*50% {*/
        /*transform: scale(0.8);*/
        /*opacity: 0.4;*/
    /*}*/
    /*75% {*/
        /*transform: scale(0.9);*/
        /*opacity: 0.3;*/
    /*}*/
    100% {
        transform: scale(1);
        opacity: 0.1;
    }
}
@-webkit-keyframes warn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    25% {
        -webkit-transform: scale(0.6);
        opacity: 0.8;
    }
    /*50% {*/
        /*-webkit-transform: scale(0.1);*/
        /*opacity: 0.3;*/
    /*}*/
    /*75% {*/
        /*-webkit-transform: scale(0.5);*/
        /*opacity: 0.5;*/
    /*}*/
    100% {
        -webkit-transform: scale(1);
        opacity: 0.1;
    }
}
/* 70*70的容器*/
.box{
    position: absolute;
    width: 70px;
    height: 70px;
    border: 6px solid rgba(225,225,225,0.5);
    -webkit-border-radius:70px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn  4s ease-out infinite;
    -moz-animation: warn  4s ease-out infinite;
    animation: warn  4s ease-out infinite;
}
.box-a{
    position: absolute;
    width: 70px;
    height: 70px;
    border: 6px solid rgba(225,225,225,0.5);
    -webkit-border-radius:70px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn  4s ease-out infinite;
    -moz-animation: warn  4s ease-out infinite;
    animation: warn  4s ease-out infinite;
    animation-delay:1s;
    -webkit-animation-delay:1s; /* Safari 和 Chrome */


}
.box-b{
    position: absolute;
    width: 70px;
    height: 70px;
    border: 6px solid rgba(225,225,225,0.5);
    -webkit-border-radius:70px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn  4s ease-out infinite;
    -moz-animation: warn  4s ease-out infinite;
    animation: warn  4s ease-out infinite;
    animation-delay:2s;
    -webkit-animation-delay:2s; /* Safari 和 Chrome */

}
.box-c{
    position: absolute;
    width: 70px;
    height: 70px;
    border: 6px solid rgba(225,225,225,0.5);
    -webkit-border-radius:70px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn  4s ease-out infinite;
    -moz-animation: warn  4s ease-out infinite;
    animation: warn  4s ease-out infinite;
    animation-delay:3s;
    -webkit-animation-delay:3s; /* Safari 和 Chrome */
    
}

相关推荐:

CSS3如何实现全景图的动画效果(附代码)

如何使用纯CSS3实现图片轮播的效果

以上就是css如何实现水纹扩散的动画效果(纯代码)的详细内容,更多请关注php中文网其它相关文章!

  • 微信

  • 网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



    ……

    标签:css如何完成水纹扩散的动画效果(纯代码)
    相关阅读