私がやろうとしているのは、:hoverコンテナをトリガーする@keyframesときです。ページをロードするときと同じように、スパンのリングをトリガーする必要があります。
私はここにcodepenリンクを持っています：https：//codepen.io/anon/pen/moERzj
.trigger img {
width: 140px;
border-radius: 100%;
padding: 2px;
}
.trigger {
margin: 0 auto;
position: relative;
}
.trigger > span {
border-radius: 100% / 100%;
position: absolute;
width: 140px;
height: 140px;
border: 2px solid #fff;
background: #333;
z-index: -1;
-webkit-animation: rings 1s;
-moz-animation: rings 1s;
-ms-animation: rings 1s;
-o-animation: rings 1s;
animation: rings 1s;
}
.trigger:hover > span {
-webkit-animation: rings 1s;
-moz-animation: rings 1s;
-ms-animation: rings 1s;
-o-animation: rings 1s;
animation: rings 1s;
}
.trigger > img:hover > span {
-webkit-animation: rings 1s;
-moz-animation: rings 1s;
-ms-animation: rings 1s;
-o-animation: rings 1s;
animation: rings 1s;
}
.trigger > span:nth-child(1) {
animation-delay: 0s;
}
.trigger > span:nth-child(2) {
animation-delay: 0.2s;
}
.trigger > span:nth-child(3) {
animation-delay: 0.4s;
}
@-webkit-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1; transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
@-moz-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
@-ms-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
@-o-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
@keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
トリガーやなど、他の何かが@keyframes発生したときに、スパンでリングをトリガーできるようにしたいだけです。:hoverdivimg
アニメーションに「無限」を追加するだけで、複数回実行されますanimation: rings 1s infinite;::
"use strict";
const element = document.getElementById("trigger");
element.addEventListener("mouseover", function(e){
element.classList.remove("animated");
void element.offsetWidth;
element.classList.add("animated");
}, false);body { background: #333;}
#trigger {
margin: 60px auto;
padding: 30px;
position: relative;
border: 2px solid red;
width: 300px;
text-align: center;
}
#trigger * {
pointer-events: none;
}
#trigger img {
width: 140px;
border-radius: 100%;
padding: 2px;
}
#trigger.animated span {
border-radius: 100% / 100%;
position: absolute;
width: 140px;
height: 140px;
border: 2px solid #fff;
background: #333;
z-index: -1;
animation: rings 1s;
}
#trigger span:nth-child(1) {
animation-delay: 0s;
}
#trigger span:nth-child(2) {
animation-delay: 0.2s;
}
#trigger span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes rings {
0% {
opacity: 0;
transform: scale(1);
}
70% {
opacity: 1;
transform: scale(1.3);
}
100% {
opacity: 0;
transform: scale(1);
}
}<div id="trigger" class="animated">
<span></span>
<span></span>
<span></span>
<img src="https://picsum.photos/140/140" alt="some pic">
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加