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