<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div class="zmd">
<div class="container">
<div class="content">
可爱会眨眼会撩人的蜡笔小新来了
</div>
</div>
</div>
<div class="main-box">
<div class="head">
<div class="face">
<div class="ear-clear"></div>
<div class="eye" id="eyeleft">
</div>
<div class="eye right" id="eyeright"></div>
<div class="eyebrow"></div>
<div class="eyebrow right"></div>
<div class="mouth"></div>
</div>
<div class="eyebrow-big"></div>
<div class="eyebrow-big right"></div>
</div>
<div class="clothes">
<div class="sleeve"></div>
<div class="sleeve-right"></div>
<div class="armright">
<div class="hand right">
<img src="img/meiguihua.png" style="width: 56px;height: 60px;position: absolute;top: -40px;left: -5px;z-index: -1;"/>
<!-- <div style="width: 11px;height: 10px;background-color: #ffaf9c;position: absolute;left: 1px;"></div> -->
</div>
<div class="he1"></div>
</div>
</div>
<div class="arm">
<div class="hand"></div>
</div>
<div class="tousers "></div>
<div class="tousers right"></div>
<div class="leg"></div>
<div class="leg right"></div>
<div class="socks"></div>
<div class="socks right"></div>
<div class="shoes"></div>
<div class="shoes right"></div>
<img class="heart hearts" src="img/aixin.png"></img>
</div>
</body>
<script type="text/javascript">
var index=1;//1睁眼睛2闭眼睛
function myfun() {
console.log("执行一次")
if(index==2){
var obj = document.getElementById("eyeleft");
obj.setAttribute("class", "eye");
var obj1 = document.getElementById("eyeright");
obj1.setAttribute("class", "eye right");
index=1;
}else{
var obj = document.getElementById("eyeleft");
obj.setAttribute("class", "eye1");
var obj1 = document.getElementById("eyeright");
obj1.setAttribute("class", "eye1 right1");
index=2;
}
}
function myfun1(){
setInterval("myfun()",500 );
// setTimeout("myfun()",500 );
}
// 不要括号
window.onload = myfun1;
</script>
</html>
css
html {
font-size: 10px;
}
body {
background: #c0bae6;
}
.main-box {
width: 24rem;
height: 31rem;
margin: 5rem auto;
position: relative;
}
.head {
width: 11rem;
height: 6rem;
margin: 0 auto;
background: #000;
border-top-left-radius: 6rem;
border-top-right-radius: 10rem;
position: relative;
}
.face{
width: 12rem;
height: 6rem;
position: absolute;
top: 3.7rem;
left:-2.4rem;
border:.1rem solid #000000;
background: #ffc7ae;
border-radius: 5rem;
/* 旋转角度 deg是角度 */
transform: rotate(342deg);
border-bottom-left-radius: 8rem 6rem;
z-index: 100;
}
.face:before{
content: '';
position: absolute;
width: 10rem;
height: 6rem;
background: #ffc7ae;
top: -2.6rem;
left: 3.6rem;
transform: rotate(21deg);
border-top-left-radius: 4rem;
border-top-right-radius: 6rem 4rem;
}
.face:after{
content: '';
position: absolute;
background: #ffc7ae;
width: 3rem;
height: 3rem;
right: -2rem;
top: 2.3rem;
border-radius: 0.8rem 2.4rem 0.8rem 1rem / 0.8rem 2.4rem 0.8rem 1rem;
transform: rotate(60deg);
border:.1rem solid #000000;
z-index: 1;
}
.ear-clear{
width: 3rem;
height: 2.8rem;
border-radius: 100%;
position: absolute;
background: #ffc7ae;
top: 2.5rem;
left: 10rem;
z-index: 2;
}
.mouth{
width: 1rem;
height: 1rem;
position: absolute;
left: 3rem;
bottom: -0.7rem;
border:.2rem solid #000;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
/* 睁眼 */
.eye{
width: 3.2rem;
height: 3rem;
background: #000;
position: absolute;
left: 4.3rem;
top: -0.6rem;
border-radius: 50%;
z-index: 4;
transform: rotate(18deg);
}
.eye.right{
left: unset;
right: 0.5rem;
top: 0.3rem;
}
/* 闭眼 */
.eye1{
width: 3.2rem;
height: 1rem;
background: #000;
position: absolute;
left: 4.3rem;
top: 0rem;
border-radius: 50px;
z-index: 4;
transform: rotate(18deg);
}
.eye1.right1{
left: unset;
right: 0.5rem;
top: 1rem;
}
.eye:before{
content: "";
width: 1rem;
height: 0.9rem;
background: #fff;
border-radius: 50%;
left: 40%;
top: 40%;
position: absolute;
}
.eye.right:before{
top: 35%;
left: 35%;
}
.eyebrow{
width: 3.4rem;
height: 5.4rem;
position: absolute;
z-index: 5rem;
top:-1.6rem;
left:4rem;
border-radius: 50%;
border:.2rem solid #000;
border-bottom-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
}
.eyebrow.right{
width: 4.4rem;
height: 8.4rem;
top: -1.6rem;
left: unset;
right: 1rem;
transform: rotate(31deg);
top: -1.4rem;
}
.eyebrow-big{
width: 2.2rem;
height: 0.8rem;
position: absolute;
left: 1rem;
top: 1.5rem;
background: #000;
transform: rotate(323deg);
border-radius: 1rem 1rem /1rem;
z-index: 101;
}
.eyebrow-big:before{
content: "";
/* 使段落生出行内框: */
display: block;
width: 1.6rem;
height: 0.8rem;
border-radius: 1rem;
background-color: #000;
top: 0.7rem;
right: -0.5rem;
position: absolute;
transform: rotate(87deg);
}
.eyebrow-big.right{
/* 不设置 */
left: unset;
top: 0.8rem;
right: 3.5rem;
}
.clothes{
width: 8rem;
height: 9rem;
background: #c40e24;
position: absolute;
left: 30%;
top: 9rem;
border-radius: 1rem;
z-index: 80;
border:0.1rem solid #000;
transform: skewX(-5deg);
}
.sleeve{
width: 2.2rem;
height: 4rem;
background: #c40e24;
position: absolute;
left:-1.5rem;
top: 0rem;
border-radius: 1rem;
border:.1rem solid #000;
border-right-color: transparent;
transform: rotate(15deg);
}
.sleeve:after{
width: .1rem;
height: 1rem;
background: #000;
position: absolute;
content: '';
bottom: 0rem;
right: 0.35rem;
transform: rotate(-8deg);
}
.sleeve-right{
width: 3.2rem;
height: 4rem;
background-color: #c40e24;
position: absolute;
right: -1.3rem;
top: -0.4rem;
border-radius: .3rem;
border:.1rem solid #000;
transform:scaleX(14deg) scaleY(9deg);
/* transparent 默认值。边框颜色为透明。 */
border-left-color: transparent;
border-bottom-color: transparent;
z-index:9;
}
.sleeve-right:after{
width: 2rem;
height: 2.1rem;
border:0.1rem solid #000;
content: "";
position: absolute;
left: 0.5rem;
bottom: -0.4rem;
background: #c40e24;
border-top-color: transparent;
border-right-color: transparent;
transform: skewX(360deg) skewY(343deg);
border-bottom-left-radius: 5px;
}
.arm{
width: 1.2rem;
height: 4rem;
background-color: #ffaf9c;
position: absolute;
left: 25%;
top: 12rem;
border:0.1rem solid #000;
}
.hand{
width: 1.5rem;
height: 1.4rem;
background-color: #ffaf9c;
border-radius: 0.7rem 0.9rem;
position: absolute;
left: -0.2rem;
border:0.1rem solid #000000;
bottom: -0.6rem;
border-top-color: transparent;
}
.armright{
width: 1.1rem;
height: 3.2rem;
background-color: #ffaf9c;
position: absolute;
right: -17%;
top: 3.4rem;
border:0.1rem solid #000;
border-right-color:#000000;
border-bottom-color:transparent;
transform: rotate(343deg);
}
.armright:before{
width:1.1rem;
height:3.2rem;
background:#ffaf9c;
position: absolute;
right:-.4rem;
top:0;
border:.1rem solid #000;
border-left-color:transparent;
border-bottom-color:transparent;
transform: rotate(12deg);
}
.he1{
width: 1rem;
height: 2.5rem;
background-color: aqua;
z-index: 100;
transform: rotate(350deg);
background:#ffaf9c;
position: relative;
left: -0.3rem;
border-left: 1px solid #000000;
}
.tousers{
width: 4rem;
height: 2.3rem;
background-color: #fafc8e;
border:0.1rem solid #000;
border-right-color: transparent;
position: absolute;
top: 17.8rem;
left: 30%;
transform: skew(349deg,1deg);
z-index: 5;
}
.tousers.right{
transform: skew(-349deg,-1deg);
left:45%;
border:0.1rem solid #000;
border-left-color: transparent;
}
.tousers.right:after{
width: 1rem;
height: 1rem;
border-right: .1rem solid #000;
content: "";
position: absolute;
left: 1rem;
bottom: .1rem;
}
.leg{
width: 1.8rem;
height: 2.3rem;
background: #fec8ae;
position: absolute;
top: 20rem;
left: 34%;
z-index: 4;
border:.1rem solid #000;
}
.leg.right{
left: 51%;
}
.socks{
width: 1.8rem;
height: 1.0rem;
border-radius: .3rem;
background: #fff;
position: absolute;
top: 22rem;
left:34%;
z-index: 5;
border:.1rem solid #000;
transform: rotate(0deg);
left: 8.1rem;
}
.socks.right{
left: 51%;
}
.shoes{
width: 3rem;
height: 0.8rem;
background: #f6d47e;
position: absolute;
border-radius: .7rem 1rem 1rem 2rem / .7rem 1rem 1rem 1rem;
border:.1rem solid #000;
transform: rotate(-6deg);
left: 29%;
top: 23rem;
}
.shoes.right{
left: 51%;
transform: rotate(4deg);
}
.hearts{
width: 20px;
height: 20px;
position: absolute;
left: 38%;
z-index: 100;
top: 110px;
}
/* 变大变小 */
.heart {
animation:heartbeat 1s infinite;
-webkit-animation:heartbeat 1s infinite;
/* Safari 和 Chrome */
width:20px;
height:20px;
position:relative;
/*filter 定义了元素(通常是<img>)的可视效果 */
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
transform:rotate(0deg);
left:120px;
top:50px;
}
.heart:before,.heart:after {
content:"";
position:absolute;
width:200px;
height:200px;
border-radius:100px;
}
.heart:before {
left:-100px;
}
.heart:after {
left:0;
top:-100px;
}
@keyframes heartbeat {
0% {
transform:rotate(0deg) scale(0.8,0.8);
opacity:1;
}
25% {
transform:rotate(0deg) scale(1,1);
opacity:0.8;
}
100% {
transform:rotate(0deg) scale(0.8,0.8);
opacity:1;
}
}
/* 跑马灯 */
.zmd{
position: absolute;
top: 2%;
width: 100%;
}
.container{
width:10.52rem;
height:1.04rem;
line-height: 1.04rem;
margin: 0 auto;
position:relative;
overflow:hidden;
white-space:nowrap;
}
.content{
width: 100%;
font-size: 0.32rem;
height:1.04rem;
color: #fff;
position:absolute;
animation:move linear 8s infinite;//控制移动的速度
}
.content>span{
color: #f00;
font-weight: bold;
}
@keyframes move{
from{
transform:translateX(100%);
}
to{
transform:translateX(-110px);
}
}
资源链接下载 https://download.csdn.net/download/qq_36935391/86900346