环纹波动画CSS ONLY

试图让那里是纹波/两环特定的动画从图像形状上的辐射。我不能很找到确切的动画

Codepen链接

This is what I have in mind其粗图纸，但它给你的想法。我希望环绕着叶子圆圈的环形起伏，而不是整个圆圈。它会停止悬停的动画，并且圆圈会随着文本内部的扩大而展开。

代码

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;}

来源

2015-10-05 user3241846

您可以使用animation像你正在尝试使用，但不是对:before和:after伪元素使用box-shadow用一个简单的border。

以下是快速示例;只需在圆上悬停即可停止。（请注意，它不具有的所有属性前缀一拉-webkit-等）

.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>

来源

2015-10-05 18:58:38 Marcelo

那差不多就是这样，我在寻找要运行的动画，并在用户将鼠标悬停在圆上时停止，即当它展开并显示文字 – user3241846

@ user3241846动画应该停在悬停状态并且圆形应该展开。为了简单起见，我唯一没有的是文字。 – Marcelo

@marcello奇妙！ grt工作！ – stackMonk

你可以使用：border-style:double，padding，background-clip。

* { 
 
    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: 68px; 
 
    height: 68px; 
 
    border-radius: 50%; 
 
    transition: all .5s ease-in-out; 
 
    margin: 0; 
 
    text-align: center; 
 
    background-clip:content-box; 
 
    padding:10px; 
 
    border:double 0px #b20312 
 
} 
 

 
.circle-top-left:hover, 
 
.circle-top-right:hover, 
 
.circle-bot-left:hover, 
 
.circle-bot-right:hover { 
 
    width: 170px; 
 
    height: 170px; 
 
    color: transparent; 
 
    border:double 20px #b20312; 
 
} 
 

 
.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);*/ 
 

 

 
.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; 
 
}

<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>

http://codepen.io/anon/pen/YyVwWZ

来源

2015-10-05 18:55:12

我可能无法正确解释。我想让戒指做涟漪动画而不是整个圆圈，动画会停在悬停状态。我编辑了这篇文章来澄清更多。 – user3241846

环纹波动画CSS ONLY

回答

相关问题