纯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及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...
随机推荐
- flask通过线程池实现异步
from flask import Flask from time import sleep from concurrent.futures import ThreadPoolExecutor # D ...
- 《c#高级编程》第4章C#4.0中的更改（六）——动态绑定
一.概念 下面是一些代码示例,说明C#动态绑定的上述特点: 1. 延迟确定类型 ```dynamic obj = GetDynamicObject(); // 获取动态对象obj.DoSomethin ...
- 我是如何搭建ChatGPT并嵌入到微信公众号的？
前言 体验方式:薇辛搜索 龚众号 [程序员Jason],关注并点击发消息,点菜单ChatGPT 然后翻到最下面点[阅读原文]就可以了. ChatGPT对某些国家是不提供服务的,所以一般是用不了,除非是 ...
- b站的视频进度条悬浮预览视频画面实现方式
1.探究 在看b站视频,滑到进度条的时候突发奇想,想知道这个预览图是怎么做到的 打开控制台,发现每次移动鼠标悬浮位置的时候都会发出一条网络请求,并且该请求的size显示来源于内存,当时以为每次加载视频 ...
- 传统 Web 框架部署与迁移
简介: 与其说 Serverless 架构是一个新的概念,不如说它是一种全新的思路,一种新的编程范式. 与其说 Serverless 架构是一个新的概念,不如说它是一种全新的思路,一种新的编程范式. ...
- 成本节省 50%，9人团队使用函数计算开发 wolai 在线文档应用
简介: 通过使用函数计算,wolai 的前端工程师们就可以把从前到后的一整套开发流程负责起来,我们的研发迭代速度非常快. 作者| 马锐拉(wolai.com 创始人) 我们的日常工作场景几乎离 ...
- Nacos2.0的K8s服务发现生态应用及规划
简介:Nacos 是阿里巴巴于 2018 年开源的注册中心及配置中心产品,帮助用户的分布式微服务应用进行服务发现和配置管理功能.随着 Nacos2.0 版本的发布,在性能和扩展性上取得较大突破后,社 ...
- Region-区域
定义Region的方式有两种: 一种是在XAML定义 RegionManager.RegionName(XAML) 一.View代码 1 <Viewbox Grid.Column="1 ...
- 学习 Avalonia 框架笔记 如何创建一个全屏置顶的 X11 应用窗口
本文记录我从 Avalonia 框架里面学到如何创建一个全屏置顶的 X11 应用窗口的方法 开始之前,先从 Avalonia 或 CPF 里面拷贝足够的代码,这部分代码可以从本文末尾找到下载方法 设置 ...
- 2019-11-29-dotnet-代码调试方法
title author date CreateTime categories dotnet 代码调试方法 lindexi 2019-11-29 8:50:0 +0800 2019-6-5 9:4:4 ...