.my_btn { width: 100px; height: 50px; text-align: center; margin-top: 10px; line-height: 50px; background-color: #fff; position: relative; overflow: hidden; border-radius: 25px; z-index: 9; } @keyframes mymove { from { transform: rotateZ(0); transform-origin: left top; } to { transform: rotateZ(360deg); transform-origin: left top; } } .my_btn::after { content: ""; border-radius: 25px; width: calc(100% - 2px); height: calc(100% - 2px); background-color: #fff; position: absolute; top: 1px; left: 1px; z-index: -1; } .my_btn::before { content: ""; width: 100%; height: 100%; background-color: #f00; position: absolute; top: 50%; left: 50%; z-index: -2; animation: mymove 3s infinite linear; }
利用元素的before after伪元素 利用动画加定位层级实现,具体代码如上
标签:特效,color,top,transform,height,边框,100%,css,left From: https://www.cnblogs.com/whtjmy/p/16600947.html