css+js+html（画眨眼睛，手拿玫瑰心动的蜡笔小新）

已于 2023-03-10 12:30:34 修改
阅读量561 收藏
点赞数 1
分类专栏： js css wxy 文章标签： javascript css html
于 2022-11-03 10:31:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36935391/article/details/127665445
版权
js 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
css
5 篇文章 0 订阅
订阅专栏
wxy
3 篇文章 0 订阅
订阅专栏 

<!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

飞飞翼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯CSS3实现眨眼动画特效特效代码
03-20
纯CSS3实现眨眼动画特效是一款超级逼真的CSS3眨眼动画效果。
dw网页设计：HTML+CSS简单漫画网页设计成品 蜡笔小新3页 大学生个人HTML网页制作作品
12-17 1235
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
HTML静态网页作业(HTML+CSS+JS)——蜡笔小新动漫网页设计制作(5个页面)
weixin_42283461的博客
02-27 1276
🏷️本套采用DIV+CSS布局，使用Javacsript代码，共有5个页面。🏷️Javacsript主要是实现首页图片轮播效果。
web前端期末大作业之《蜡笔小新》网站设计（总共有十页）
LJY2205006166的博客
07-19 649
web前端期末大作业，总共十个页面。
HTML+CSS简单漫画网页设计成品 蜡笔小新3页 大学生个人HTML网页制作作品
热门推荐
QQ_____365392777的博客
08-16 2万+
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
HTML5 Canvas眨眼睛动画
weixin_33881140的博客
01-20 193
  效果请看： http://keleyi.com/a/bjad/p9exlcwi.htm 请使用支持HTML5的浏览器查看效果。   以下是代码： 3 &lt;html&gt; 4 &lt;body&gt; 5 &lt;canvas width="300" height="300" id="keleyieye" style="background:black&quo
css眨眼效果,CSS3 精巧的笑脸/眨眼变形动画
weixin_32334251的博客
08-03 751
CSS语言：CSSSCSS确定body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;background: #292929;}body .leftEye,body .rightEye {width: 5vh;height: 5vh;border-radius: 50%;background: #dfdfc2;pos...
中国传统节日端午节网页HTML代码 学生网页课程设计期末作业下载 春节大学生网页设计制作成品下载 DW春节节日网页作业代码下载
qq___365392777的博客
10-22 7215
HTML5期末大作业：节日网站设计——中国传统节日端午节网页HTML代码(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目
html+css+js带粒子背景动画的登录页面模板
04-10
html5+css3+js动态气泡背景用户登录页面模板，适用于个性化的网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，...
HTML+CSS+JS的爱心代码.zip
06-19
HTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码....
大屏可视化，html+CSS+JS+echarts
10-31
html+CSS+JS+echarts,20个均可本地预览
html+css+js网页设计源代码.zip
05-31
计软院和巨耀通杯网页设计大赛作品，一个猫站。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 384
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1007
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 510
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 301
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 406
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 403
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
HTML+CSS+JS网页设计期末课程大作业 HTML+CSS+JavaScript
06-01
HTML、CSS和JavaScript是现代网页设计的三个基本技术，它们可以帮助你创建出美观、交互性强、功能丰富的网页。下面是一些关于HTML、CSS和JavaScript的常见知识点： HTML（超文本标记语言）： 1. HTML是网页的基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞飞翼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值