闪动的按钮特效前端css3

183 阅读1分钟

一、效果,下面的是静态截图,效果是白色的闪动

image.png

二、实现方法

1、写标签按钮,<div>88元 确认协议并开通<div className="effect"></div></div>

2、重点来了,写样式

.effect{
 animation: buttonEffect 2s cubic-bezier(.45,0,.55,1) infinite;
 animation-delay: .2s;
 background: linear-gradient(93deg,hsla(0,0%,100%,.4210%,hsla(0,0%,100%,.1886%);
 background-clip: border-box;
 filter: blur(0.16rem);
 height:2.13333rem;
 left: 0;
 position: absolute;
 top: 0;
 width:0.4rem;
}
@keyframes buttonEffect{
  0%{
     transform: translate3d(-1.2rem,-0.53333rem,0) rotate3d(0,0,.5,45deg);
  }
  100%{
     transform: translate3d(9.33333rem,-0.53333rem,0) rotate3d(0,0,.5,45deg
  );
 }
}