表情包——爱你哦

最新推荐文章于 2021-10-19 15:53:19 发布
最新推荐文章于 2021-10-19 15:53:19 发布
阅读量606 收藏
点赞数
分类专栏： web开发——作品 文章标签： css css3 html animation 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44645934/article/details/108542307
版权

表情包——爱你哦

<!--定死视窗大小-->
        <meta name="viewport" content="width=750 ,user-scalable=no" />

1.现将表情包划分为：头，身体，脚三个部分。

2.设计头部时用border边框样式，position定位，transform变换。

3.设计眼睛，爱心时用animation动画。

4.胡须，爱心，腰用到了before和after伪类。

5.脚用到了display：flex弹性盒子。

6.文字爱你哦用到了filter: hue-rotate(0deg);

滤镜属性 hue-rotate 色相旋转:角度，
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>爱你哦</title>
		<meta name="viewport" content="width=750 ,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/爱你哦.css"/>  
	</head>
	<body>
		<div class="panda">
			<!--<div class="heart"></div>-->
			<div class="head">
				<div class="ears left-ears"></div>
				<div class="ears right-ears"></div>
				<div class="eye left-eye"></div>
				<div class="eye  right-eye"></div>
				<div class="mouth"></div>
				<div class="cheek left-cheek"></div>
				<div class="cheek right-cheek"></div>
			</div>
			<div class="body">
				<div class="heart"></div>
				<div class="hands left-hands"></div>
				<div class="hands right-hands"></div>
				<div class="pockets">
					<span>爱你哦</span>
				</div>
			</div>
			<div class="foot">
				<div class="left-foot"></div>
				<div class="right-foot"></div>
			</div>
		</div>
	 
	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
body{
	width:750px;
	height: 100vh;
	position: absolute;
}
.panda{
	margin: 100px auto;
	width: 80%;
	height: 80%;
	/*border: 2px solid red;*/
	animation: move 3s linear infinite;
}
@keyframes move{
	0%,100%{
		transform: translateY(0px);
	}
	25%{
		transform: translateY(-8px);
	}
	50%{
		transform: translateY(0px);
	}
	75%{
		transform: translateY(8px);
	}
}

/*头部样式*/
.panda .head{
	width: 300px;
	height: 250px;
	border: 4px solid brown;
	border-radius:50% 50% 25% 25%;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.panda .head .ears{
	width: 50px;
	height: 40px;
	/*border: 2px solid red;*/
	border-radius: 50% 50% 10% 10%;
	background-color:brown ;
}
.panda .head .left-ears{
	z-index: -1000;
	float: left;
    transform: translateY(10px) rotate(-45deg);
}
.panda .head .right-ears{
	float: right;
	transform: translateY(10px) rotate(45deg);
}
.panda .head .right-ears:after{
	content: "";
	clear: both;
}
.panda .head .eye{
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: black;
	position: absolute;
	top: 150px;
	animation: eye-scal 2s linear infinite;
}
@keyframes eye-scal{
    0%,100%{
		transform: translate(-50%, -50%)  scaleY(1);
	}
	25%{
		transform: translate(-50%, -50%)  scaleY(0.7);
	}
	50%{
		transform: translate(-50%, -50%)  scaleY(1);
	}
	75%{
		transform: translate(-50%, -50%)  scaleY(0.7);
	}	
}
.panda .head .left-eye{
	left: 100px;
}
.panda .head .right-eye{
	left: 200px;
}

.panda .head .mouth{
	width: 20px;
	height: 25px;
	border: 2px solid brown;
	border-radius:50% ;
	background-color: hotpink;
	position: absolute;
	top:175px;
	left: 50%;
	transform: translate(-50%,-50%);
}
.panda .head .mouth:before{
	content:"";
	display: inline-block;
	width: 20px;
	height: 10px;
	border:3px solid brown ;
	border-color:transparent  transparent brown brown; 
	border-radius:50% ;
	transform: translate(-13px,-13px) rotate(-30deg);
	
}
.panda .head .mouth:after{
	content:"";
	display: inline-block;
	width: 20px;
	height: 10px;
	border:3px solid brown ;
	border-color:transparent  brown brown transparent; 
	border-radius:50% ;
	transform: translate(8px,-33px) rotate(30deg);
	
}
.panda .head .cheek{
	width: 50px;
	height: 50px;
	/*border: 2px solid brown;*/
	border-radius:50% ;
	background-color: lightpink;
	position: absolute;
	top:200px;
	transform: translate(-50%,-50%);
}
.panda .head .left-cheek{
	left: 60px;
}
.panda .head .right-cheek{
	left: 240px;
}

/*身体样式*/
.panda .body{
	width: 240px;
	height: 200px;
	border: 4px solid transparent;
	border-radius:40% 40% 5% 5% ;
	position: absolute;
	top: calc(40% + 200px);
	left: 50%;
	transform: translate(-50%,-50%);
}
.panda .body:before{
	content: "";
	width: 0px;
	height: 116px;
	border:2px solid brown ;
	position: absolute;
	top: 80px;
	left: -4px;
}
.panda .body:after{
	content: "";
	width: 0px;
	height: 116px;
	border:2px solid brown ;
	position: absolute;
	top: 80px;
	left: 240px;
}
/*爱心*/
.panda .body .heart{
	width: 100px;
	height: 100px;
	background-color: pink;
	/*border-radius:40% ;*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-70%) rotate(45deg);
	/*z-index: 10;*/
	animation: heart-scal 2s linear infinite;
}
@keyframes heart-scal{
	0%,100%{
		transform: translate(-50%,-70%) rotate(45deg) scale(1);
	}
	25%{
		transform: translate(-50%,-70%) rotate(45deg)  scale(0.7);
	}
	50%{
		transform: translate(-50%,-70%) rotate(45deg)  scale(1);
	}
	75%{
		transform:translate(-50%,-70%) rotate(45deg)  scale(0.7);
	}	
}
.panda .body .heart:before{
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	border-radius:50% ;
	background-color: pink;
	transform: translate(0px,-50px);
}
.panda .body .heart:after{
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	border-radius:50% ;
	background-color: pink;
	transform: translate(-50px,-100px);
}
.panda .body .hands{
	width: 75px;
	height: 85px;
	border:4px solid;
	border-radius:50% ;
	background-color:transparent;
	z-index: 100;
}
.panda .body .left-hands{
	border-color:brown transparent  transparent brown;
	float: left;
	transform: translate(-4px,18px) rotate(-60deg);
	/*background:linear-gradient(to top, transparent 100%, white 0%);*/
}
.panda .body .left-hands:after{
	clear: both;
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 4px solid brown;
	border-radius:50% ;
	border-color:brown brown transparent transparent  ;
	transform: translate(2px,35px) rotate(105deg);
}
.panda .body .right-hands{
	border-color:brown brown transparent  transparent ;
	float: right;
	transform: translate(4px,18px) rotate(60deg);
	/*background:linear-gradient(to right, transparent 80%, white 0%);*/
}
.panda .body .right-hands:after{
	clear: both;
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 4px solid brown;
	border-radius:50% ;
	border-color:transparent transparent brown brown  ;
	transform: translate(25px,35px) rotate(-15deg);
}
.panda .body .pockets{
	width: 140px;
	height: 140px;
	border: 4px solid brown;
	border-color:transparent  transparent brown brown; 
	border-radius:45% 50% 45% 50% ;
	position: absolute;
	top:60%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(-45deg);
	z-index: -100;
}
.panda .body .pockets span{
	display: block;
	width: 140px;
	height: 30px;
    /*border: 2px solid red;
    border-radius:50% ;*/
	font-family: "微软雅黑";
	font-size: x-large;
	text-align: center;
	color: pink;
	transform: rotate(45deg) translate(20px,65px);
	animation: color 2s linear infinite;
}
@keyframes color{
	0%{
		filter: hue-rotate(0deg);
	}
	100%{
		filter: hue-rotate(360deg);
	}
}
.panda .body .pockets:before{
	content: "";
	display: inline-block;
	width: 144px;
	height: 0px;
	border: 2px solid brown;
	transform: rotate(45deg) translate(36px,44px);
}
/*脚*/
.panda  .foot{
	width: 280px;
	height: 60px;
	/*border: 4px solid brown;*/
	position: absolute;
	top: calc(40% + 320px);
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
}
.panda  .foot .left-foot{
	width: 130px;
	height: 50px;
	border:4px solid brown ;
	border-color:transparent brown brown brown;  
	border-radius:50% ;
	transform: translate(5px , -5px);
	
}
.panda  .foot .right-foot{
	width: 130px;
	height: 50px;
	border:4px solid brown ;
	border-color:transparent brown brown brown;  
	border-radius:50% ;
	transform: translate(0px , -5px);
	
}

 

吃素的黑猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全部IOS表情包
11-15
全套原生苹果IOS系统表情包，PNG格式，解压后使用，包括以下内容： 01.表情符号与人物 02.动物与自然 03.食物与饮料 04.活动 05.旅行与地点 06.物品 07.符号 08.旗帜 可用于各类LOGO或图标
emoji表情包
desongzhang的博客
07-07 280
emoji: [ "????", "????", "????", "????", "????"， "????", "????", "????","????", "????","????","????","????","????","????","????","????","????","????", "????","????","????","????","????","????","????","????","????","????", "????","?
表情包-Emoji符号
coastlineWang的博客
08-06 2322
表情类 ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ☺️ ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ☹️ ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ????
【小程序合集】来一组适合你的表情包-表情包大全
weixin_34324081的博客
08-25 1498
2019独角兽企业重金招聘Python工程师标准>>> ...
Omi Emoji表情包
Wscats
02-27 1万+
Omi Emoji Use Weui and Omi prepared by emoji,Live Demo Made with ❤︎ byWscats Usage 体验地址：https://wscats.github.io/emoji/omi/build/ 项目地址：https://github.com/Wscats/emoji Installation(Git) 克隆项目...
html网页QQ微信聊天表情包动图——72个
03-01
该动图可以用于开发网页聊天评论，格式为gif的格式。使用时作为图片直接引入就能使用。暂无别的注意事项
emoji表情包-PNG——开发用
04-15
Apple iOS 12.2，2019年3月25日最新版，共有2776张表情图。。。。。。
Python自动生产表情包
01-21
不过这里要说的并不是数据可视化，而是一款全民向的产品形态——表情包！！！！ 表情包不仅仅是一种符号，更是一种文化——是促进社交乃至社会发展的动力之一，就像懒。我们坚持认为，一张优秀的表情包，应该是一幅...
07 这才是我们建筑界的专属表情包——斗图开始 .docx
11-08
07 这才是我们建筑界的专属表情包——斗图开始 .docx
表情包酒吧喝酒壁纸多功能小程序
05-30
之前的版本内置了表情包还有壁纸功能 这一期的版本给优化了一下UI和新增加了一些喝酒神器功能 具体新增加的喝酒神器功能有如下 轮盘 挖雷 指尖关环 酒吧灯光 手持弹幕 拆弹英雄 鳄鱼拔牙 喝酒大叔 喝酒摇骰子 ...
在线表情包制作
07-10
在线制作表情包网站源码打包,做表情包这个源码属于裂变引流吧,大牛轻喷 可以配合微信/QQ公众号传播,只要多上几个表情包涵盖所有热门,有能力的可以开发微信小程序,引流不是一点点,而且新版增加了GIF生成,更加保留了用户的体验性,站长可以自行搭建试用
CKeditor 配置好的，支持QQ表情以及去掉多余功能
06-16
CKeditor 配置好的，支持QQ表情以及其他表情，去掉了没有用的按钮，增加了插入代码这个插件。用起来很爽。
就这？ Scrapy框架被我用了个遍，结果只制作了表情包！
Blog沙漏在下雨
06-18 1167
爬了个网站，结果发现该网站图片不好看，于是看程序员如何制作DIY表情包？本篇博客涵盖scrapy知识点过多，绝对干货！
2017 山东理工第九届校赛 C 康纳的表情包
Ever_glow的博客
06-04 1431
康纳的表情包 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description UMR 现在手里有 n 张康纳的表情，最上面一张是玛吉呀巴库乃。现在 UMR 如果每次把最上面的 m 张牌移到最下面而不改变他们的顺序及朝向，那么至少经过多少次移动玛吉呀巴库乃才会又出现在最上面呢？ 3917 Input 多组输入。 每组输入以空格分隔的两个整数 n 和 m（题目中所提及的）。 1 <= n, m <= 10^9 Out
打蚊子表情包_打死蚊子表情包 - 打死蚊子微信表情包 - 打死蚊子QQ表情包 - 发表情 fabiaoqing.com...
weixin_39774445的博客
12-22 3218
食屎啦你死蚊子，妈的总感觉哪里不对 - 张学友：别再叮我了，求你了_张学友_蚊子_夏天表情为什么蚊子只爱我 - 蚊子表情包_蚊子表情拍打蚊子GIF - 蚊子表情包_蚊子表情采访蚊子 请问你为什么要咬我 - 蚊子表情包_蚊子表情有人在网上下单打你而且不能打死：千万别打死了打死了对不起客户_打死_单打_千万别表情蚊子飞在屎上 - 打屎打屎_屎_蚊子表情我想，最爱我的是蚊子 - 我想，最爱我的是蚊子(小...
最新emoji表情大全，建议收藏！！！
Jack, what else can you do besides holding your little darling?
10-19 1万+
???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ?
抖音最火表情包下载
weixin_44996284的博客
06-01 2060
http://www.90pan.com/b1201871 http://www.90pan.com/b1201870 http://www.90pan.com/b1201869 http://www.90pan.com/b1201868 http://www.90pan.com/b1201867
触发器约束表中数据重复
热门推荐
JL99000的专栏
04-06 3万+
--表A中有两个字段CODE和CHANNELID  --想写一个触发器，在添加或者修改的时候，不允许有CODE和CHANELID同时重复的 --比如 CHANNELID=1 的记录里面不能有两个CODE一样的，但是CHANNELID不同的话，CODE可以相等 --帮写个触发器或者约束，谢谢了if object_id(表A) is not null   drop table 表Aif objec
表情包emoji下载
最新发布
05-29
表情包（emoji）是一种越来越受欢迎的通讯方式，可以让你在聊天时使用各种有趣和生动的表情符号来表达自己的情感和情绪。要下载表情包，你可以采取以下方法之一： 1. 在应用商店下载表情包应用。有很多应用程序提供...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值