css实现一个可爱爱心狗狗效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现一个可爱爱心狗狗效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
	background-color: #55BCEE;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-height: 100vh;
	font-size: 1vh;
	color: transparent;
	--bg: #fff;
	--shadow: #ECECEC;
	--border: #212327;
	--nose: #828282;
	--cheek: #F6CAE2;
	--birb: #FAE34D;
	--birb-shadow: #F7D248;
}

.snoopie {
	height: 2em;
	width: 2em;
	background-color: red;
	position: absolute;
}
.snoopie *,
.snoopie *:before,
.snoopie *:after {
	content: '';
	position: absolute;
}
.snoopie .left,
.snoopie .right {
	height: 35em;
	width: 35em;
	border-radius: 50%;
	background-color: var(--bg);
	border: 2em solid var(--border);
	box-sizing: border-box;
	top: -25em;
	left: -26.5em;
}
.snoopie .left:before,
.snoopie .left:after {
	height: 2em;
    width: 26em;
    border: 2em solid;
    border-color: transparent transparent var(--border);
    border-radius: 50%;
    top: 29.4em;
    left: -0.8em;
    transform: rotate(31deg);
	z-index: 1;
}
.snoopie .left:after {
    transform: rotate(-31deg);
    left: 21.8em;
}
.snoopie .right {
	border-left-color: transparent;
	left: -6.5em;
	box-shadow: inset -4em -3em var(--shadow);
}
.snoopie .right:before {
	width: 3em;
	height: 2em;
	border-radius: 50%;
	border: 2em solid;
	border-bottom-color: var(--border);
	top: -3.3em;
    left: 2em;
}
.snoopie .right:after {
	width: 5em;
	height: 2.5em;
	border-radius: 50%;
	border: 3em solid;
	border-bottom-color: var(--bg);
	top: -2.9em;
}
.snoopie .bottom {
	width: 4em;
	height: 2em;
	border-radius: 50%;
	border: 1.4em solid;
	border-bottom-color: var(--border);
    top: 12.7em;
    left: -2.4em;
	z-index: 1;
}
.snoopie .nose {
	height: 7.5em;
	width: 5em;
	border-radius: 50%;
	background-color: var(--border);
    top: -17em;
    left: 15em;
    transform: rotate(50deg);
}
.snoopie .nose:before {
	height: 3em;
	width: 1.5em;
	border-radius: 50%;
	background-color: var(--nose);
	top: 2em;
	left: 1em;
}
.snoopie .nose:after {
    height: 4em;
    width: 2.8em;
    border-radius: 50%;
    background-color: var(--cheek);
    left: -7em;
    top: 22.5em;
    z-index: 3;
    transform: rotate(9deg);
}
.snoopie .ear {
	height: 35em;
    width: 18em;
    left: -21em;
    top: -18em;
    transform: rotate(-57deg);
    border-radius: 150% 50% 50% 80% / 90% 50% 60% 44%;
    overflow: hidden;
}
.snoopie .ear:before {
    height: 40em;
    width: 30em;
    border-radius: 50%;
    background-color: var(--border);
    top: -6em;
    left: -18em;
}
.snoopie .ear:after {
	height: 3em;
    width: 1em;
    border-radius: 50%;
    background-color: #3B3D41;
    left: 2em;
    top: 13em;
    transform: rotate(15deg);
    box-shadow:
    	3em 2em #3B3D41,
    	4em -4.5em 0 0.4em #3B3D41;
}
.snoopie .eyebrow,
.snoopie .eyes {
	width: 4em;
	height: 1em;
	border-radius: 50%;
	border: solid;
	border-width: 1.5em 1em;
	border-top-color: var(--border);
	top: -19em;
    left: -16em;
    transform: rotate(-45deg);
}
.snoopie .eyebrow:before {
	height: 1em;
	width: 1em;
    top: -0.7em;
    left: -0.7em;
	border-radius: 50%;
	background-color: var(--border);
	box-shadow: 4.3em 0em 0 0.01em var(--border);
}
.snoopie .eb-right {
	top: -27em;
    left: -6em;
}
.snoopie .eyes {
	height: 2em;
    top: -19em;
    left: -2em;
}
.snoopie .eyes:before {
    height: 1.1em;
    width: 1.1em;
    top: -0.6em;
    left: -0.6em;
    border-radius: 50%;
    background-color: var(--border);
    box-shadow: 4.1em 0em 0 0.01em var(--border);
}
.snoopie .e-left {
	height: 3.5em;
	width: 6em;
	top: -13em;
    left: -9em;
}
.snoopie .e-left:before {
	top: -0.35em;
    left: -0.3em;
    box-shadow: 5.6em 0em 0 0.01em var(--border);
}
.snoopie .smile {
    height: 8em;
    width: 5em;
    border-radius: 50%;
    border: 1.3em solid;
    border-left-color: var(--border);
    left: -3em;
    top: -6.9em;
    transform: rotate(-65deg);
}
.snoopie .smile:before {
    height: 2em;
    width: 4em;
    border-radius: 50%;
    border: solid;
    border-width: 1.2em 0.5em;
    border-top-color: var(--border);
    left: -2.5em;
    top: -0.5em;
    transform: rotate(20deg);
}
.snoopie .smile:after {
    height: 0.7em;
    width: 0.7em;
    border-radius: 50%;
    background-color: var(--border);
    top: -0.1em;
    left: -1.8em;
    box-shadow: 3.6em 1.4em var(--border);
}
.snoopie .birb {
	width: 20em;
	height: 10em;
	border-radius: 50%;
	background-color: var(--birb);
	border: 2em solid var(--border);
	left: -10.5vh;
    top: 2vh;
    box-shadow: inset 2em -2.5em var(--birb-shadow);
}
.snoopie .birb:before {
    height: 6em;
    width: 16em;
    background-color: var(--birb);
    top: -1em;
    left: 8em;
    transform: rotate(25deg) skewX(-34deg);
}
.snoopie .birb:after {
	height: 4em;
    width: 6em;
    border: solid;
    border-width: 0 1.2em 2em 2em;
    border-color: transparent transparent var(--border);
    border-radius: 50%;
    transform: rotate(-34deg);
    top: -6.4em;
    left: 3em;
}
.snoopie .hairs-circles {
	height: 0;
	width: 0;
	border-radius: 50%;
	border: 3em solid;
	border-color: var(--birb) var(--birb) transparent transparent;
	transform: rotate(28deg);
    top: -2em;
    left: -0.4em;
}
.snoopie .hairs-circles:before {
    height: 5em;
    width: 4.5em;
    background-color: var(--birb);
    border-radius: 1em;
    top: -4.6em;
    left: 2em;
    transform: rotate(3deg) skew(20deg, 10deg);
}
.snoopie .hairs-circles:after {
	height: 0;
	width: 0;
	border-radius: 50%;
	border: solid;
	border-width: 7em 5em;
	border-right-color: var(--birb);
    transform: rotate(-28deg) skewY(-50deg);
    top: -3em;
    left: 2em;
}
.snoopie .hairs {
	height: 2em;
    width: 1em;
    border: solid;
    border-width: 0.4em 1.3em 1.5em 1.4em;
    border-color: transparent var(--border) var(--border) transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    top: -2.6em;
    left: -0.5em;
    transform: rotate(-25deg);
}
.snoopie .hairs:before {
    height: 0.7em;
    width: 0.8em;
    border-radius: 50%;
    background-color: var(--border);
    top: -0.3em;
    left: 0.7em;
}
.snoopie .hairs:after {
    height: 2.4em;
    width: 1.8em;
    border-radius: 50%;
    border: 1em solid;
    background-color: var(--border);
    top: 11.2em;
    .........完整代码请登录后点击上方下载按钮下载查看