原文地址:https://segmentfault.com/a/1190000014680999
吃鸡倍镜,哈哈哈
HTML代码:
<div class="box"> <span>BUTTON</span> <span class="left"></span> <span class="right"></span> <span class="top"></span> <span class="bottom"></span> </div>
CSS代码:
html, body { margin: 0; padding: 0; height: 100%; display: flex; align-items: center; justify-content: center; color: black; } .box{ width:9em; height:3em; text-align: center; line-height: 3em; font-size: 30px; /* 字母间距 */ letter-spacing: 0.2em; position: relative; filter: blur(2px); transition: 1s; } .box:hover { filter: blur(0.2px); } .box::after { content: ''; position: absolute; width: 3em; height: 3em; border: 1px solid red; border-radius: 50%; left: 3em; filter: opacity(0); } .box span:not(:first-child) { position: absolute; background-color: red; filter: opacity(0); } .box:hover::after, .box:hover span:not(:first-child) { animation: aim 1s linear infinite alternate; } .box span.top, .box span.bottom { width: 1px; height: 3em; left: 50%; } .box span.top { top: -3em; } .box span.bottom { bottom: -3em; } .box span.left, .box span.right { width: 3em; height: 1px; top: 50%; } .box span.left { left: 0; } .box span.right { right: 0; } @keyframes aim { from { filter: opacity(0.2); } to { filter: opacity(0.8); } }