css实现一个瓶中萤火虫求救效果代码-html代码-BFW代码库

css实现一个瓶中萤火虫求救效果代码

代码语言：html

所属分类：动画

代码描述：css实现一个瓶中萤火虫求救效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap");

:root {
	--darkgrey: #3b3b3b; /* background */
	--lightgrey: #768c90; /* jar */
	--lightestgrey: #dcdedf; /* lid */
	--red: #c7535d; /* body */
	--yellow: #fec14f; /* body */
	--nearlyblack: #3b3b3b; /* wings, head */
	--lightyellow: #ffeac4; /* glow */
	--grey: #767676; /* wings. head. */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background: var(--darkgrey);
	overflow-y: hidden;
}

.container {
	position: relative;
	width: 80vmin;
	height: 80vmin;
}

.jar {
	position: absolute;
	width: 60vmin;
	height: 50vmin;
	background: var(--lightgrey);
	border-bottom-left-radius: 10vmin;
	border-bottom-right-radius: 10vmin;
	top: 30vmin;
	left: 10vmin;
}

.jar:before {
	position: absolute;
	content: "";
	border-radius: 25% 75% 0% 100% / 100% 0% 100% 0%;
	background: var(--lightgrey);
	width: 31vmin;
	height: 20vmin;
	top: -19vmin;
}

.jar:after {
	position: absolute;
	content: "";
	border-radius: 25% 75% 0% 100% / 100% 0% 100% 0%;
	background: var(--lightgrey);
	width: 31vmin;
	height: 20vmin;
	top: -19vmin;
	left: 29vmin;
	transform: scaleX(-1);
}

.jartop {
	position: absolute;
	width: 48vmin;
	height: 20vmin;
	background: var(--lightgrey);
	top: -21vmin;
	left: 6vmin;
	z-index: 1;
}

.jarlid {
	position: absolute;
	width: 55vmin;
	height: 6vmin;
	background: var(--lightestgrey);
	border-radius: 10vmin;
	top: -28vmin;
	left: 2.3vmin;
	transform-origin: 100% 100%;
}

.wording {
	position: absolute;
	left: 10vmin;
	font-family: "Gloria Hallelujah", cursive;
	font-size: 5vmin;
	color: var(--nearlyblack);
	user-select: none;
}

.help {
	transform: rotate(-15deg);
	opacity: 1;
	transition: opacity 2s;
	transition-delay: 1s;
}

.thanks {
	transform: rotate(15deg);
	opacity: 0;
	left: 15vmin;
	top: 10vmin;
}

.firefly {
	position: absolute;
	width: 0vmin;
	height: 0vmin;
	left: 10vmin;
	top: -5vmin;
	z-index: 1;
}

.body {
	position: absolute;
	width: 12vmin;
	height: 10vmin;
	background: var(--red);
	z-index: 1;
	left: 14vmin;
	top: 15vmin;
	z-index: 1;
}

.bodybottom {
	position: absolute;
	width: 12vmin;
	height: 8vmin;
	background: var(--yellow);
	top: 9vmin;
	border-radius: 0 0 10vmin 10vmin;
	z-index: -1;
}

.wing {
	position: absolute;
	background: var(--nearlyblack);
	border-radius: 50%;
	width: 25vmin;
	height: 9.5vmin;
	left: -5vmin;
	top: 7vmin;
	transform: rotate(-45deg);
	z-index: 3;
	transform-origin: 100% 50%;
}

/* right wing */
.wing-right {
	position: absolute;
	content: "";
	background: var(--nearlyblack);
	width: 25vmin;
	height: 9.5vmin;
	transform: rotate(45deg);
	left: 20vmin;
	top: 7vmin;
	border-radius: 50%;
	transform-origin: 0% 50%;
}

.head {
	position: absolute;
	width: 8vmin;
	height: 8vmin;
	border-radius: 50%;
	background: var(--nearlyblack);
	left: 16vmin;
	top: 4vmin;
	z-index: 2;
}

/* right antenna */
.head:before {
	position: absolute;
	content: "";
	width: 6vmin;
	height: 6vmin;
	border: 0.6vmin solid;
	border-radius: 50%;
	border-color: var(--nearlyblack) transparent transparent transparent;
	left: 5vmin;
	top: -2vmin;
	tran.........完整代码请登录后点击上方下载按钮下载查看