css布局实现一个猎犬猎奔跑效果代码-html代码-BFW代码库

css布局实现一个猎犬猎奔跑效果代码

代码语言：html

代码描述：css布局实现一个猎犬猎奔跑效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
	--brown1: #f0e5df;
	--brown2: #d8c6ba;
	--brown3: #c5ab9e;
	--brown4: #944328;
}

*:before,
*:after {
	position: absolute;
	content: "";
}

body {
	margin: 0;
	padding: 0;
	background: linear-gradient(180deg, #178ce8, #bfe2ff 50%, transparent 50%),
		linear-gradient(
			to top,
			#0a190b 0%,
			#255226 18%,
			#8bc34a 49%,
			#1e6f20b3 50%,
			transparent 50%
		);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	perspective: 100vmin;
}

body *,
*:before,
*:after {
	box-sizing: border-box;
	position: absolute;
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

.dog {
	width: 80vmin;
	height: 60vmin; /*
    background: url(./pointer2.jpg) no-repeat center center;
    background-size: cover;
	transform: scale(1.75);*/
}

.dog div,
.dog span,
.dog *:before,
.dog *:after {
	background: var(--brown1);
}

.dog.shadow {
	filter: brightness(0) drop-shadow(0px 0px 2px black)
		drop-shadow(0px 0px 2px black);
	transform: rotateX(65deg) rotateZ(-1deg)
		translate3d(-9.5vmin, 4.75vmin, -10vmin) scale3d(0.82, 0.85, 1) skewX(25deg);
	transform-style: preserve-3d;
	z-index: -2;
	opacity: 0.15;
}

.dog .body {
	width: 25vmin;
	height: 19.5vmin;
	left: 14vmin;
	top: 15.5vmin;
	border-radius: 0 1vmin 10vmin 12vmin;
	transform: rotate(6deg);
	background: radial-gradient(
			ellipse at 2.53% 3%,
			var(--brown4) 0.15vmin,
			transparent 0.2vmin
		),
		radial-gradient(ellipse at 2% 2%, var(--brown4) 0.2vmin, transparent 0.25vmin),
		radial-gradient(
			circle at 21% 37%,
			var(--brown4) 0.2vmin,
			transparent 0.25vmin
		),
		radial-gradient(
			circle at 21% 38%,
			var(--brown4) 0.25vmin,
			transparent 0.3vmin
		),
		radial-gradient(
			ellipse at 16% 57%,
			var(--brown4) 0.25vmin,
			transparent 0.35vmin
		),
		radial-gradient(
			circle at 13% 33%,
			var(--brown4) 0.2vmin,
			transparent 0.275vmin
		),
		radial-gradient(
			ellipse at 51% 95%,
			var(--brown4) 0.2vmin,
			transparent 0.25vmin
		),
		radial-gradient(
			ellipse at 36% 69%,
			var(--brown4) 0.25vmin,
			transparent 0.3vmin
		),
		radial-gradient(
			ellipse at 42% 85%,
			var(--brown4) 0.15vmin,
			transparent 0.2vmin
		),
		radial-gradient(
			ellipse at 38% 25%,
			var(--brown4) 0.2vmin,
			transparent 0.25vmin
		),
		radial-gradient(
			ellipse at 42% 49%,
			var(--brown4) 0.3vmin,
			transparent 0.35vmin
		),
		var(--brown1) !important;
}

.dog .body:before {
	width: 10vmin;
	height: 4vmin;
	transform: rotate(16deg) translate(3vmin, -2vmin);
}

.dog .body:after {
	background: radial-gradient(
			ellipse at 44% 36%,
			var(--brown4) 0.3vmin,
			transparent 0.5vmin
		),
		radial-gradient(
			ellipse at 43% 40%,
			var(--brown4) 0.5vmin,
			transparent 0.65vmin
		),
		var(--brown1) !important;
	width: 14vmin;
	height: 4vmin;
	transform: rotate(-34deg) translate(7vmin, 18.75vmin);
	border-bottom-left-radius: 3vmin;
}

.dog .body span {
	background: radial-gradient(
			circle at 31.45% 15.5%,
			var(--brown4) 0.175vmin,
			transparent 0.225vmin
		),
		radial-gradient(
			ellipse at 51% 14%,
			var(--brown4) 0.2vmin,
			transparent 0.3vmin
		),
		radial-gradient(circle at 32% 14%, var(--brown4) 0.2vmin, transparent 0.3vmin),
		radial-gradient(
			ellipse at 40% 36%,
			var(--brown4) 0.25vmin,
			transparent 0.35vmin
		),
		radial-gradient(circle at 64% 33%, var(--brown4) 14%, transparent 14.5%),
		radial-gr.........完整代码请登录后点击上方下载按钮下载查看