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;
	tr.........完整代码请登录后点击上方下载按钮下载查看