css圣诞树动画效果
代码语言：html
所属分类：布局界面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--background: #3C3B3D;
}
body {
background: var(--background);
}
body ul {
padding: 0;
}
body ul li {
list-style: none;
}
body ul:nth-child(1) {
position: absolute;
top: 20vh;
left: 50%;
width: 1rem;
height: 1rem;
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
body ul:nth-child(1) li {
position: absolute;
width: 0;
height: 0;
border-width: 0 0.5rem 1rem 0.5rem;
border-style: solid;
border-color: transparent;
border-bottom-color: #FFCE54;
-webkit-transform-origin: 0.5rem 1rem;
transform-origin: 0.5rem 1rem;
}
body ul:nth-child(1) li:nth-child(0) {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
body ul:nth-child(1) li:nth-child(1) {
-webkit-transform: rotate(72deg);
transform: rotate(72deg);
}
body ul:nth-child(1) li:nth-child(2) {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
body ul:nth-child(1) li:nth-child(3) {
-webkit-transform: rotate(216deg);
transform: rotate(216deg);
}
body ul:nth-child(1) li:nth-child(4) {
-webkit-transform: rotate(288deg);
transform: rotate(288deg);
}
body ul:nth-child(2) li {
position: absolute;
top: 20vh;
left: 50%;
width: 0.0625rem;
height: 60vh;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
body ul:nth-child(2) li:nth-child(1) {
-webkit-transform: rotate(4.9322004015deg);
transform: rotate(4.9322004015deg);
}
body ul:nth-child(2) li:nth-child(1):before, body ul:nth-child(2) li:nth-child(1):after {
-webkit-animation-delay: -0.015625s;
animation-delay: -0.015625s;
}
body ul:nth-child(2) li:nth-child(2) {
-webkit-transform: rotate(7.7960629984deg);
transform: rotate(7.7960629984deg);
}
body ul:nth-child(2) li:nth-child(2):before, body ul:nth-child(2) li:nth-child(2):after {
-webkit-animation-delay: -0.03125s;
animation-delay: -0.03125s;
}
body ul:nth-child(2) li:nth-child(3) {
-webkit-transform: rotate(10.5294548885deg);
transform: rotate(10.5294548885deg);
}
body ul:nth-child(2) li:nth-child(3):before, body ul:nth-child(2) li:nth-child(3):after {
-webkit-animation-delay: -0.046875s;
animation-delay: -0.046875s;
}
body ul:nth-child(2) li:nth-child(4) {
-webkit-transform: rotate(13.0729752212deg);
transform: rotate(13.0729752212deg);
}
body ul:nth-child(2) li:nth-child(4):before, body ul:nth-child(2) li:nth-child(4):after {
-webkit-animation-delay: -0.0625s;
animation-delay: -0.0625s;
}
body ul:nth-child(2) li:nth-child(5) {
-webkit-transform: rotate(15.3712416033deg);
transform: rotate(15.3712416033deg);
}
body ul:nth-child(2) li:nth-child(5):before, body ul:nth-child(2) li:nth-child(5):after {
-webkit-animation-delay: -0.078125s;
animation-delay: -0.078125s;
}
body ul:nth-child(2) li:nth-child(6) {
-webkit-transform: rotate(17.3740897387deg);
transform: rotate(17.3740897387deg);
}
body ul:nth-child(2) li:nth-child(6):before, body ul:nth-child(2) li:nth-child(6):after {
-webkit-animation-delay: -0.09375s;
animation-delay: -0.09375s;
}
body ul:nth-child(2) li:nth-child(7) {
-webkit-transform: rotate(19.0376603304deg);
transform: rotate(19.0376603304deg);
}
body ul:nth-child(2) li:nth-child(7):before, body ul:nth-child(2) li:nth-child(7):after {
-webkit-animation-delay: -0.109375s;
animation-delay: -0.109375s;
}
body ul:nth-child(2) li:nth-child(8) {
-webkit-transform: rotate(20.3253497152deg);
transform: rotate(20.3253497152deg);
}
body ul:nth-child(2) li:nth-child(8):before, body ul:nth-child(2) li:nth-child(8):after {
-webkit-animation-delay: -0.125s;
animation-delay: -0.125s;
}
body ul:nth-child(2) li:nth-child(9) {
-webkit-transform: rotate(21.2086036501deg);
transform: rotate(21.2086036501deg);
}
body ul:nth-child(2) li:nth-child(9):before, body ul:nth-child(2) li:nth-child(9):after {
-webkit-animation-delay: -0.140625s;
animation-delay: -0.140625s;
}
body ul:nth-child(2) li:nth-child(10) {
-webkit-transform: rotate(21.6675370621deg);
transform: rotate(21.6675370621deg);
}
body ul:nth-child(2) li:nth-child(10):before, body ul:nth-child(2) li:nth-child(10):after {
-webkit-animation-delay: -0.15625s;
animation-delay: -0.15625s;
}
body ul:nth-child(2) li:nth-child(11) {
-webkit-transform: rotate(21.6913663441deg);
transform: rotate(21.6913663441deg);
}
body ul:nth-child(2) li:nth-child(11):before, body ul:nth-child(2) li:nth-child(11):after {
-webkit-animation-delay: -0.171875s;
animation-delay: -0.171875s;
}
body ul:nth-child(2) li:nth-child(12) {
-webkit-transform: rotate(21.2786448327deg);
transform: rotate(21.2786448327deg);
}
body ul:nth-child(2) li:nth-child(12):before, body ul:nth-child(2) li:nth-child(12):after {
-webkit-animation-delay: -0.1875s;
animation-delay: -0.1875s;
}
body ul:nth-child(2) li:nth-child(13) {
-webkit-transform: rotate(20.4372963666deg);
transform: rotate(20.4372963666deg);
}
body ul:nth-child(2) li:nth-child(13):before, body ul:nth-child(2) li:nth-child(13):after {
-webkit-animation-delay: -0.203125s;
animation-delay: -0.203125s;
}
body ul:nth-child(2) li:nth-child(14) {
-webkit-transform: rotate(19.1844461937deg);
transform: rotate(19.1844461937deg);
}
body ul:nth-child(2) li:nth-child(14):before, body ul:nth-child(2) li:nth-child(14):after {
-webkit-animation-delay: -0.21875s;
animation-delay: -0.21875s;
}
body ul:nth-child(2) li:nth-child(15) {
-webkit-transform: rotate(17.5460528803deg);
transform: rotate(17.5460528803deg);
}
body ul:nth-child(2) li:nth-child(15):before, body ul:nth-child(2) li:nth-child(15):after {
-webkit-animation-delay: -0.234375s;
animation-delay: -0.234375s;
}
body ul:nth-child(2) li:nth-child(16) {
-webkit-transform: rotate(15.5563491861deg);
transform: rotate(15.5563491861deg);
}
body ul:nth-child(2) li:nth-child(16):before, body ul:nth-child(2) li:nth-child(16):after {
-webkit-animation-delay: -0.25s;
animation-delay: -0.25s;
}
body ul:nth-child(2) li:nth-child(17) {
-webkit-transform: rotate(13.2571039995deg);
transform: rotate(13.2571039995deg);
}
body ul:nth-child(2) li:nth-child(17):before, body ul:nth-child(2) li:nth-child(17):after {
-webkit-animation-delay: -0.265625s;
animation-delay: -0.265625s;
}
body ul:nth-child(2) li:nth-child(18) {
-webkit-transform: rotate(10.6967213048deg);
transform: rotate(10.6967213048deg);
}
body ul:nth-child(2) li:nth-child(18):before, body ul:nth-child(2) li:nth-child(18):after {
-webkit-animation-delay: -0.28125s;
animation-delay: -0.28125s;
}
body ul:nth-child(2) li:nth-child(19) {
-webkit-transform: rotate(7.9291956768deg);
transform: rotate(7.9291956768deg);
}
body ul:nth-child(2) li:nth-child(19):before, body ul:nth-child(2) li:nth-child(19):after {
-webkit-animation-delay: -0.296875s;
animation-delay: -0.296875s;
}
body ul:nth-child(2) li:nth-child(20) {
-webkit-transform: rotate(5.0129469064deg);
transform: rotate(5.0129469064deg);
}
body ul:nth-child(2) li:nth-child(20):before, body ul:nth-child(2) li:nth-child(20):after {
-webkit-animation-delay: -0.3125s;
animation-delay: -0.3125s;
}
body ul:nth-child(2) li:nth-child(21) {
-webkit-transform: rotate(2.0095589751deg);
transform: rotate(2.0095589751deg);
}
body ul:nth-child(2) li:nth-child(21):before, body ul:nth-child(2) li:nth-child(21):after {
-webkit-animation-delay: -0.328125s;
animation-delay: -0.328125s;
}
body ul:nth-child(2) li:nth-child(22) {
-webkit-transform: rotate(-1.0175493325deg);
transform: rotate(-1.0175493325deg);
}
body ul:nth-child(2) li:nth-child(22):before, body ul:nth-child(2) li:nth-child(22):after {
-webkit-animation-delay: -0.34375s;
animation-delay: -0.34375s;
}
body ul:nth-child(2) li:nth-child(23) {
-webkit-transform: rotate(-4.00449341deg);
transform: rotate(-4.00449341deg);
}
body ul:nth-child(2) li:nth-child(23):before, body ul:nth-child(2) li:nth-child(23):after {
-webkit-animation-delay: -0.359375s;
animation-delay: -0.359375s;
}
body ul:nth-child(2) li:nth-child(24) {
-webkit-transform: rotate(-6.8883017795deg);
transform: rotate(-6.8883017795deg);
}
body ul:nth-child(2) li:nth-child(24):before, body ul:nth-child(2) li:nth-child(24):after {
-webkit-animation-delay: -0.375s;
animation-delay: -0.375s;
}
body ul:nth-child(2) li:nth-child(25) {
-webkit-transform: rotate(-9.6082751692deg);
transform: rotate(-9.6082751692deg);
}
body ul:nth-child(2) li:nth-child(25):before, body ul:nth-child(2) li:nth-child(25):after {
-webkit-animation-delay: -0.390625s;
animation-delay: -0.390625s;
}
body ul:nth-child(2) li:nth-child(26) {
-webkit-transform: rotate(-12.1072963093deg);
transform: rotate(-12.1072963093deg);
}
body ul:nth-child(2) li:nth-child(26):before, body ul:nth-child(2) li:nth-child(26):after {
-webkit-animation-delay: -0.40625s;
animation-delay: -0.40625s;
}
body ul:nth-child(2) li:nth-child(27) {
-webkit-transform: rotate(-14.3330621011deg);
transform: rotate(-14.3330621011deg);
}
body ul:nth-child(2) li:nth-child(27):before, body ul:nth-child(2) li:nth-child(27):after {
-webkit-animation-delay: -0.421875s;
animation-delay: -0.421875s;
}
body ul:nth-child(2) li:nth-child(28) {
-webkit-transform: rotate(-16.2392114956deg);
transform: rotate(-16.2392114956deg);
}
body ul:nth-child(2) li:nth-child(28):before, body ul:nth-child(2) li:nth-child(28):after {
-webkit-animation-delay: -0.4375s;
animation-delay: -0.4375s;
}
body ul:nth-child(2) li:nth-child(29) {
-webkit-transform: rotate(-17.7863246755deg);
transform: rotate(-17.7863246755deg);
}
body ul:nth-child(2) li:nth-child(29):before, body ul:nth-child(2) li:nth-child(29):after {
-webkit-animation-delay: -0.453125s;
animation-delay: -0.453125s;
}
body ul:nth-child(2) li:nth-child(30) {
-webkit-transform: rotate(-18.9427719158deg);
transform: rotate(-18.9427719158deg);
}
body ul:nth-child(2) li:nth-child(30):before, body ul:nth-child(2) li:nth-child(30):after {
-webkit-animation-delay: -0.46875s;
animation-delay: -0.46875s;
}
body ul:nth-child(2) li:nth-child(31) {
-webkit-transform: rotate(-19.6853937515deg);
transform: rotate(-19.6853937515deg);
}
body ul:nth-child(2) li:nth-child(31):before, body ul:nth-child(2) li:nth-child(31):after {
-webkit-animation-delay: -0.484375s;
animation-delay: -0.484375s;
}
body ul:nth-child(2) li:nth-child(32) {
-webkit-transform: rotate(-19.9999977238deg);
transform: rotate(-19.9999977238deg);
}
body ul:nth-child(2) li:nth-child(32):before, body ul:nth-child(2) li:nth-child(32):after {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
body ul:nth-child(2) li:nth-child(33) {
-webkit-transform: rotate(-19.8816609391deg);
transform: rotate(-19.8816609391deg);
}
body ul:nth-child(2) li:nth-child(33):before, body ul:nth-child(2) li:nth-child(33):after {
-webkit-animation-delay: -0.515625s;
animation-delay: -0.515625s;
}
body ul:nth-child(2) li:nth-child(34) {
-webkit-transform: rotate(-19.3348318591deg);
transform: rotate(-19.3348318591deg);
}
body ul:nth-child(2) li:nth-child(34):before, body ul:nth-child(2) li:nth-child(34):after {
-webkit-animation-delay: -0.53125s;
animation-delay: -0.53125s;
}
body ul:nth-child(2) li:nth-child(35) {
-webkit-transform: rotate(-18.3732290586deg);
transform: rotate(-18.3732290586deg);
}
body ul:nth-child(2) li:nth-child(35):before, body ul:nth-child(2) li:nth-child(35):after {
-webkit-animation-delay: -0.546875s;
animation-delay: -0.546875s;
}
body ul:nth-child(2) li:nth-child(36) {
-webkit-transform: rotate(-17.0195390385deg);
transform: rotate(-17.0195390385deg);
}
body ul:nth-child(2) li:nth-child(36):before, body ul:nth-child(2) li:nth-child(36):after {
-webkit-animation-delay: -0.5625s;
animation-delay: -0.5625s;
}
body ul:nth-child(2) li:nth-child(37) {
-webkit-transform: rotate(-15.3049194574deg);
transform: rotate(-15.3049194574deg);
}
body ul:nth-child(2) li:nth-child(37):before, body ul:nth-child(2) li:nth-child(37):after {
-webkit-animation-delay: -0.578125s;
animation-delay: -0.578125s;
}
body ul:nth-child(2) li:nth-child(38) {
-webkit-transform: rotate(-13.268318249deg);
transform: rotate(-13.268318249deg);
}
body ul:nth-child(2) li:nth-child(38):before, body ul:nth-child(2) li:nth-child(38):after {
-webkit-animation-delay: -0.59375s;
animation-delay: -0.59375s;
}
body ul:nth-child(2) li:nth-child(39) {
-webkit-transform: rotate(-10.9556229005deg);
transform: rotate(-10.9556229005deg);
}
body ul:nth-child(2) li:nth-child(39):before, body ul:nth-child(2) li:nth-child(39):after {
-webkit-animation-delay: -0.609375s;
animation-delay: -0.609375s;
}
body ul:nth-child(2) li:nth-child(40) {
-webkit-transform: rotate(-8.4186575895deg);
transform: rotate(-8.4186575895deg);
}
body ul:nth-child(2) li:nth-child(40):before, body ul:nth-child(2) li:nth-child(40):after {
-webkit-animation-delay: -0.625s;
animation-delay: -0.625s;
}
body ul:nth-child(2) li:nth-child(41) {
-webkit-transform: rotate(-5.7140487687deg);
transform: rotate(-5.7140487687deg);
}
body ul:nth-child(2) li:nth-child(41):before, body ul:nth-child(2) li:nth-child(41):after {
-webkit-animation-delay: -0.640625s;
animation-delay: -0.640625s;
}
body ul:nth-child(2) li:nth-child(42) {
-webkit-transform: rotate(-2.9019820558deg);
transform: rotate(-2.9019820558deg);
}
body ul:nth-child(2) li:nth-child(42):before, body ul:nth-child(2) li:nth-child(42):after {
-webkit-animation-delay: -0.65625s;
animation-delay: -0.65625s;
}
body ul:nth-child(2) li:nth-child(43) {
-webkit-transform: rotate(-0.0468520018deg);
transform: rotate(-0.0468520018deg);
}
body ul:nth-child(2) li:nth-child(43):before, body ul:nth-child(2) li:nth-child(43):after {
-webkit-animation-delay: -0.671875s;
animatio.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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