纯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及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...
随机推荐
- TypeScript 中类的理解？应用场景？
一.是什么 类(Class)是面向对象程序设计(OOP,Object-Oriented Programming)实现信息封装的基础 ❝ 类是一种用户定义的引用数据类型,也称类类型 ❞ 传统的面向对象语 ...
- pid循迹小车的实现，arduino
帮我写一个Arduino循迹小车的程序,小车前面有并列8个红外发射接收传感器,每个红外发射接收传感器为1cm宽,地面循迹的线是大约2cm宽黑色的线,地面其他位置是白色的,要求循迹小车运行的速度快,使用 ...
- 力扣610(MySQL)-判断三角形（简单）
题目: 表: Triangle 写一个SQL查询,每三个线段报告它们是否可以形成一个三角形. 以 任意顺序 返回结果表. 查询结果格式如下所示. 示例1: 解题思路: 判断是否形成三角形的准则是:两 ...
- 全链路灰度新功能：MSE 上线配置标签推送
简介: 本文介绍了全链路灰度场景给配置管理带来的问题,介绍了 MSE 针对这一场景的解决方案,并通过实践的方式展示了配置标签推送的使用流程.后续,MSE 还会针对配置治理做更多的探索,帮助用户更好地解 ...
- 使用Databricks+Mlflow进行机器学习模型的训练和部署【Databricks 数据洞察公开课】
简介: 介绍如何使用Databricks和MLflow搭建机器学习生命周期管理平台,实现从数据准备.模型训练.参数和性能指标追踪.以及模型部署的全流程. 作者:李锦桂 阿里云开源大数据平台开发工程 ...
- SpringMVC拦截器配置后端登录校验
引 创建拦截器的方法有多种,可以继承HandlerInterceptorAdapter类,也可实现HandlerInterceptor接口.接口中有三个方法: preHandle:在业务处理器处理请求 ...
- 引爆你的网页乐趣！前端十个令人捧腹的JavaScript整蛊代码。
愚人节整蛊代码.想要在网页上增添一抹幽默与惊喜吗?或是想给你的朋友一个意想不到的"小惊喜"?那么,这十款简单而有趣的JavaScript前端整蛊代码绝对能满足你的需求!每一个代码都 ...
- C#使用MX Component实现三菱PLC软元件数据采集的完整步骤（仿真）
前言 本文介绍了如何使用三菱提供的MX Component插件实现对三菱PLC软元件数据的读写,记录了使用计算机仿真,模拟PLC,直至完成测试的详细流程,并重点介绍了在这个过程中的易错点,供参考. 用 ...
- PyTorch的安装与使用
技术背景 PyTorch是一个非常常用的AI框架,主要归功于其简单易用的特点,深受广大科研人员的喜爱.在前面的一篇文章中我们介绍过制作PyTorch的Singularity镜像的方法,这里我们单独抽出 ...
- BIN文件格式
BIN文件里面包含的只有代码生成的机器码,不像ELF文件或者obj文件一样还包含其他东西.MS-DOS.设备驱动文件以及操作系统的bootloader文件都是BIN文件. 在NASM中,BIN文件默认 ...