这是一款纯CSS3炫酷卡片边框发光动画特效。该特效利用CSS3的@property属性来实现卡片边框的发光动画效果,可以调节不同的颜色,使卡片看起来像是流光闪烁,非常炫酷。
css3 @property
属性的浏览器兼容性如下:
使用方法
HTML代码
<div class="card"></div>
CSS代码
@property --rotate { syntax: ""; initial-value: 132deg; inherits: false; } :root { --card-height: 45vh; --card-width: calc(var(--card-height) / 1.5); } body { min-height: 100vh; background: #212534 !important; display: flex; align-items: center; flex-direction: column; padding-top: 2rem; padding-bottom: 2rem; box-sizing: border-box; } .card { background: #191c29; width: var(--card-width); height: var(--card-height); padding: 3px; position: relative; border-radius: 6px; justify-content: center; align-items: center; text-align: center; display: flex; font-size: 1.5em; color: rgb(88 199 250 / 0%); cursor: pointer; font-family: cursive; } .card:hover { color: rgb(88 199 250 / 100%); transition: color 1s; } .card:hover:before, .card:hover:after { animation: none; opacity: 0; } .card::before { content: ""; width: 104%; height: 102%; border-radius: 8px; background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2); position: absolute; z-index: -1; top: -1%; left: -2%; animation: spin 2.5s linear infinite; } .card::after { position: absolute; content: ""; top: calc(var(--card-height) / 6); left: 0; right: 0; z-index: -1; height: 100%; width: 100%; margin: 0 auto; transform: scale(0.8); filter: blur(calc(var(--card-height) / 6)); background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2); opacity: 1; transition: opacity .5s; animation: spin 2.5s linear infinite; } @keyframes spin { 0% { --rotate: 0deg; } 100% { --rotate: 360deg; } } a.text { color: #212534; text-decoration: none; font-family: sans-serif; font-weight: bold; margin-top: 2rem; }