纯css+html做emoji动态表情
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表情</title>
<link rel="stylesheet" href="./style.css" />
</head> <body>
<div class="emoji one">
<!-- TODO 表情写在这里呀 -->
<div class="pen pen_l">
<div class="pencil"></div>
</div>
<div class="pen pen_r">
<div class="pencil"></div>
</div>
<div class="blush blush_l"></div>
<div class="blush blush_r"></div>
<div class="ruler"></div>
</div>
<!-- 多个表情请分别写在多个 div 下 -->
<div class="emoji emoji--sad">
<!-- TODO 表情写在这里呀 -->
<div class="emoji__face">
<div class="emoji__eyebrows"></div>
<div class="emoji__eyes"></div>
<div class="emoji__mouth"></div>
</div>
</div>
<div class="emoji crying-emoji">
<!-- TODO 表情写在这里呀 -->
<div class="crying_l"></div>
<div class="crying_r"></div>
<div class="crying_z"></div>
<div class="crying_b"></div>
<div class="crying_h"></div>
</div>
<div class="emoji laughing-emoji">
<div class="comic"></div>
<div class="laughing"></div>
<div class="eraser">
<div class="emoji__tongue"></div>
</div>
<div class="crayon_l"></div>
<div class="crayon_r"></div>
</div>
</body> </html>
body {
text-align: center;
margin: 80px auto 0;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.emoji {
width: 160px;
height: 160px;
border-radius: 50%;
background-color: #ffda6a;
display: inline-block;
}
.pen{
width: 60px; /* 圆的宽度 */
height: 60px; /* 圆的高度 */
border-radius: 50%; /* 将元素的四个角变成圆形 */
background-color: white; /* 圆的填充颜色 */
position: absolute;
z-index: 30;
}
.pen_r{
position: relative;
top: -20px;
right: -89px;
}
.pen_l{
position: relative;
top: 39px;
left: 14px;
}
.pencil{
width: 20px; /* 圆的宽度 */
height: 20px; /* 圆的高度 */
border-radius: 50%; /* 将元素的四个角变成圆形 */
background-color: #000; /* 圆的填充颜色 */
position: relative;
left: 20px;
top: 20px;
animation: moveUp 1s infinite linear; /* 应用动画 */
}
@keyframes moveUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
.blush {
width: 20px;
}
.blush_l{
position: relative;
top: -14px;
left: 67px;
box-shadow: -25px 0 0 0 #000000, 25px 0 0 0 #000000, -45px -2px 27px 10px #D5234C, 50px -2px 30px 10px #D5234C;
}
.blush_r{
position: relative;
top: -97px;
left: 113px;
}
.ruler{
width: 38px;
position: relative;
height: 6px;
background-color: #d35d06;
border-radius: 10px;
left: 61px;
top: 0;
}
.emoji__face,
.emoji__eyebrows,
.emoji__eyes,
.emoji__mouth {
position: absolute;
}
.emoji__face:before,
.emoji__face:after,
.emoji__eyebrows:before,
.emoji__eyebrows:after,
.emoji__eyes:before,
.emoji__eyes:after,
.emoji__mouth:before,
.emoji__mouth:after {
position: absolute;
content: '';
}
.emoji__face {
width: inherit;
height: inherit;
}
.emoji--sad .emoji__face {
animation: sad-face 2s ease-in infinite;
}
.emoji--sad .emoji__eyebrows {
left: calc(50% - 3px);
top: 35px;
height: 6px;
width: 6px;
border-radius: 50%;
background: transparent;
box-shadow: -40px 9px 0 0 #000000,
-25px 0 0 0 #000000,
25px 0 0 0 #000000,
40px 9px 0 0 #000000;
}
.emoji--sad .emoji__eyebrows:before {
width: 30px;
height: 21px;
border: 6px solid #000000;
box-sizing: border-box;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
top: -8px;
left: calc(50% - 20px);
}
.emoji--sad .emoji__eyebrows:after {
width: 30px;
height: 21px;
border: 6px solid #000000;
box-sizing: border-box;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
top: -8px;
left: calc(50% - 10px);
}
.emoji--sad .emoji__eyebrows:before {
margin-left: -31px;
transform: rotate(152deg);
}
.emoji--sad .emoji__eyebrows:after {
margin-left: 30px;
transform: rotate(-150deg);
}
.emoji--sad .emoji__eyes {
width: 14px;
height: 16px;
left: calc(50% - 7px);
top: 50px;
border-radius: 50%;
background: transparent;
box-shadow: 25px 0 0 0 #000000,
-25px 0 0 0 #000000;
}
.emoji--sad .emoji__eyes:after {
background: #548DFF;
width: 12px;
height: 12px;
margin-left: 6px;
border-radius: 0 100% 40% 50% / 0 50% 40% 100%;
transform-origin: 0% 0%;
animation: tear-drop 2s ease-in infinite;
}
.emoji--sad .emoji__mouth {
width: 60px;
height: 80px;
left: calc(50% - 30px);
top: 80px;
box-sizing: border-box;
border: 6px solid #000000;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
background: transparent;
animation: sad-mouth 2s ease-in infinite;
}
.emoji--sad .emoji__mouth:after {
width: 6px;
height: 6px;
background: transparent;
border-radius: 50%;
top: 4px;
left: calc(50% - 3px);
box-shadow: -18px 0 0 0 #000000,
18px 0 0 0 #000000;
}
@keyframes sad-face {
25%,
35% {
top: 122px;
}
55%,
95% {
top: 91px;
}
100%,
0% {
top: 74px;
}
}
@keyframes sad-mouth {
25%,
35% {
transform: scale(0.85);
top: 70px;
}
55%,
100%,
0% {
transform: scale(1);
top: 80px;
}
}
@keyframes tear-drop {
0%,
100% {
display: block;
left: 35px;
top: 15px;
transform: rotate(45deg) scale(0);
}
25% {
display: block;
left: 35px;
transform: rotate(45deg) scale(2);
}
49.9% {
display: block;
left: 35px;
top: 65px;
transform: rotate(45deg) scale(0);
}
50% {
display: block;
left: -35px;
top: 15px;
transform: rotate(45deg) scale(0);
}
75% {
display: block;
left: -35px;
transform: rotate(45deg) scale(2);
}
99.9% {
display: block;
left: -35px;
top: 65px;
transform: rotate(45deg) scale(0);
}
}
.crying-emoji {
position: relative;
}
@keyframes stream-breath {
0% {
transform: rotate(45deg) rotate(0deg);
}
25% {
transform: rotate(45deg) scale(1);
}
50% {
transform: rotate(45deg) scale(3);
}
75% {
transform: rotate(45deg) scale(1);
}
100% {
transform: rotate(45deg) scale(0);
}
}
.crying_l {
width: 46px;
position: relative;
height: 8px;
background-color: #d35d06;
border-radius: 10px;
left: 14px;
top: 62px
}
.crying_r {
width: 46px;
position: relative;
height: 8px;
background-color: #d35d06;
border-radius: 10px;
left: 69px;
top: 54px;
}
.crying_z {
width: 26px;
position: relative;
height: 8px;
background-color: #d35d06;
border-radius: 10px;
left: 49px;
top: 84px;
}
.crying_b {
position: relative;
right: -122px;
top: -8px;
background: #548DFF;
width: 12px;
height: 12px;
margin-left: 6px;
border-radius: 0 100% 40% 50% / 0 50% 40% 100%;
transform-origin: 0% 0%;
animation: stream-breath 2s ease-in infinite;
}
.crying_h {
width: 20px;
position: relative;
top: 74px;
left: 69px;
box-shadow: -25px 0 0 0 #000000, 25px 0 0 0 #000000, -45px -2px 27px 10px #D5234C, 20px -2px 30px 10px #D5234C;
}
.laughing-emoji {
position: relative;
}
.comic {
position: absolute;
left: calc(50% - 3px);
top: 35px;
animation: haha-amnt 2s linear infinite;
}
.comic:before,
.comic:after {
position: absolute;
content: '';
}
.comic:before,
.comic:after {
width: 42px;
height: 20px;
border: 6px solid #d35d06;
box-sizing: border-box;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
top: 20px;
left: calc(50% - 15px);
}
.comic:before {
margin-left: -40px;
transform: rotate(-30deg);
}
.comic:after {
margin-left: 32px;
transform: rotate(26deg);
}
.laughing {
position: absolute;
left: calc(50% - 3px);
top: 45px;
animation: haha-amnts 2s linear infinite;
}
.laughing:before,
.laughing:after {
position: absolute;
content: '';
}
.laughing:before,
.laughing:after {
width: 48px;
height: 40px;
border: 6px solid #d35d06;
box-sizing: border-box;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
top: 30px;
left: calc(50% - 15px);
}
.laughing:before {
margin-left: -40px;
transform: rotate(0deg);
}
.laughing:after {
margin-left: 32px;
transform: rotate(0deg);
}
.eraser {
position: absolute;
width: 90px;
height: 40px;
left: calc(50% - 43px);
top: 64%;
background: #fff;
border-radius: 0 0 40px 40px;
overflow: hidden;
z-index: 1;
animation: haha-mouth 2s linear infinite;
border: 1px solid #ae7179;
}
.eraser::before,
.eraser::after,
.emoji__tongue::before,
.emoji__tongue::after {
position: absolute;
content: '';
}
.emoji__tongue {
width: 89px;
height: 30px;
background: #ae7179;
left: calc(50% - 44px);
bottom: -1px;
border-radius: 0%;
position: absolute;
}
@keyframes haha-mouth {
10% {
transform: translate(0 -10px);
top: 55%;
}
50% {
transform: translate(0 0px);
top: 65%;
}
100% {
transform: translate(0 -10px);
top: 55%;
}
}
@keyframes haha-amnt {
10% {
transform: translate(0 -10px);
top: 30px;
}
50% {
transform: translate(0 0px);
top: 35px;
}
100% {
transform: translate(0 -10px);
top: 30px;
}
}
@keyframes haha-amnts {
10% {
transform: translate(0 -10px);
top: 40px;
}
50% {
transform: translate(0 0px);
top: 45px;
}
100% {
transform: translate(0 -10px);
top: 40px;
}
}
.crayon_r {
position: relative;
right: -125px;
top: 105px;
background: #548DFF;
width: 12px;
height: 12px;
margin-left: 6px;
border-radius: 0 100% 40% 50% / 0 50% 40% 100%;
transform-origin: 0% 0%;
animation: crayon-drop 2s ease-in infinite;
}
.crayon_l {
position: relative;
right: -26px;
top: 105px;
background: #548DFF;
width: 12px;
height: 12px;
margin-left: 6px;
border-radius: 0 100% 40% 50% / 0 50% 40% 100%;
transform-origin: 0% 0%;
animation: crayon_l-drop 2s ease-in infinite;
}
@keyframes crayon_l-drop {
0% {
transform: rotate(90deg) scale(2);
top: 85px;
}
25% {
transform: rotate(65deg) scale(2);
top: 95px;
}
50% {
transform: rotate(45deg) scale(3);
top: 105px;
}
75% {
transform: rotate(45deg) scale(2);
top: 115px;
}
100% {
transform: rotate(45deg) scale(2);
top: 125px;
}
}
@keyframes crayon-drop {
0% {
transform: rotate(0deg) scale(2);
top: 75px;
}
25% {
transform: rotate(25deg) scale(2);
top: 85px;
}
50% {
transform: rotate(45deg) scale(3);
top: 95px;
}
75% {
transform: rotate(45deg) scale(2);
top: 105px;
}
100% {
transform: rotate(45deg) scale(2);
top: 115px;
}
}
看做出来的截图，就没有做成gif显示案例
纯css+html做emoji动态表情的更多相关文章
- 有趣的纯CSS实现动态晴阴雨雪
我们先来看看实现的效果吧 非常的美腻,对吧.这个是纯css,且单标签实现的哦~ 先贴完整代码,我们再来看看这个里面究竟有什么可以借鉴的知识点 <!DOCTYPE html> <htm ...
- less可以做什么？less详解！(less嵌套选择器实现纯CSS二级导航)
前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的.往深入了说还需要懂得技术的应用场景,配合的技术等,方便为以后架构做准备.而less作为一门CSS预处理语言 ...
- 纯css做幻灯片效果
css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...
- 纯css做的安卓开机动画
随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...
- 纯CSS无hacks的跨游览器多列布局
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...
- 分享：纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
- 纯CSS菜单样式，及其Shadow DOM，Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...
- 纯CSS实现网站常用的五角星评分和分数展示交互效果
最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...
- Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform
Expression构建DataTable to Entity 映射委托 1 namespace Echofool.Utility.Common { 2 using System; 3 using ...
- 使用纯 CSS 实现 Google Photos 照片列表布局
文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...
随机推荐
- 简述Linux磁盘IO
1.什么是磁盘 在讲解磁盘IO前,先简单说下什么是磁盘.磁盘是可以持久化存储的设备,根据存储介质的不同,常见磁盘可以分为两类:机械磁盘和固态磁盘. 1.1 机械磁盘 第一类,机械磁盘,也称为硬盘驱动器 ...
- element-ui多选（批量）删除
导出axios请求
- 力扣628(java)-三个数的最大乘积（简单）
题目: 给你一个整型数组 nums ,在数组中找出由三个数组成的最大乘积,并输出这个乘积. 示例 1: 输入:nums = [1,2,3]输出:6示例 2: 输入:nums = [1,2,3,4]输出 ...
- 阿里巴巴大规模应用Flink的踩坑经验：如何大幅降低 HDFS 压力？
众所周知 Flink 是当前广泛使用的计算引擎,Flink 使用 checkpoint 机制进行容错处理[1],Flink 的 checkpoint 会将状态快照备份到分布式存储系统,供后续恢复使用. ...
- 基于MaxCompute+开放搜索的电商、零售行业搜索开发实践
简介: 搜索一直是电商行业流量来源的核心入口之一,如何搭建电商行业搜索并提升搜索效果,一直是电商行业开发者努力攻克的难题.基于传统数据库或开源引擎虽然能够搭建基础搜索服务,但随着商品数据的增多和业务 ...
- WPF 通过 InputManager 模拟调度触摸事件
在 WPF 中,框架可以分为两个部分,一个是渲染,另一个是交互.交互的入口是在 InputManager 里面,而实际的交互实现需要通过渲染布局和交互的路由事件才能完成.在输入管理提供了调度事件的方法 ...
- 服务端向客户端发送消息Server-Sent Events
今天听说了服务端向客户端发消息的一种方式:Server-Sent Events SSE使用的是HTTP协议,本质上是服务端向客户端发送流式数据. HTTP不支持服务端向客户端发送请求,但是如果客户端向 ...
- rubymineIDE配置启动
debug启动 debug启动 安装插件 报错: 网络问题 下载 ruby-debug-ide-2.3.1 解压到 /home/haima/.rvm/gems/ruby-2.3.8/gems/
- 03.redis 事务
课程学习地址: https://www.bilibili.com/video/BV1S54y1R7SB?p=23 中间手册地址: http://www.redis.cn/ Redis事务本质:一组命令 ...
- html布局浅谈
现在布局方式主要分为三种 传统css布局方案(position,float,line-height等配合).实现复杂,需要多种属性配合使用,兼容性最好. flex布局方案.弹性布局,实现方便,兼容性较 ...