.buttonSublit { width:355px; height:55px; overflow:hidden; margin-top:10px; } .buttonSublit .subBtn { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; cursor:pointer; background:#ff4131; background:-webkit-linear-gradient(to right,#ff6131,#ff4131); background:linear-gradient(to right,#ff6131,#ff4131); } button { border:1px solid transparent; outline:none; } button:active,button:hover { background:#ec2e1d; } /* 交互class style */ .btnAnimation { position:relative; transition:all 0.5s; } .btnAnimation::after { position:absolute; content:""; display:block; width:200px; height:40px; bottom:-100%; left:-100%; transition:all 0.2s; background:rgba(255,255,255,0.3); transform:rotate(60deg); -o-animation:btnMove 1.5s infinite; -webkit-animation:btnMove 1.5s infinite; -moz-animation:btnMove 1.5s infinite; animation-delay:1s; -webkit-animation-delay:1s; } .btnAnimation::before { position:absolute; content:""; display:block; width:200px; height:40px; top:-100%; right:-100%; transition:all 0.2s; background:rgba(255,255,255,0.3); transform:rotate(60deg); -o-animation:btnMove-1 1.5s infinite; -webkit-animation:btnMove-1 1.5s infinite; -moz-animation:btnMove-1 1.5s infinite; animation-delay:1s; -webkit-animation-delay:1s; } @keyframes btnMove { 0% { bottom:-100%; left:-100%; transition:all 0.2s; } 100% { left:110%; bottom:110%; transition:all 0.2s; } }@keyframes btnMove-1 { 0% { top:-100%; right:-100%; transition:all 0.2s; } 100% { right:110%; top:110%; transition:all 0.2s; } }
更新时间:2020-05-14 10:45:24
利用css3的伪类在按钮前后分别做两个半透明白色长方形,旋转60度后再配合css3的从0到100帧的动画。即可完成此效果