div+css布局向日葵绽放动画效果代码-html代码-BFW代码库

div+css布局向日葵绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css布局向日葵绽放动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
	padding: 0;

	margin: 0;

	box-sizing: border-box;
}

:root {
	--color-bg: linear-gradient(to top, #00d4ff, #000);

	--line-color: linear-gradient(to left top, #82ff86 20%, #144425, #104e1c);

	--flower-center: radial-gradient(circle, #000, #ff5e00);

	--leaf-color: radial-gradient(circle, #82ff86, #104e1c);

	--petal-color: radial-gradient(circle, #ff5e00, #ffbb00);
}

body {
	background-image: var(--color-bg);

	min-height: 100vh;

	display: flex;

	align-items: flex-end;

	justify-content: center;

	overflow: hidden;
}

.flower_wrapper {
	position: absolute;

	left: 50%;

	bottom: 2vmin;

	animation: moving-flower-1 4s linear infinite;
}

.flower_stem {
	width: 2vmin;

	height: 65vmin;

	background-image: var(--line-color);

	border-radius: 4vmin;

	animation-delay: 0.3s;
}

.flower_center {
	position: absolute;

	top: 0vmin;

	left: 50%;

	z-index: 5;

	transform: translateX(-50%) rotate(-10deg);

	width: 20vmin;

	height: 20vmin;

	border-radius: 50%;

	background: var(--flower-center);

	animation: open-flower-middle 2s 0.4s backwards;
}

.flower_petal {
	position: absolute;

	left: 50%;

	z-index: 3;

	bottom: 55vmin;

	transform: translateX(-50%);

	width: 7vmin;

	height: 17vmin;

	height: 20vmin;

	background: var(--petal-color);

	clip-path: ellipse(50%.........完整代码请登录后点击上方下载按钮下载查看