CSS3如何实现各种动态表情效果？（代码示例）

最新推荐文章于 2024-05-06 21:54:19 发布

猿说前端

最新推荐文章于 2024-05-06 21:54:19 发布

阅读量1.1k

点赞数

文章标签： html css 前端 web前端前端教程

本文链接：https://blog.csdn.net/ITZ1992/article/details/106192269

版权

CSS3如何实现各种动态表情效果？下面本篇文章给大家通过实例来介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

CSS3实现各种动态表情效果

效果图：

代码如下，复制即可使用：

<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <style type="text/css">
      body {
        text-align: center;
        margin: 80px auto 0;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      }
      
      .emoji {
        width: 120px;
        height: 120px;
        margin: 15px;
        background: #FFDA6A;
        display: inline-block;
        border-radius: 50%;
        position: relative;
      }
      
      .emoji:after {
        position: absolute;
        bottom: -40px;
        font-size: 18px;
        width: 60px;
        left: calc(50% - 30px);
        color: #8A8A8A;
      }
      
      .emoji__face,
      .emoji__eyebrows,
      .emoji__eyes,
      .emoji__mouth,
      .emoji__tongue,
      .emoji__heart,
      .emoji__hand,
      .emoji__thumb {
        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,
      .emoji__tongue:before,
      .emoji__tongue:after,
      .emoji__heart:before,
      .emoji__heart:after,
      .emoji__hand:before,
      .emoji__hand:after,
      .emoji__thumb:before,
      .emoji__thumb:after {
        position: absolute;
        content: '';
      }
      
      .emoji__face {
        width: inherit;
        height: inherit;
      }
      
      .emoji--like {
        background: #548DFF;
      }
      
      .emoji--like:after {
        content: 'Like';
      }
      
      .emoji--like .emoji__hand {
        left: 25px;
        bottom: 30px;
        width: 20px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 5px;
        z-index: 0;
        animation: hands-up 2s linear infinite;
      }
      
      .emoji--like .emoji__hand:before {
        left: 25px;
        bottom: 5px;
        width: 40px;
        background: inherit;
        height: 10px;
        border-radius: 2px 10px 10px 2px;
        box-shadow: 1px -9px 0 1px #FFFFFF, 2px -19px 0 2px #FFFFFF, 3px -29px 0 3px #FFFFFF;
      }
      
      .emoji--like .emoji__thumb {
        border-bottom: 20px solid #FFFFFF;
        border-left: 20px solid transparent;
        top: -25px;
        right: -25px;
        z-index: 2;
        transform: rotate(5deg);
        transform-origin: 0% 100%;
        animation: thumbs-up 2s linear infinite;
      }
      
      .emoji--like .emoji__thumb:before {
        border-radius: 50% 50% 0 0;
        background: #FFFFFF;
        width: 10px;
        height: 12px;
        left: -10px;
        top: -8px;
        transform: rotate(-15deg);
        transform-origin: 100% 100%;
        box-shadow: -1px 4px 0 -1px #FFFFFF;
      }
      
      .emoji--love {
        background: #F55064;
      }
      
      .emoji--love:after {
        content: 'Love';
      }
      
      .emoji--love .emoji__heart {
        left: calc(50% - 40px);
        top: calc(50% - 40px);
        width: 80px;
        height: 80px;
        animation: heart-beat 1s linear infinite alternate;
      }
      
      .emoji--love .emoji__heart:before,
      .emoji--love .emoji__heart:after {
        left: calc(50% - 20px);
        top: calc(50% - 32px);
        width: 40px;
        height: 64px;
        background: #FFFFFF;
        border-radius: 20px 20px 0 0;
      }
      
      .emoji--love .emoji__heart:before {
        transform: translate(20px) rotate(-45deg);
        transform-origin: 0 100%;
      }
      
      .emoji--love .emoji__heart:after {
        transform: translate(-20px) rotate(45deg);
        transform-origin: 100%

最低0.47元/天解锁文章

猿说前端

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3如何实现各种动态表情效果？（代码示例）

CSS3如何实现各种动态表情效果？下面本篇文章给大家通过实例来介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。CSS3实现各种动态表情效果效果图：代码如下，复制即可使用：<!DOCTYPE html><html> <head> <title></title> <style type="text/css"> body { text-align: ce
复制链接

扫一扫