只有波纹动画CSS的戒指 [英] Rings with ripple animation CSS ONLY

问题描述

问题

尝试获取特定动画，其中有两个环从图像上的形状涟漪/辐射。我不能找到确切的动画

Codepen Link

这是我到目前为止

这是我的想法它的粗糙的画，但它给你一个想法。我想要的环形波纹像在我的代码在叶圆周围，而不是整个圆周。

$ b

HTML

 < div id =tree-wrapper> 
< img class =tree< div>< img class =treetitle =source：imgur.comsrc =http://i.imgur.com/1dDCOyq.png alt =/> 
< div class =ripple>< / div> 
< div class =circle-top-leftunselectable =yesonselectstart =return false;> 
 
< div class =circle__wrapper> 
< div class =circle__content> 
< p class =para>< u>培训< / u>< br />个人，公司
< / p& 
< span>< / span> 
< / div> 
< / div> 
< / div> 
< / a> 
< div class =circle-top-rightunselectable =yesonselectstart =return false;> 
< div class =circle__wrapper> 
< div class =circle__content> 
< p class =para>< u>咨询< / u>< br />项目，组织
< / p& 
< span>< / span> 
< / div> 
< / div> 
< / div> 
< / a> 
< div class =circle-bot-rightunselectable =yesonselectstart =return false;> 
< a class href =http://veddma.net/our-services/accreditation> 
< div class =circle__wrapper> 
< div class =circle__content> 
< p class =para>< u>认证< / u>< br />专业管理架构师
< / p& 
< span>< / span> 
< / div> 
< / div> 
< / div> 
< / a> 
< div class =circle-bot-leftunselectable =yesonselectstart =return false;> 
< div class =circle__wrapper> 
< div class =circle__content> 
< p class =para>< u>工具< / u>< br / 
< / p> 
< span>< / span> 
< / div> 
< / div> 
< / div> 
< / a> 
< / div> 
  

CSS

  * {
 
 box-sizing：border-box; 
 
} 
 
 
＃tree-wrapper {
 position：relative; 
 width：668px; 
 height：551px 
 margin：0 auto; 
} 
 
＃tree-wrapper p $ 
 
 margin：0; 
 padding：0; 
} 
 
 .tree {
 
 display：block; 
 margin-left：auto; 
 margin-right：auto; 
 margin-bottom：50px; 
 margin-top：75px; 
} 
 
 .circle-top-left，
 .circle-top-right，
 .circle-bot-left，
 .circle-bot -right {
 
 cursor：default; 
 -webkit-touch-callout：none; 
 -webkit-user-select：none; 
 -khtml-user-select：none; 
 -moz-user-select：none; 
 -ms-user-select：none; 
 user-select：none; 
 overflow：hidden; 
 font-size：9px; 
 -webkit-backface-visibility：hidden; 
 position：absolute; 
 background：＃b20312; 
 width：58px; 
 height：58px; 
 border-radius：50％; 
 transition：all .5s ease-in-out; 
 margin：0; 
 text-align：center; 
 
} 
 
 .circle-top-left：hover，
 .circle-top-right：hover，
 .circle-bot-left： hover，
 .circle-bot-right：hover {
 width：200px; 
 height：200px; 
 padding：0.6em 2.5em; 
 color：transparent; 
} 
 
 
 
 .circle-top-left {
 
 top：23.9％; 
 left：11.2％; 
 
} 
 
 .circle-top-right {
 
 top：13％; 
 left：54.5％; 
 
} 
 
 
 
 .circle-bot-left {
 
 top：73.8％; 
 left：0; 
} 
 
 
 
 .circle-bot-right {
 
 top：53.5％; 
 left：91.2％; 
 
} 
 
 .circle-top-left：hover，
 .circle-top-right：hover，
 .circle-bot-left： hover，
 .circle-bot-right：hover {
 
 transform：translate（-60px，-60px）; 
} 
 
 .circle__wrapper {
 
 display：table; 
 width：100％; 
 height：100％; 
} 
 
 .title_subtitle_holder {
 
 display：block; 
 padding：30px 0 0; 
 position：relative; 
} 
 
 .circle__content {
 
 display：table-cell; 
 padding：1em; 
 vertical-align：middle; 
} 
 
 .para {
 
 line-height：25px; 
 display：none; 
 font-size：15px; 
颜色：白色
 text-align：center; 
 vertical-align：middle; 
} 
 
 .circle-top-right：hover .para，
 .circle-bot-right：hover .para，
 .circle-top-left： hover.para，
 .circle-bot-left：hover .para {
 display：block; 
} 
 
 .circle-top-right：hover span，
 .circle-bot-right：hover span，
 .circle-top-left：hover span ，
 .circle-bot-left：hover span {
 display：none; 
} 
 
 / * @ import url（http://fonts.googleapis.com/css?family=Norican）; * / 
 
 @ -webkit-关键帧rip 
 {
 / * 0％{
 box-shadow：0 0 0 0 transparent，
 0 0 0 0 transparent，
 0 0 0 0 transparent， 
 0 0 0 0 transparent; 
} * / 
 / * 5％{
 box-shadow：0 0 0 0＃45c2c5，
 0 0 0 0 rgba（255,255,255,0.5），
 0 0 0 0＃45c2c5，
 0 0 0 0 rgba（0,0,0,0.1）; 
} * / 
 50％{
 box-shadow：0 0 40px 100px rgba（178,3,18，0.5），
 0 0 10px 110px transparent，
 0 0 30px 120px rgba（178,3,18，0.5），
 0 0 5px 130px transparent; 
} 
 75％{
 box-shadow：0 0 40px 200px rgba（178,3,18，0.1）; 
} 
 100％{
 box-shadow：0 0 40px 250px transparent; 
} 
} 
 
 @ -moz-keyframes rip 
 {
 / * 0％{
 box-shadow：0 0 0 0透明，
 0 0 0 0透明，
 0 0 0 0透明，
 0 0 0 0透明; 
} * / 
 / * 5％{
 box-shadow：0 0 0 0＃b20312，
 0 0 0 0 rgba（255,255,255,0.5），
 0 0 0 0＃b20312，
 0 0 0 0 rgba（0,0,0,0.1）; 
} * / 
 / * 50％{
 box-shadow：0 0 40px 100px rgba（178,3,18，0.5），
 0 0 10px 110px transparent，
 0 0 30px 120px rgba（178,3,18，0.5），
 0 0 5px 130px transparent; 
} 
 75％{
 box-shadow：0 0 40px 250px rgba（178,3,18，0.5）; 
} 
 100％{
 box-shadow：0 0 40px 250px transparent; 
} * / 
} 
 @ -moz-keyframes rip-lg 
 {
 / * 0％{
 box-shadow：0 0 0 0透明，
 0 0 0 0透明，
 0 0 0 0透明，
 0 0 0 0透明; 
} 
 5％{
 box-shadow：0 0 0 0＃b20312，
 0 0 0 0 rgba（255,255,255,0.5），
 0 0 0 0 ＃b20312，
 0 0 0 0 rgba（0,0,0,0.1）; 
} * / 
 50％{
 box-shadow：0 0 240px 200px rgba（178,3,18，0.5），
 0 0 210px 210px transparent，
 
} 
 / * 75％{
 box-shadow：0 0 40px 250px rgba（178,3,18，0.1）; 
} 
 100％{
 box-shadow：0 0 40px 250px transparent; 
} * / 
} 
 
 
 .ripple {
 -webkit-transform：translateZ（0）; 
 -moz-transform：translateZ（0）; 
 transform：translateZ（0）; 
} 
 
 
 
 h1 {
 / * display：block; * / 
 / * font-size：50px; 
 font-family：'Norican'，cursive; * / 
 / * color：white; * / 
 / * background-image：radial-gradient（10px at 47px 50％，＃b20312 0％，＃b20312 50％，rgba（178,3,18，0）50px）; * / 
 / * background-color：＃45C2C5; * / 
 / * background-color：＃fa0 ; * / 
 / * border-radius：50％; * / 
 / * box-shadow：3px 5px 0 rgba（0,0,0,0.15）; * / 
 / * position：absolute; * / 
 / * margin：-20px 0 0 -20px; * / 
 / * text-shadow：0 2px 0＃8ed2d4,2px 3px 15px rgba（0,0,0， 0.5）; * / 
 
 / * transition：all 5s ease-in-out; * / 
} 
 html：hover h1 {
 / * transform：translateY （-200px）; * / 
} 
 .ripple，.ripple：before，.ripple：after {
 display：block; 
 border-radius：2px; 
 width：2px; 
 height：2px; 
 -webkit-animation：rip 4s infinite; 
 -moz-animation：rip 2s infinite; 
} 
 .ripple {
 position：absolute; 
 z-index：-1; 
 top：28％; 
 left：15％; 
} 
 
 .ripple：before，.ripple：after {
 content：''; 
 position：absolute; 
} 
 .ripple：before {-webkit-animation-delay：4s; -moz-animation-delay：2s;} 
 .ripple：after {-webkit-animation-delay :. 8s; -moz-animation-delay：.8s;} 
  

解决方案

p>您可以使用动画，而不是使用 box-shadow c $ c>：before 和：之后伪元素使用一个简单的 border 。

下面是快速示例;只需将鼠标悬停在圆圈上即可停止。 （请注意，它没有所有的前缀属性a -webkit - 等）

  .circle {height：100px; width：100px; border-radius：50％; background-color：red;位置：相对; top：100px; left：300px; -webkit-transition：height .25s ease，width .25s ease;过渡：高度.25s缓解，宽度.25s缓解; -webkit-transform：translate（-50％， -  50％）; transform：translate（-50％， -  50％）;}。circle：hover {height：150px; width：150px;}。circle：before，.circle：after {content：'';显示：block; position：absolute; top：0; right：0; bottom：0; left：0; border-radius：50％; border：1px solid red;}。circle：before {-webkit-animation：ripple 2s linear infinite; animation：ripple 2s linear infinite;}。circle：after {-webkit-animation：ripple 2s linear 1s infinite;动画：ripple 2s linear 1s infinite;}。circle：hover：before，.circle：hover：after {-webkit-animation：none; animation：none;} @  -  webkit-keyframes ripple {0％{-webkit-transform：scale（1）; } 75％{-webkit-transform：scale（1.75）; opacity：1;} 100％{-webkit-transform：scale（2）; opacity：0;}} @ keyframes ripple {0％{transform：scale（1）; } 75％{transform：scale（1.75）;不透明度：1;} 100％{transform：scale（2）; opacity：0;}}  

 < div class = circle>< / div>  

Problem

Trying to get a specific animation where there are two rings that ripple/radiate from a shape on an image. I cant quite find that exact animation

Codepen Link

This is what I have so far

This is what I have in mind Its a crude drawing but it gives you an idea. I want rings rippling same as in my codepen around the leaf circle, instead of the whole circle. it would stop the animation on hover and circle would expand with text inside.

Code

HTML

  <div id="tree-wrapper">
 <img class="tree" <div><img class="tree" title="source: imgur.com" src="http://i.imgur.com/1dDCOyq.png" alt="" />
    <div class="ripple"></div>
  <div class="circle-top-left" unselectable="yes" onselectstart="return false;">

      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Training</u><br />Personal, Corporate
          </p>  
          <span></span>
        </div>
      </div>
  </div>
 </a>
 <div class="circle-top-right" unselectable="yes" onselectstart="return false;">
      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Consulting</u><br />Project, Organization
          </p>  
          <span></span>
        </div>
      </div>
  </div>
 </a>
  <div class="circle-bot-right" unselectable="yes" onselectstart="return false;">
    <a class href="http://veddma.net/our-services/accreditation">
      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Accreditation</u><br />Professional Management Architects
          </p>  
          <span></span>
        </div>
      </div>
   </div>
  </a>
  <div class="circle-bot-left" unselectable="yes" onselectstart="return false;">
      <div class="circle__wrapper">
        <div class="circle__content">    
          <p class="para"><u>Tools</u><br />
          </p>  
          <span></span>
        </div>
      </div>
  </div>
  </a>
</div>

CSS

* {

    box-sizing: border-box;

}


#tree-wrapper{
    position: relative;
    width: 668px;
    height: 551px;
    margin: 0 auto;
}

#tree-wrapper p{

    margin: 0;
    padding: 0;
}

.tree {

    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    margin-top: 75px;
}

.circle-top-left,
.circle-top-right,
.circle-bot-left,
.circle-bot-right {

    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    font-size: 9px;
    -webkit-backface-visibility: hidden;
    position: absolute;
    background: #b20312;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    transition: all .5s ease-in-out;
    margin: 0;
    text-align: center;

}

.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {
    width: 200px;
    height: 200px;
    padding: 0.6em 2.5em;
    color: transparent;
}



.circle-top-left {

    top: 23.9%;
    left: 11.2%;

}

.circle-top-right {

  top: 13%;
    left: 54.5%;

}



.circle-bot-left {

    top: 73.8%;
      left: 0;
}



.circle-bot-right {

      top: 53.5%;
        left: 91.2%;

}

.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {

    transform: translate(-60px, -60px);
}

.circle__wrapper {

    display: table;
    width: 100%;
    height: 100%;
}

.title_subtitle_holder {

    display: block;
    padding: 30px 0 0;
    position: relative;
}

.circle__content {

    display: table-cell;
    padding: 1em;
    vertical-align: middle;
}

.para {

    line-height: 25px;
    display: none;
    font-size: 15px;
    color: white;
    text-align: center;
    vertical-align: middle;
}

.circle-top-right:hover .para,
.circle-bot-right:hover .para,
.circle-top-left:hover .para,
.circle-bot-left:hover .para  {
    display: block;
}

.circle-top-right:hover span,
.circle-bot-right:hover span,
.circle-top-left:hover span,
.circle-bot-left:hover span {
    display: none;
}

/*@import url(http://fonts.googleapis.com/css?family=Norican);*/

@-webkit-keyframes rip 
{
/*  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }*/
/*  5%  {
    box-shadow:0 0 0 0 #45c2c5,
               0 0 0 0 rgba(255,255,255,0.5),
               0 0 0 0 #45c2c5,
               0 0 0 0 rgba(0,0,0,0.1);
  }*/
  50% {
    box-shadow:0 0 40px 100px rgba(178,3,18, 0.5),
               0 0 10px 110px transparent,
               0 0 30px 120px rgba(178,3,18, 0.5),
               0 0 5px 130px transparent;
  }
  75% {
    box-shadow:0 0 40px 200px rgba(178,3,18, 0.1);
  }
  100% {
    box-shadow:0 0 40px 250px transparent;
  }
}

@-moz-keyframes rip 
{
/*  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }*/
/*  5%  {
    box-shadow:0 0 0 0 #b20312,
               0 0 0 0 rgba(255,255,255,0.5),
               0 0 0 0 #b20312,
               0 0 0 0 rgba(0,0,0,0.1);
  }*/
 /* 50% {
    box-shadow:0 0 40px 100px rgba(178,3,18, 0.5),
               0 0 10px 110px transparent,
               0 0 30px 120px rgba(178,3,18, 0.5),
               0 0 5px 130px transparent;
  }
  75% {
    box-shadow:0 0 40px 250px rgba(178,3,18, 0.5);
  }
  100% {
    box-shadow:0 0 40px 250px transparent;
  }*/
}
@-moz-keyframes rip-lg
{
/*  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  5%  {
    box-shadow:0 0 0 0 #b20312,
               0 0 0 0 rgba(255,255,255,0.5),
               0 0 0 0 #b20312,
               0 0 0 0 rgba(0,0,0,0.1);
  }*/
  50% {
    box-shadow:0 0 240px 200px rgba(178,3,18, 0.5),
               0 0 210px 210px transparent,

  }
/*  75% {
    box-shadow:0 0 40px 250px rgba(178,3,18, 0.1);
  }
  100% {
    box-shadow:0 0 40px 250px transparent;
  }*/
}


.ripple {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}



h1 {
  /*display:block;*/
  /*font-size:50px;
  font-family: 'Norican', cursive;*/
  /*color: white;*/
  /*background-image: radial-gradient(10px at 47px 50% , #b20312 0%, #b20312 50%, rgba(178,3,18, 0) 50px);*/
  /*background-color: #45C2C5;*/
  /*background-color:#fa0;*/
  /*border-radius: 50%;*/
  /*box-shadow:3px 5px 0 rgba(0,0,0,0.15);*/
  /*position: absolute;*/
/*  margin:-20px 0 0 -20px;*/
/*  text-shadow:0 2px 0 #8ed2d4,2px 3px 15px rgba(0,0,0,0.5);*/

 /* transition: all 5s ease-in-out;*/
}
html:hover h1 {
  /*transform: translateY(-200px);*/
}
.ripple,.ripple:before,.ripple:after {
  display:block;
  border-radius:2px;
  width:2px;
  height:2px;
  -webkit-animation:rip 4s infinite;
  -moz-animation:rip 2s infinite;
}
.ripple {
  position:absolute;
  z-index:-1;
  top: 28%;
    left: 15%;
}

.ripple:before,.ripple:after {
  content:'';
  position:absolute;
}
.ripple:before {-webkit-animation-delay: 4s;-moz-animation-delay: 2s;}
.ripple:after {-webkit-animation-delay:.8s;-moz-animation-delay:.8s;}

解决方案

You can use an animation like you are trying to use but instead of using box-shadow on the :before and :after pseudo-elements use a simple border.

Below is quick example; just hover on the circle to stop it. (Do note that it does not have all prefixed properties a la -webkit-, etc)

.circle {
  height:100px;
  width:100px;
  border-radius:50%;
  background-color:red;
  
  position:relative;
  top:100px;
  left:300px;
  
  -webkit-transition:height .25s ease, width .25s ease;
  transition:height .25s ease, width .25s ease;
  
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

.circle:hover{
  height:150px;
  width:150px;
}

.circle:before,
.circle:after {
  content:'';
  display:block;
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  border-radius:50%;
  border:1px solid red;
}

.circle:before {
  -webkit-animation: ripple 2s linear infinite;
  animation: ripple 2s linear infinite;
}
.circle:after {
  -webkit-animation: ripple 2s linear 1s infinite;
  animation: ripple 2s linear 1s infinite;
}

.circle:hover:before,
.circle:hover:after {
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes ripple{
  0% {-webkit-transform:scale(1); }
  75% {-webkit-transform:scale(1.75); opacity:1;}
  100% {-webkit-transform:scale(2); opacity:0;}
}

@keyframes ripple{
  0% {transform:scale(1); }
  75% {transform:scale(1.75); opacity:1;}
  100% {transform:scale(2); opacity:0;}
}

<div class="circle"></div>

这篇关于只有波纹动画CSS的戒指的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！