div+css实现文字探照灯圣诞快乐动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现文字探照灯圣诞快乐动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
<style>
body {
background: #050a19;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
#ui .text {
position: absolute;
font-size: 10rem;
color: #fff;
line-height: 10rem;
font-family: "Anton", sans-serif;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
letter-spacing: 1rem;
}
#ui .text:nth-child(1) {
color: #1e3afe;
-webkit-animation: clip0 15035ms ease-in-out infinite alternate;
animation: clip0 15035ms ease-in-out infinite alternate;
filter: blur(2px);
}
@-webkit-keyframes clip0 {
0% {
-webkit-clip-path: circle(103px at 116% 50%);
clip-path: circle(103px at 116% 50%);
}
25% {
-webkit-clip-path: circle(139px at 124% 87%);
clip-path: circle(139px at 124% 87%);
}
50% {
-webkit-clip-path: circle(90px at 7% 37%);
clip-path: circle(90px at 7% 37%);
}
75% {
-webkit-clip-path: circle(105px at 35% -24%);
clip-path: circle(105px at 35% -24%);
}
100% {
-webkit-clip-path: circle(48px at 61% 0%);
clip-path: circle(48px at 61% 0%);
}
}
@keyframes clip0 {
0% {
-webkit-clip-path: circle(103px at 116% 50%);
clip-path: circle(103px at 116% 50%);
}
25% {
-webkit-clip-path: circle(139px at 124% 87%);
clip-path: circle(139px at 124% 87%);
}
50% {
-webkit-clip-path: circle(90px at 7% 37%);
clip-path: circle(90px at 7% 37%);
}
75% {
-webkit-clip-path: circle(105px at 35% -24%);
clip-path: circle(105px at 35% -24%);
}
100% {
-webkit-clip-path: circle(48px at 61% 0%);
clip-path: circle(48px at 61% 0%);
}
}
#ui .text:nth-child(2) {
color: #0e0ff0;
-webkit-animation: clip1 19430ms ease-in-out infinite alternate;
animation: clip1 19430ms ease-in-out infinite alternate;
filter: blur(-2px);
}
@-webkit-keyframes clip1 {
0% {
-webkit-clip-path: circle(144px at 31% 87%);
clip-path: circle(144px at 31% 87%);
}
25% {
-webkit-clip-path: circle(117px at 53% 26%);
clip-path: circle(117px at 53% 26%);
}
50% {
-webkit-clip-path: circle(171px at 99% 56%);
clip-path: circle(171px at 99% 56%);
}
75% {
-webkit-clip-path: circle(174px at 21% -7%);
clip-path: circle(174px at 21% -7%);
}
100% {
-webkit-clip-path: circle(79px at -9% -2%);
clip-path: circle(79px at -9% -2%);
}
}
@keyframes clip1 {
0% {
-webkit-clip-path: circle(144px at 31% 87%);
clip-path: circle(144px at 31% 87%);
}
25% {
-webkit-clip-path: circle(117px at 53% 26%);
clip-path: circle(117px at 53% 26%);
}
50% {
-webkit-clip-path: circle(171px at 99% 56%);
clip-path: circle(171px at 99% 56%);
}
75% {
-webkit-clip-path: circle(174px at 21% -7%);
clip-path: circle(174px at 21% -7%);
}
100% {
-webkit-clip-path: circle(79px at -9% -2%);
clip-path: circle(79px at -9% -2%);
}
}
#ui .text:nth-child(3) {
color: #0410ea;
-webkit-animation: clip2 11973ms ease-in-out infinite alternate;
animation: clip2 11973ms ease-in-out infinite alternate;
filter: blur(-1px);
}
@-webkit-keyframes clip2 {
0% {
-webkit-clip-path: circle(175px at 41% 60%);
clip-path: circle(175px at 41% 60%);
}
25% {
-webkit-clip-path: circle(134px at -4% 4%);
clip-path: circle(134px at -4% 4%);
}
50% {
-webkit-clip-path: circle(95px at 89% -10%);
clip-path: circle(95px at 89% -10%);
}
75% {
-webkit-clip-path: circle(140px at 119% 26%);
clip-path: circle(140px at 119% 26%);
}
100% {
-webkit-clip-path: circle(46px at 34% 26%);
clip-path: circle(46px at 34% 26%);
}
}
@keyframes clip2 {
0% {
-webkit-clip-path: circle(175px at 41% 60%);
clip-path: circle(175px at 41% 60%);
}
25% {
-webkit-clip-path: circle(134px at -4% 4%);
clip-path: circle(134px at -4% 4%);
}
50% {
-webkit-clip-path: circle(95px at 89% -10%);
clip-path: circle(95px at 89% -10%);
}
75% {
-webkit-clip-path: circle(140px at 119% 26%);
clip-path: circle(140px at 119% 26%);
}
100% {
-webkit-clip-path: circle(46px at 34% 26%);
clip-path: circle(46px at 34% 26%);
}
}
#ui .text:nth-child(4) {
color: #0b4cdb;
-webkit-animation: clip3 18830ms ease-in-out infinite alternate;
animation: clip3 18830ms ease-in-out infinite alternate;
filter: blur(-4px);
}
@-webkit-keyframes clip3 {
0% {
-webkit-clip-path: circle(34px at 77% 2%);
clip-path: circle(34px at 77% 2%);
}
25% {
-webkit-clip-path: circle(117px at 87% 63%);
clip-path: circle(117px at 87% 63%);
}
50% {
-webkit-clip-path: circle(162px at 130% 33%);
clip-path: circle(162px at 130% 33%);
}
75% {
-webkit-clip-path: circle(127px at 40% 33%);
clip-path: circle(127px at 40% 33%);
}
100% {
-webkit-clip-path: circle(145px at 66% 0%);
clip-path: circle(145px at 66% 0%);
}
}
@keyframes clip3 {
0% {
-webkit-clip-path: circle(34px at 77% 2%);
clip-path: circle(34px at 77% 2%);
}
25% {
-webkit-clip-path: circle(117px at 87% 63%);
clip-path: circle(117px at 87% 63%);
}
50% {
-webkit-clip-path: circle(162px at 130% 33%);
clip-path: circle(162px at 130% 33%);
}
75% {
-webkit-clip-path: circle(127px at 40% 33%);
clip-path: circle(127px at 40% 33%);
}
100% {
-webkit-clip-path: circle(145px at 66% 0%);
clip-path: circle(145px at 66% 0%);
}
}
#ui .text:nth-child(5) {
color: #0c15ba;
-webkit-animation: clip4 17922ms ease-in-out infinite alternate;
animation: clip4 17922ms ease-in-out infinite alternate;
filter: blur(11px);
}
@-webkit-keyframes clip4 {
0% {
-webkit-clip-path: circle(105px at 49% 43%);
clip-path: circle(105px at 49% 43%);
}
25% {
-webkit-clip-path: circle(87px at 29% 38%);
clip-path: circle(87px at 29% 38%);
}
50% {
-webkit-clip-path: circle(101px at 39% 44%);
clip-path: circle(101px at 39% 44%);
}
75% {
-webkit-clip-path: circle(76px at 21% 54%);
clip-path: circle(76px at 21% 54%);
}
100% {
-webkit-clip-path: circle(50px at 101% 58%);
clip-path: circle(50px at 101% 58%);
}
}
@keyframes clip4 {
0% {
-webkit-clip-path: circle(105px at 49% 43%);
clip-path: circle(105px at 49% 43%);
}
25% {
-webkit-clip-path: circle(87px at 29% 38%);
clip-path: circle(87px at 29% 38%);
}
50% {
-webkit-clip-path: circle(101px at 39% 44%);
clip-path: circle(101px at 39% 44%);
}
75% {
-webkit-clip-path: circle(76px at 21% 54%);
clip-path: circle(76px at 21% 54%);
}
100% {
-webkit-clip-path: circle(50px at 101% 58%);
clip-path: circle(50px at 101% 58%);
}
}
#ui .text:nth-child(6) {
color: #06207b;
-webkit-animation: clip5 13309ms ease-in-out infinite alternate;
animation: clip5 13309ms ease-in-out infinite alternate;
filter: blur(11px);
}
@-webkit-keyframes clip5 {
0% {
-webkit-clip-path: circle(110px at -2% -2%);
clip-path: circle(110px at -2% -2%);
}
25% {
-webkit-clip-path: circle(168px at 3% 54%);
clip-path: circle(168px at 3% 54%);
}
50% {
-webkit-clip-path: circle(173px at 25% -22%);
clip-path: circle(173px at 25% -22%);
}
75% {
-webkit-clip-path: circle(170px at -16% 109%);
clip-path: circle(170px at -16% 109%);
}
100% {
-webkit-clip-path: circle(84px at 19% 16%);
clip-path: circle(84px at 19% 16%);
}
}
@keyframes clip5 {
0% {
-webkit-clip-path: circle(110px at -2% -2%);
clip-path: circle(110px at -2% -2%);
}
25% {
-webkit-clip-path: circle(168px at 3% 54%);
clip-path: circle(168px at 3% 54%);
}
50% {
-webkit-clip-path: circle(173px at 25% -22%);
clip-path: circle(173px at 25% -22%);
}
75% {
-webkit-clip-path: circle(170px at -16% 109%);
clip-path: circle(170px at -16% 109%);
}
100% {
-webkit-clip-path: circle(84px at 19% 16%);
clip-path: circle(84px at 19% 16%);
}
}
#ui .text:nth-child(7) {
color: #1d28ef;
-webkit-animation: clip6 18554ms ease-in-out infinite alternate;
animation: clip6 18554ms ease-in-out infinite alternate;
filter: blur(6px);
}
@-webkit-keyframes clip6 {
0% {
-webkit-clip-path: circle(65px at 57% 127%);
clip-path: circle(65px at 57% 127%);
}
25% {
-webkit-clip-path: circle(52px at 53% -22%);
clip-path: circle(52px at 53% -22%);
}
50% {
-webkit-clip-path: circle(84px at 6% 78%);
clip-path: circle(84px at 6% 78%);
}
75% {
-webkit-clip-path: circle(59px at 48% 7%);
clip-path: circle(59px at 48% 7%);
}
100% {
-webkit-clip-path: circle(103px at 119% 101%);
clip-path: circle(103px at 119% 101%);
}
}
@keyframes clip6 {
0% {
-webkit-clip-path: circle(65px at 57% 127%);
clip-path: circle(65px at 57% 127%);
}
25% {
-webkit-clip-path: circle(52px at 53% -22%);
clip-path: circle(52px at 53% -22%);
}
50% {
-webkit-clip-path: circle(84px at 6% 78%);
clip-path: circle(84px at 6% 78%);
}
75% {
-webkit-clip-path: circle(59px at 48% 7%);
clip-path: circle(59px at 48% 7%);
}
100% {
-webkit-clip-path: circle(103px at 119% 101%);
clip-path: circle(103px at 119% 101%);
}
}
#ui .text:nth-child(8) {
color: #1513e5;
-webkit-animation: clip7 14429ms ease-in-out infinite alternate;
animation: clip7 14429ms ease-in-out infinite alternate;
filter: blur(-4px);
}
@-webkit-keyframes clip7 {
0% {
-webkit-clip-path: circle(121px at 3% 76%);
clip-path: circle(121px at 3% 76%);
}
25% {
-webkit-clip-path: circle(80px at -18% 38%);
clip-path: circle(80px at -18% 38%);
}
50% {
-webkit-clip-path: circle(170px at 116% 58%);
clip-path: circle(170px at 116% 58%);
}
75% {
-webkit-clip-path: circle(126px at 12% 50%);
clip-path: circle(126px at 12% 50%);
}
100% {
-webkit-clip-path: circle(142px at 118% -23%);
clip-path: circle(142px at 118% -23%);
}
}
@keyframes clip7 {
0% {
-webkit-clip-path: circle(121px at 3% 76%);
clip-path: circle(121px at 3% 76%);
}
25% {
-webkit-clip-path: circle(80px at -18% 38%);
clip-path: circle(80px at -18% 38%);
}
50% {
-webkit-clip-path: circle(170px at 116% 58%);
clip-path: circle(170px at 116% 58%);
}
75% {
-webkit-clip-path: circle(126px at 12% 50%);
clip-path: circle(126px at 12% 50%);
}
100% {
-webkit-clip-path: circle(142px at 118% -23%);
clip-path: circle(142px at 118% -23%);
}
}
#ui .text:nth-child(9) {
color: #031abf;
-webkit-animation: clip8 12966ms ease-in-out infinite alternate;
animation: clip8 12966ms ease-in-out infinite alternate;
filter: blur(10px);
}
@-webkit-keyframes clip8 {
0% {
-webkit-clip-path: circle(160px at 23% 82%);
clip-path: circle(160px at 23% 82%);
}
25% {
-webkit-clip-path: circle(98px at 85% 95%);
clip-path: circle(98px at 85% 95%);
}
50% {
-webkit-clip-path: circle(91px at 21% 65%);
clip-path: circle(91px at 21% 65%);
}
75% {
-webkit-clip-path: circle(169px at 73% 41%);
clip-path: circle(169px at 73% 41%);
}
100% {
-webkit-clip-path: circle(141px at 15% -14%);
clip-path: circle(141px at 15% -14%);
}
}
@keyframes clip8 {
0% {
-webkit-clip-path: circle(160px at 23% 82%);
clip-path: circle(160px at 23% 82%);
}
25% {
-webkit-clip-path: circle(98px at 85% 95%);
clip-path: circle(98px at 85% 95%);
}
50% {
-webkit-clip-path: circle(91px at 21% 65%);
clip-path: circle(91px at 21% 65%);
}
75% {
-webkit-clip-path: circle(169px at 73% 41%);
clip-path: circle(169px at 73% 41%);
}
100% {
-webkit-clip-path: circle(141px at 15% -14%);
clip-path: circle(141px at 15% -14%);
}
}
#ui .text:nth-child(10) {
color: #140af0;
-webkit-animation: clip9 10257ms ease-in-out infinite alternate;
animation: clip9 10257ms ease-in-out infinite alternate;
filter: blur(-9px);
}
@-webkit-keyframes clip9 {
0% {
-webkit-clip-path: circle(146px at 37% 88%);
clip-path: circle(146px at 37% 88%);
}
25% {
-webkit-clip-path: circle(37px at 102% 96%);
clip-path: circle(37px at 102% 96%);
}
50% {
-webkit-clip-path: circle(82px at 49% 50%);
clip-path: circle(82px at 49% 50%);
}
75% {
-webkit-clip-path: circle(86px at 47% 89%);
clip-path: circle(86px at 47% 89%);
}
100% {
-webkit-clip-path: circle(169px at 70% 74%);
clip-path: circle(169px at 70% 74%);
}
}
@keyframes clip9 {
0% {
-webkit-clip-path: circle(146px at 37% 88%);
clip-path: circle(146px at 37% 88%);
}
25% {
-webkit-clip-path: circle(37px at 102% 96%);
clip-path: circle(37px at 102% 96%);
}
50% {
-webkit-clip-path: circle(82px at 49% 50%);
clip-path: circle(82px at 49% 50%);
}
75% {
-webkit-clip-path: circle(86px at 47% 89%);
clip-path: circle(86px at 47% 89%);
}
100% {
-webkit-clip-path: circle(169px at 70% 74%);
clip-path: circle(169px at 70% 74%);
}
}
#ui .text:nth-ch.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0