div+css符号走光动画效果代码

代码语言:html

所属分类:动画

代码描述:div+css符号走光动画效果代码

代码标签: 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