<div class="shine-pengin">
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" width="200" height="200">
</div>
/*****光るエフェクト***/
.shine-pengin{
text-decoration: none;
position: relative;
width: 200px;
height: 200px;
background-color: #A4E8DA;
border-radius: 50%;
overflow: hidden;
}
/* 光の疑似要素 */
.shine-pengin::before{
content: "";
width: 100%;
height: 100%;
background-color: #fff;
transform: skewX(-30deg);
position: absolute;
top: 0;
left: -150%;
opacity: 0.5;
animation: shine-anime 2s infinite;
}
/* 光の動き */
@keyframes shine-anime{
0% {
left: -150%;
opacity: 0;
}
80% {
left: -100%;
opacity: 0.5;
}
81% {
left: -100%;
opacity: 1;
}
100% {
left: 50%;
opacity: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.