下の矢印の周りにリップル効果を持つ複数のリング

1つのリングで下向きの矢印の周りに波紋効果を作り出すことができました。下の矢印の周りにリップル効果を持つ複数のリング

アニメーション： https://rimildeyjsr.github.io/St.Anthony-Website/

私は似たアニメーションと3つのリングを含めるようにアニメーションを延長したいです。アニメーションを実現する最も簡単な方法は何ですか？ここで

.down-arrow { 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    top: 81.5%; 
 
    z-index: 5; 
 
    border-radius: 50%; 
 
    height: 80px; 
 
    width: 80px; 
 
} 
 
.ring { 
 
    border: 2.5px solid white; 
 
    -webkit-border-radius: 50%; 
 
    height: 80px; 
 
    width: 80px; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 81%; 
 
    z-index: 5; 
 
    margin: 0 auto; 
 
    -webkit-animation: pulsate 2s ease-out; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-delay: 2s; 
 
    opacity: 0.0; 
 
} 
 
@-webkit-keyframes pulsate { 
 
    0% { 
 
    -webkit-transform: scale(0, 0); 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(1.2, 1.2); 
 
    opacity: 0; 
 
    } 
 
}

<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow-page-one animated 
 
       slideInDown"> 
 
<div class="ring"></div>

出典

2016-11-17 Rimil Dey

私はこれが正しい方法であるかどうか知りません。しかし、あなたができることは何ですか。同じCSSで2つ以上のring divを作成し、webkit-animation時間を遅らせたり、長くしたりしてください。位置の値を上下に重ねて使用するようにしてください。 – Veer

これをチェックしてください：http://stackoverflow.com/questions/36707159/how-to-create-a-pulsing-glow-ring-animation-in-css彼らはその効果を生み出すためにプロパティの前と後にCSSを使用しています。 – Veer

ソリューションの変種です：

body { 
 
    background-color: #668822; 
 
} 
 
.down-arrow { 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    top: 81.5%; 
 
    z-index: 5; 
 
    border-radius: 50%; 
 
    height: 80px; 
 
    width: 80px; 
 
} 
 
.ring { 
 
    border: 2.5px solid white; 
 
    -webkit-border-radius: 50%; 
 
    height: 80px; 
 
    width: 80px; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 200px; 
 
    z-index: 5; 
 
    margin: 0 auto; 
 
    -webkit-animation: pulsate 2s ease-out; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-delay: 2s; 
 
    opacity: 0.0; 
 
} 
 
.ring2 { 
 
    -webkit-animation-delay: 1.7s; 
 
} 
 
.ring3 { 
 
    -webkit-animation-delay: 1.4s; 
 
} 
 
@-webkit-keyframes pulsate { 
 
    0% { 
 
    -webkit-transform: scale(0, 0); 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(1.2, 1.2); 
 
    opacity: 0; 
 
    } 
 
}

<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow-page-one animated 
 
       slideInDown"> 
 
<div class="ring"></div><div class="ring ring2"></div><div class="ring ring3"></div>

さらにあなたが現れ円の遅延でプレイしてもよいです。

出典

2016-11-17 09:59:09 Banzay

これは私ができる最善である：

JS Fiddle

div.ring:before, 
 
div.ring:after, span { 
 
    border: 1px solid white; 
 
    position: absolute; 
 
    content: ''; 
 
    height: 80px; 
 
    width: 80px; 
 
    left: 0; 
 
    right: 0; 
 
    top: 25%; 
 
    z-index: 5; 
 
    margin: 0 auto; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 1px white; 
 
    animation: pulsate 3s ease-out infinite; 
 
} 
 
div.ring:after { 
 
    -webkit-animation-delay: 2s; 
 
} 
 
span{ 
 
    -webkit-animation-delay: 1s; 
 
    } 
 
@-webkit-keyframes pulsate { 
 
    0% { 
 
    -webkit-transform: scale(0, 0); 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(1.2, 1.2); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
body {background: black;}

<div class="ring"> 
 
    <span></span> 
 
</div>

出典

2016-11-17 10:27:57 Veer

下の矢印の周りにリップル効果を持つ複数のリング

答えて

関連する問題