css实现小鸟展翅飞翔慢动作切换动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现小鸟展翅飞翔慢动作切换动画效果代码，点右下角slow motion试试

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
:root {
	--bird-color: #000;
	--speed: 0.25s;
	--delay: 0.125s;
	--speed-stable: 7.5s;
	--swing-flower: 5s;
}

input#slow-motion:checked ~ .bird {
	--speed: 10s;
	--delay: 5s;
	--speed-stable: 300s;
}

input#slow-motion:checked ~ .flower {
	--swing-flower: 200s;
}

body {
	margin: 0;
	padding: 0;
	background: radial-gradient(#ffffff 15%, #2196f3);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	perspective: 150vmin;
	perspective-origin: bottom;
}

body *,
*:before,
*:after {
	box-sizing: border-box;
	position: absolute;
}

.bird {
	width: 60vmin;
	height: 60vmin;
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	background-size: cover;
	animation: stable var(--speed-stable) ease-in-out infinite alternate;
	left: 37vmin;
}

@keyframes stable {
	0% {
		transform: translate3d(0vmin, 0.05vmin, 0vmin) rotate(1deg);
	}
	10% {
		transform: translate3d(10.05vmin, 0vmin, 0.05vmin) rotate(5deg);
	}
	20% {
		transform: translate3d(25vmin, 0.05vmin, 0vmin) rotate(3deg);
	}
	30% {
		transform: translate3d(0vmin, 0vmin, 0vmin);
	}
	40% {
		transform: translate3d(0.05vmin, 0.05vmin, 0vmin) rotate(-0.75deg);
	}
	50% {
		transform: translate3d(0vmin, 0.05vmin, 0.05vmin) rotate(0.25deg);
	}
	60% {
		transform: translate3d(0.05vmin, 0vmin, 0vmin) rotate(0.85deg);
	}
	70% {
		transform: translate3d(0vmin, 0vmin, 0.05vmin) rotate(0.25deg);
	}
	80% {
		transform: translate3d(-0.05vmin, -0.05vmin, 0vmin) rotate(-0.35deg);
	}
	90% {
		transform: translate3d(0vmin, 0vmin, 0.05vmin) rotate(0.35deg);
	}
	100% {
		transform: translate3d(0.05vmin, 0.05vmin, -0.05vmin) rotate(-0.4deg);
	}
}

.beak {
	width: 16vmin;
	height: 1vmin;
	background: var(--bird-color);
	top: 17vmin;
	left: 0.5vmin;
	border-radius: 100% 10% 0 0;
}

.beak:before {
	content: "";
	width: 14vmin;
	height: 1.75vmin;
	border-radius: 100% 100% 0 0;
	left: 1.75vmin;
	top: -0.25vmin;
	border-top: 0.75vmin solid black;
	transform: rotate(-1deg);
}

.beak:after {
	content: "";
	width: 8vmin;
	height: 5.75vmin;
	border-radius: 120% 100% 0 0;
	left: 9.5vmin;
	top: 1.2vmin;
	transform: rotate(42deg);
	border-top: 1vmin solid #000000;
	border-left: 0.5vmin solid transparent;
	border-right: 0.5vmin solid transparent;
}

.beak span {
	background: var(--bird-color);
	width: 5vmin;
	height: 1vmin;
	left: 9.9vmin;
	transform: rotate(12deg);
	top: 0.5vmin;
	border-radius: 100% 0 0 0;
}

.beak span:before {
	content: "";
	background: var(--bird-color);
	width: 4vmin;
	height: 1vmin;
	left: 5.25vmin;
	transform: rotate(40deg);
	top: 2vmin;
}

.beak span:after {
	content: "";
	background: black;
	width: 3.75vmin;
	height: 2.25vmin;
	left: 4vmin;
	transform: rotate(27deg);
	top: -0.25vmin;
	border-radius: 0.2vmin 0 0 0;
}

.head {
	background: var(--bird-color);
	width: 10vmin;
	height: 7vmin;
	border-radius: 45% 100% 10% 10%;
	left: 16vmin;
	top: 14.55vmin;
	transform: rotate(-20deg);
}

.head:before {
	content: "";
	width: 2vmin;
	height: 12vmin;
	background: var(--bird-color);
	left: 9vmin;
	top: 7vmin;
	transform: rotate(-10deg);
	border-radius: 10%;
}

.body {
	background: var(--bird-color);
	width: 13vmin;
	height: 23vmin;
	border-radius: 150% 15% 80% 100%;
	left: 22vmin;
	top: 23vmin;
	transform: rotate(-50deg);
}

.body:before {
	background: var(--bird-color);
	width: 10vmin;
	height: 12vmin;
	content: "";
	transform: rotate(28deg);
	top: -5vmin;
	left: 6vmin;
	border-radius: 5%;
}

.body:after {
	background: var(--bird-color);
	width: 1vmin;
	height: 10vmin;
	content: "";
	transform: rotate(34.5deg);
	top: -5vmin;
	left: 5.25vmin;
	border-radius: 5%;
}

.wing {
	width: 15vmin;
	height: 30vmin;
	transform: rotateX(90deg) translateY(15vmin) translateZ(-20vmin)
		translateX(20vmin) rotateY(-90deg);
	border-radius: 0 0 0 100%;
	transform-style: preserve-3d;
}

.wing + .wing {
	transform: rotateZ(270deg) rotateX(-90deg) translateZ(20vmin)
		translateY(15vmin) translateX(-20vmin);
	border-radius: 100% 0 0 0;
}

.wing + .wing .bone {
	animation-delay: var(--delay);
}

.bone {
	background: var(--bird-color);
	width: 2vmin;
	height: 30vmin;
	right: 0;
	border-radius: 0 0 25% 100%;
	transform: rotateY(0deg) rotateX(0deg);
	transform-origin: top right;
	animation: wing-move var(--speed) linear 0s infinite;
	border-right: 1px solid #333;
}

@keyframes wing-move {
	0% {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	20% {
		transform: rotateX(-70deg) rotateY(20deg) rotateZ(10deg);
	}
	25% {
		transform: rotateX(-70deg) rotateY(-30deg) rotateZ(0deg);
	}
	50% {
		transform: rotateX(0deg) rotateY(-30deg) rotateZ(10deg);
	}
	70% {
		transform: rotateX(70deg) rotateY(0deg) rotateZ(10deg);
	}
	75% {
		transform: rotateX(70deg) rotateY(30deg) rotateZ(0deg);
	}
}

.pens {
	background: var(--bird-color);
	width: 5vmin;
	height: 29vmin;
	left: -4vmin;
	border-radius: 0 0 0 100%;
	border-bottom: 1px solid #333;
}

.pens:before {
	content: &qu.........完整代码请登录后点击上方下载按钮下载查看