css实现边框光线穿梭动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现边框光线穿梭动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #111111; } .card { position: relative; width: 300px; height: 300px; color: #fff; background: transparent; overflow: hidden; border-top: 1px solid rgba(255, 49, 49, 0.5); border-right: 1px solid rgba(0, 255, 255, 0.5); border-bottom: 1px solid rgba(57, 255, 20, 0.5); border-left: 1px solid rgba(255, 255, 113, 0.5); font-family: sans-serif; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 1em; } p { font-size: 0.95rem; text-align: center; } span { position: absolute; border-radius: 100vmax; } .top { top: 0; left: 0; width: 0; height: 5px; background: linear-gradient( 90deg, transparent 50%, rgba(255, 49, 49, 0.5), rgb(255, 49, 49) ); } .bottom { right: 0; bottom: 0; height: 5px; background: linear-gradient( 90deg, rgb(57, 255, 20), rgba(57, 255, 20, 0.5), transparent 50% ); } .right { top: 0; right: 0; width: 5px; height: 0; background: linear-gradient( 180deg, transparent 30%, rgba(0, 255, 255, 0.5), rgb(0, 255, 255) ); } .left { left: 0; bottom: 0; width: 5px; height: 0; background: linear-gradient( 180deg, rgb(255, 255, 113), rgba(255, 25.........完整代码请登录后点击上方下载按钮下载查看
网友评论0