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

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

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