div+css实现夜晚花朵生长盛开动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现夜晚花朵生长盛开动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--dark-color: #000;
}
body {
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 100vh;
background-color: var(--dark-color);
overflow: hidden;
perspective: 1000px;
}
.night {
position: fixed;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100%;
height: 100%;
filter: blur(0.1vmin);
background-image: radial-gradient(ellipse at top, transparent 0%, var(--dark-color)), radial-gradient(ellipse at bottom, var(--dark-color), rgba(145, 233, 255, 0.2)), repeating-linear-gradient(220deg, black 0px, black 19px, transparent 19px, transparent 22px), repeating-linear-gradient(189deg, black 0px, black 19px, transparent 19px, transparent 22px), repeating-linear-gradient(148deg, black 0px, black 19px, transparent 19px, transparent 22px), linear-gradient(90deg, #00fffa, #f0f0f0);
}
.flowers {
position: relative;
transform: scale(0.9);
}
.flower {
position: absolute;
bottom: 10vmin;
transform-origin: bottom center;
z-index: 10;
--fl-speed: 0.8s;
}
.flower--1 {
animation: moving-flower-1 4s linear infinite;
}
.flower--1 .flower__line {
height: 70vmin;
animation-delay: 0.3s;
}
.flower--1 .flower__line__leaf--1 {
animation: blooming-leaf-right var(--fl-speed) 1.6s backwards;
}
.flower--1 .flower__line__leaf--2 {
animation: blooming-leaf-right var(--fl-speed) 1.4s backwards;
}
.flower--1 .flower__line__leaf--3 {
animation: blooming-leaf-left var(--fl-speed) 1.2s backwards;
}
.flower--1 .flower__line__leaf--4 {
animation: blooming-leaf-left var(--fl-speed) 1s backwards;
}
.flower--1 .flower__line__leaf--5 {
animation: blooming-leaf-right var(--fl-speed) 1.8s backwards;
}
.flower--1 .flower__line__leaf--6 {
animation: blooming-leaf-left var(--fl-speed) 2s backwards;
}
.flower--2 {
left: 50%;
transform: rotate(20deg);
animation: moving-flower-2 4s linear infinite;
}
.flower--2 .flower__line {
height: 60vmin;
animation-delay: 0.6s;
}
.flower--2 .flower__line__leaf--1 {
animation: blooming-leaf-right var(--fl-speed) 1.9s backwards;
}
.flower--2 .flower__line__leaf--2 {
animation: blooming-leaf-right var(--fl-speed) 1.7s backwards;
}
.flower--2 .flower__line__leaf--3 {
animation: blooming-leaf-left var(--fl-speed) 1.5s backwards;
}
.flower--2 .flower__line__leaf--4 {
animation: blooming-leaf-left var(--fl-speed) 1.3s backwards;
}
.flower--3 {
left: 50%;
transform: rotate(-15deg);
animation: moving-flower-3 4s linear infinite;
}
.flower--3 .flower__line {
animation-delay: 0.9s;
}
.flower--3 .flower__line__leaf--1 {
animation: blooming-leaf-right var(--fl-speed) 2.5s backwards;
}
.flower--3 .flower__line__leaf--2 {
animation: blooming-leaf-right var(--fl-speed) 2.3s backwards;
}
.flower--3 .flower__line__leaf--3 {
animation: blooming-leaf-left var(--fl-speed) 2.1s backwards;
}
.flower--3 .flower__line__leaf--4 {
animation: blooming-leaf-left var(--fl-speed) 1.9s backwards;
}
.flower__leafs {
position: relative;
animation: blooming-flower 2s backwards;
}
.flower__leafs--1 {
animation-delay: 1.1s;
}
.flower__leafs--2 {
animation-delay: 1.4s;
}
.flower__leafs--3 {
animation-delay: 1.7s;
}
.flower__leafs::after {
content: "";
position: absolute;
left: 0;
top: 0;
transform: translate(-50%, -100%);
width: 8vmin;
height: 8vmin;
background-color: #6bf0ff;
filter: blur(10vmin);
}
.flower__leaf {
position: absolute;
bottom: 0;
left: 50%;
width: 8vmin;
height: 11vmin;
border-radius: 51% 49% 47% 53%/44% 45% 55% 69%;
background-color: #a7ffee;
background-image: linear-gradient(to top, #54b8aa, #a7ffee);
transform-origin: bottom center;
opacity: 0.9;
box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5);
}
.flower__leaf--1 {
transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg);
}
.flower__leaf--2 {
transform: translate(-50%, -4%) rotateX(40deg);
}
.flower__leaf--3 {
transform: translate(-90%, 0%) rotateY(45deg) rotateX(50deg);
}
.flower__leaf--4 {
width: 8vmin;
height: 8vmin;
transform-origin: bottom left;
border-radius: 4vmin 10vmin 4vmin 4vmin;
transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg);
background-image: linear-gradient(to top, #39c6d6, #a7ffee);
z-index: 1;
opacity: 0.8;
}
.flower__white-circle {
position: absolute;
left: -3.5vmin;
top: -3vmin;
width: 9vmin;
height: 4vmin;
border-radius: 50%;
background-color: #fff;
}
.flower__white-circle::after {
content: "";
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
border-radius: inherit;
background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(112.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(112.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(22.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(22.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(157.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), linear-gradient(90deg, #ffeb12, #ffce00);
}
.flower__line {
height: 55vmin;
width: 1.5vmin;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent, rgba(255, 255, 255, 0.2)), linear-gradient(to top, transparent 10%, #14757a, #39c6d6);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
animation: grow-flower-tree 4s backwards;
}
.flower__line__leaf {
--w: 7vmin;
--h: calc(var(--w).........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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