div+css实现卡通乌龟在水中游动动画效果代码-html代码-BFW代码库

div+css实现卡通乌龟在水中游动动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现卡通乌龟在水中游动动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    :root {
	--green1: #bbab31;
	--green2: #978928;
	--green3: #695415;
	--brown1: #58331a;
	--brown2: #542c12;
	--brown3: #2b160f;
}

body {
	margin: 0;
	padding: 0;
	background: linear-gradient(
		to top,
		rgba(0, 25, 45, 1) 0%,
		rgba(14, 71, 117, 1) 35%,
		rgba(26, 126, 174, 1) 70%,
		rgba(62, 168, 220, 1) 100%
	);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
}

body *,
*:before,
*:after {
	box-sizing: border-box;
	position: absolute;
	margin: 0;
	padding: 0;
	box-sizing: inherit;
	transition: opacity 0.5s ease 0s;
}

.water {
	background: linear-gradient(
		to top,
		rgba(0, 25, 45, 1) 0%,
		rgba(14, 71, 117, 1) 35%,
		rgba(26, 126, 174, 1) 70%,
		rgba(62, 168, 220, 1) 100%
	);
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	position: relative;
}

.water:before,
body:after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	background: repeating-linear-gradient(
		250deg,
		#03a9f415 45%,
		#03a9f420 47%,
		#2196f330 50%,
		#03a9f420 53%,
		#03a9f415 55%
	);
	background-size: 1vmin;
	animation: ocean 15s linear 0s infinite;
	transition: opacity 0.5s ease 0s;
	filter: blur(1px);
}

.water:before,
body:hover:after {
	opacity: 0;
	transition: opacity 0.5s ease 0s;
}

body:hover .water:before {
	opacity: 1;
	transition: opacity 0.5s ease 0s;
}

body:hover .bubbles {
	z-index: 0;
}

@keyframes ocean {
	100% {
		background-position: 0 100vmin;
	}
}

.turtle {
	width: 70vmin;
	height: 60vmin;
	animation: swim 5s ease-in-out 0s infinite;
}

@keyframes swim {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-3vmin);
	}
	100% {
		transform: translateY(0);
	}
}

.turtle > div {
	position: absolute;
}

.body {
	width: 40vmin;
	height: 33vmin;
	border-radius: 50vmin;
	top: 17vmin;
	left: 15vmin;
	border: 1.75vmin solid var(--brown3);
	box-sizing: border-box;
	clip-path: ellipse(50% 50% at 50% 50%);
	transform: rotate(90deg);
	background: 
		conic-gradient(
			at 0.5vmin 6.9324vmin,
			transparent 270deg,
			var(--brown3) 0deg
		),
		conic-gradient(
			at calc(100% - 0.5vmin) 6.9324vmin,
			var(--brown3) 90deg,
			transpa.........完整代码请登录后点击上方下载按钮下载查看