【CSS画图】旋转狗头

最新推荐文章于 2024-07-16 17:18:30 发布

蒲公英想养花

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量357

点赞数 4

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_37604640/article/details/124746797

版权

css css3 html

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

HTML代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/dog.css"/>
		<title>画一个狗头</title>
	</head>
	<body>
		<div class="box">
			<div class="head"></div>
			<div class="ear l-ear"></div>
			<div class="ear lb-ear"></div>
			<div class="ear r-ear"></div>
			<div class="ear rb-ear"></div>
			<div class="eyebrow l-eb"></div>
			<div class="eyebrow r-eb"></div>
			<div class="eye l-eye">
				<div class="eyeball"></div>
			</div>
			<div class="eye r-eye">
				<div class="eyeball"></div>
			</div>
			<div class="nose"></div>
			<div class="mouse-up"></div>
			<div class="mouse"></div>
			<div class="mousebg"></div>
			<div class="mustache">
				<div class="mm mm1"></div>
				<div class="mm mm2"></div>
				<div class="mm mm3"></div>
			</div>
			<div class="mustache" style="left: 216px;">
				<div class="mm mm1"></div>
				<div class="mm mm2"></div>
				<div class="mm mm3"></div>
			</div>
		</div>
	</body>
</html>

CSS代码块

.box {
	width: 400px;
	height: 400px;
	margin: 100px auto 0;
	/*background: #fcc;*/
	/*border: 2px solid #fcc;*/
	position: relative;
	/*animation: myrotate linear 3s infinite;
    -webkit-animation: myrotate linear 3s infinite; /* Safari 与 Chrome */*/
}

@keyframes myrotate
{
    0% {transform: rotate(0deg);}
    25% {transform: rotate(90deg);}
    50% {transform: rotate(180deg);}
    75% {transform: rotate(270deg);}
    100% {transform: rotate(360deg);}
}
 
@-webkit-keyframes myrotate /* Safari 与 Chrome */
{
    0% {transform: rotate(0deg);}
    25% {transform: rotate(90deg);}
    50% {transform: rotate(180deg);}
    75% {transform: rotate(270deg);}
    100% {transform: rotate(360deg);}
}

.head {
	width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    border: 4px solid #653620;
    border-radius: 50%;
    background: #ffef81;
    top: 12%;
}

.ear {
	width: 0;
    height: 0;
    position: relative;
    border: 80px solid transparent;
    /* transform: rotate(
37deg
); */
    /* border-radius: 112% 600%; */
    top: -195px;
    left: 65px;
    border-left-color: #ffef81;
}

.l-ear {
	top: -265px;
    z-index: 2;
    border-width: 48px;
    left: 69px;
}

.lb-ear {
	top: -372px;
    border-left-color: #653620;
    z-index: 1;
}

.r-ear {
	top: -520px;
    z-index: 2;
    border-width: 48px;
    left: 241px;
    transform: rotate(180deg);
}

.rb-ear {
	top: -628px;
    border-left-color: #653620;
    z-index: 1;
    transform: rotate(180deg);
    left: 182px;
}

.eyebrow {
	width: 40px;
	height: 40px;
	z-index: 4;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	left: 300px;
	top: 106px;
}

.l-eb {
	left: 116px;
}


.r-eb {
	left: 197px;
}

.eye {
	width: 79px;
    height: 38px;
    z-index: 4;
    position: absolute;
    border: 5px solid #653620;
    border-radius: 50%;
    top: 156px;
    background: #fff;
    padding-right: 4px;
}

.eyeball {
	width: 36px;
    height: 36px;
    background: #5d321f;
    border-radius: 50%;
    float: right;
}

.l-eye {
	left: 65px;
}

.r-eye {
	left: 200px;
}

.nose {
	width: 50px;
    height: 40px;
    z-index: 5;
    background: #5d321f;
    border-radius: 53%;
    position: absolute;
    left: 150px;
    top: 217px;
}

.mouse-up {
	width: 5px;
    height: 27px;
    z-index: 5;
    background: #5d321f;
    position: absolute;
    left: 173px;
    top: 257px;
}

.mouse {
	width: 65px;
    height: 6px;
    z-index: 5;
    background: #5d321f;
    position: absolute;
    left: 144px;
    top: 280px;
    border-radius: 4px;
}

.mousebg {
	width: 170px;
    height: 119px;
    z-index: 4;
    background: #fff;
    border-radius: 53%;
    position: absolute;
    left: 98px;
    top: 208px;
}

.mustache {
	position: absolute;
    z-index: 5;
    left: 112px;
    height: 200px;
    top: 245px;
}

.mm {
	width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #463f11;
    position: relative;
    left: 10px;
    top: 10px;
}

.mm1 {
	left: 20px;
}
.mm2 {
	top: 20px;
}

.mm3 {
	left: 0px;
    top: 0px;
}