div+css符号走光动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css符号走光动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> :root { --bg: #181818; --shadow: hsl(330 100% 70.6% / 40%); --gradient: conic-gradient(at 50% 50%, rebeccapurple, rebeccapurple, hotpink, rebeccapurple); --size: 8rem; } /* optional shadow effect You can use just the .symbol element if you dont want a drop-shadow */ .symbol-shadow { filter: drop-shadow(0 0 14px var(--shadow)); } .symbol { position:relative; overflow: hidden; width: var(--size); height: calc(var(--size) - calc(var(--size) / 4)); clip-path: polygon( 50% 0%, 50% 25%, 19% 88%, 81% 88%, 50% 25%, 50% 0, 100% 100%, 0% 100.........完整代码请登录后点击上方下载按钮下载查看
网友评论0