点滅してるバナーつくってとか
バナー光らせてという注文をいただくことってあると思います
そんなときはcssで光らせましょう
参考
https://www.showdesignlab.com/weblog/2019/05/17/219
<div class="hikaru"></div>.hikaru {
width: 300px;
height: 150px;
position: relative;
overflow: hidden;
background-color: #23bb79;
}
.hikaru::after {
content: "";
display: block;
width: 30px;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: #FFF;
opacity: 0;
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}