div+css实现聚光灯照射悬空三维文字投影动画效果代码
代码语言:html
所属分类:三维
代码描述:div+css实现聚光灯照射悬空三维文字投影动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap" rel="stylesheet"> <style> *, *::before, *::after { font-family: inherit; box-sizing: inherit; margin: 0; padding: 0; } html { box-sizing: border-box; font-family: 'Nunito Sans', sans-serif; font-size: 62.5%; } html body { font-size: 1.6rem; margin: 0; } ul { list-style: none; } a, a:link, a:visited { text-decoration: none; } </style> <style> @import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap"); body { height: 100vh; background-color: #333; font-family: Lobster, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; } main { --text: "Spotlight"; --hue1: 30deg; --hue2: 350deg; --spin: 20deg; --light-color: #ffeab1; --stripe: .25em; --stripe-angle: -33deg; --perspective: 80vmin; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; background-image: linear-gradient(to bottom, #383838, #3c3c3c 50%, #2f2f2f 60%, #0b0e13); font-size: 17.5vmin; } main .light { display: block; position: absolute; top: 0; left: 50%; width: 90%; height: 60%; min-height: 6em; transform: translateX(-50%) translateY(-1em); z-index: 1; mix-blend-mode: screen; filter: blur(0.15em); opacity: 0.6; } main .light::before { content: ""; display: block; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, var(--light-color), transparent); -webkit-clip-path: polygon(25% 0, 75% 0, 100% 100%, 0% 100%); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0% 100%); border-radius: 0 0 1em 1em; } main figure { display: block; position: relative; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; perspective: var(--perspective); } main figure span::before { text-align: center; content: var(--text); white-space: pre; display: block; position: absolute; } main figure .text { -webkit-animation: rotate 3s ease-in-out infinite both alternate; animation: rotate 3s ease-in-out infinite both alternate; transform-style: preserve-3d; perspective: var(--perspective); } main figure .text span:first-child::before { position: static; -webkit-animation: shine 3s linear infinite; animation: shine 3s linear infinite; } main figure .text span::before { top: 0; } main figure .text span:nth-child(1)::before { transform: translateZ(-0.01em); background: repeating-linear-gradient(var(--stripe-angle), hsl(var(--hue1), 60%, 83%), hsl(var(--hue1), 60%, 83%) var(--stripe), hsl(var(--hue2), 50%, 78%) var(--stripe), hsl(var(--hue2), 50%, 78%) calc(var(--stripe) * 2)); -webkit-background-clip: text; background-clip: text; color: transparent; } main figure .text span:nth-child(2)::before { transform: translateZ(-0.02em); background: repeating-linear-gradient(var(--stripe-angle), hsl(var(--hue1), 60%, 81%), hsl(var(--hue1), 60%, 81%) var(--stripe), hsl(var(--hue2), 50%, 76%) var(--stripe), hsl(var(--hue2), 50%, 76%) calc(var(--stripe) * 2)); -webkit-background-clip: text; background-clip: text; color: transparent; } main figure .text span:nth-child(3)::before { transform: translateZ(-0.03em); background: repeating-linear-gradient(var(--stripe-angle), hsl(var(--hue1), 60%, 79%), hsl(var(--hue1), 60%, 79%) var(--stripe), hsl(var(--hue2), 50%, 74%) var(--stripe), hsl(var(--hue2), 50%, 74%) calc(var(--stripe) * 2)); -webkit-background-clip: text; background-clip: text; color: transparent; } main figure .text span:nth-child(4)::before { transform: translateZ(-0.04em); background: repeating-linear-gradient(var(--stripe-angle), hsl(var(--hue1), 60%, 77%), hsl(var(--hue1), 60%, 77%) var(--stripe), hsl(var(--hue2), 50%, 72%) var(--stripe), hsl(var(--hue2), 50%, 72%) calc(var(--stripe) * 2)); -webkit-background-clip: text; background-clip: text; color: transparent; } main figure .text span:nth-child(5)::before { transform: translateZ(-0.05em); background: repeating-linear-gradient(var(--stripe-angle), hsl(var(--hue1), 60%, 75%), hsl(var(--hue1), 60%, 75%) var(--stripe), hsl(var(--hue2), 50%, 70%) var(--stripe), hsl(var(--hue2), 50%, 70%) calc(var(--stripe) * 2)); -webkit-background-clip: text; background-clip: text; color: transparent; } main figure .text span:nth-child(6)::before { transform: translateZ(-0.06em); background: repeating-linear-gradient(var(--stripe-angle), hsl(var(--hue1), 60%, 73%), hsl(var(--hue1), 60%, 73%) var(--stripe), hsl(var(--hue2), 50%, 68%) var(--stripe), hsl(var(--hue2), 50%, 68%) calc(var(--stripe) * 2)); -webkit-background-clip: text; background-clip: text; color: transparent; } main figure .text span:nth-child(7)::before { transform: translateZ(-0.07em); background: repeating-linear-gradient(var(--stripe-angle), hsl(var(--hue1), 60%, 71%), hsl(var(--hue1), 60%, 71%) var(--stripe), hsl(var(--hue2), 50%, 66%) var(--stripe), hsl(var(--hue2), 50%, 66%) calc(var(--stripe) * 2)); -webkit-background-clip: text; background-clip: text; color: transparent; } main figure .text span:nth-child(8)::before { transform: translateZ(-0.08em); background: repeating-linear-gradient(var(--stripe-angle), hsl(var(--hue1), 60%, 69%), hsl(var(--hue1), 60%, 69%) var(--stripe), hsl(var(--hue2), 50%, 64%) var(--stripe), hsl(var(--hue2), 50%, 64%) calc(var(--stripe) * 2)); -webkit-background-clip: text; background-clip: text; color: transparent; } main figure .text span:nth-child(9)::before { transform: translateZ(-0.09em); background: repeating-linear-gradient(var(--stripe-angle), hsl(var(--hue1), 60%, 67%), hsl(var(--hue1), 60%, 67%) var(--stripe), hsl(var(--hue2), 50%, 62%) var(--stripe), hsl(var(--hue2), 50%, 62%) calc(var(--stripe) * 2)); -webkit-background-clip: text; background-clip: text; color: transparent; } main figure .text span:nth-child(10)::before { transform: translateZ(-0.1em); background: repeating-linear-gradient(var(--stripe-angle), hsl(var(--hue1), 60%, 65%), hsl(var(--hue1), 60%, 65%) var(--stripe), hsl(var(--hue2), 50%, 60%) var(--stripe), hsl(var(--hue2), 50%, 60%) calc(var(--stripe) * 2)); -webkit-background-clip: text; background-clip: text; color: transparent; } main figure .text span:nth-child(11)::before { transform: translateZ(-0.11em); background: repeating-linear-gradient(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0