扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >Css如何实现笑脸猫动画制作
  • 680

0
分享到

Css如何实现笑脸猫动画制作

2024-04-02 19:04:59 680人浏览 泡泡鱼
摘要

这篇文章主要为大家展示了“CSS如何实现笑脸猫动画制作”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Css如何实现笑脸猫动画制作”这篇文章吧。代码如下：<

这篇文章主要为大家展示了“CSS如何实现笑脸猫动画制作”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Css如何实现笑脸猫动画制作”这篇文章吧。

代码如下：

<html>

<head>

<style>

.face {

 

  left: 50%;

  top: 50%;

  position: absolute;

  width: 400px;

  height: 340px;

  margin-left: -200px;

  margin-top: -170px;

  border-radius: 50% 50% 35% 35%;

  border: 2px solid #000;

  z-index: 10;

  background: #f3f3f3;

  overflow: hidden;

}

 

 

 

.ear-wrap {

  position: absolute;

  width: 400px;

  top: 100px;

  left: 50%;

  margin-left: -200px;

}

.ear {

  width: 160px;

  height: 200px;

  position: absolute;

  top: -22px;

  left: 0;

  border: 2px solid #000;

  background: #f3f3f3;

  transfORM: rotate(-15deg);

  -ms-transform: rotate(-15deg);

  -moz-transform: rotate(-15deg);

  -WEBkit-transform: rotate(-15deg);

  -o-transform: rotate(-15deg);

  border-radius: 4% 80% 0% 50%;

  transition: all 1s;

}

.ear-wrap .right {

  left: auto;

  right: 0;

  border-radius: 80% 4% 50% 0%;

  transform: rotate(15deg);

  -ms-transform: rotate(15deg);

  -moz-transform: rotate(15deg);

  -webkit-transform: rotate(15deg);

  -o-transform: rotate(15deg);

}

 

.hair {

  position: absolute;

  width: 180px;

  height: 160px;

  left: 50%;

  margin-left: -90px;

  background: #8d8d8d;

  overflow: hidden;

  border-radius: 0 0 50% 50%;

}

.hair div {

  width: 90px;

  height: 160px;

  background: #f0ac6b;

}

 

 

 

.eye-wrap {

  position: absolute;

  width: 300px;

  height: 60px;

  top: 200px;

  left: 50%;

  margin-left: -150px;

  overflow: hidden;

}

.eye-wrap .eye {

  height: 100px;

  width: 100px;

  position: absolute;

}

.eye-wrap .eye-circle {

  width: 100px;

  height: 100px;

  border: 2px solid #000;

  overflow: hidden;

  position: absolute;

  border-radius: 50%;

  box-sizing: border-box;

}

.eye-wrap .eye-core {

  height: 100px;

  width: 30px;

 

  background: #000;

  position: absolute;

  left: 50%;

  margin-left: -15px;

  transition: all 1s;

}

.eye-wrap .eye-bottom {

  height: 50px;

  width: 160px;

  border-radius: 50%;

  position: absolute;

 

  margin-top: 50px;

  border-top: 2px solid #000;

  left: -30px;

  background: #f6f7f2;

  transition: all 1s;

}

.eye-wrap .right {

  left: auto;

  right: 0px;

}

.eye-red {

  position: absolute;

  height: 28px;

  width: 70px;

  background: red;

  top: 34px;

 

  left: 18px;

  border-radius: 50% 50% 50% 50%;

  background-image: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);

  background-image: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);

  background-image: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);

  opacity: 0.0;

 

  transition: all 0.1s ease-in 0.2s;

}

 

.nose {

  width: 30px;

  height: 10px;

 

  border-bottom: 8px solid #000;

  border-radius: 0% 0% 50% 50%;

  top: 250px;

  left: 50%;

  margin-left: -15px;

  position: absolute;

}

 

 

.mouth-wrap {

  position: absolute;

  top: 268px;

  width: 100px;

  left: 50%;

  margin-left: -50px;

  height: 20px;

  overflow: hidden;

}

.mouth {

  width: 50px;

  height: 40px;

  border-bottom: 4px solid #000;

  border-right: 4px solid #000;

  border-radius: 0% 40% 50% 20%;

  margin-top: -26px;

  position: absolute;

  left: 0;

  transition: all 1s;

}

.mouth-wrap .right {

   border-bottom: 4px solid #000;

  border-right: none;

  border-left: 4px solid #000;

  border-radius: 40% 0% 20% 50%;

  position: absolute;

  left: auto;

  right: 0;

}

 

 

 

.mustache-wrap {

    height: 80px;

    width: 380px;

    position: absolute;

    top: 190px;

    z-index: 20;

    left: 50%;

    margin-left: -190px;

}

.mustache > div:first-child {

    width: 30px;

    height: 10px;

    border-top: 6px #E53941 solid;

    border-radius: 30% 50% 20% 50%;

    transform: rotate(25deg);

    -ms-transform: rotate(25deg);

    -moz-transform: rotate(25deg);

    -webkit-transform: rotate(25deg);

    -o-transform: rotate(25deg);

    margin-left: 20px;

}

.mustache > div:nth-child(2) {

    width: 20px;

    height: 6px;

    background-color: #E53941;

    border-radius: 50% 50% 50% 50%;

    transform: rotate(25deg);

    -ms-transform: rotate(25deg);

    -moz-transform: rotate(25deg);

    -webkit-transform: rotate(25deg);

    -o-transform: rotate(25deg);

    margin-left: 20px;

}

.mustache > div:nth-child(3) {

   

    width: 32px;

    height: 10px;

    border-bottom: 4px #E53941 solid;

    border-radius: 30% 0% 50% 30%;

    transform: rotate(25deg);

    -ms-transform: rotate(25deg);

    -moz-transform: rotate(25deg);

    -webkit-transform: rotate(25deg);

    -o-transform: rotate(25deg);

    margin-left: 8px;

}

.mustache > div:nth-child(4) {

    margin-top: 20px;

    width: 26px;

    height: 20px;

    border-bottom: 4px #E53941 solid;

    border-radius: 30% 0% 50% 30%;

    transform: rotate(30deg);

    -ms-transform: rotate(30deg);

    -moz-transform: rotate(30deg);

    -webkit-transform: rotate(30deg);

    -o-transform: rotate(30deg);

    margin-left: 28px;

}

.mustache > div:last-child {

    width: 22px;

    height: 10px;

    border-bottom: 3px #E53941 solid;

    border-radius: 0% 0% 50% 50%;

    transform: rotate(-15deg);

    -ms-transform: rotate(-15deg);

    -moz-transform: rotate(-15deg);

    -webkit-transform: rotate(-15deg);

    -o-transform: rotate(-15deg);

    margin-left: 40px;

    margin-top: -8px;

}

 

.mustache-wrap .right {

    transform: rotateY(180deg);

    -webkit-transform: rotateY(180deg);

    -moz-transform: rotateY(180deg);

    margin-top: -85px;

}

 

 

.container:hover .ear-wrap > div:first-child {

   

    transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    border-radius: 4% 80% 0% 60%;

    transition: all 1s;

    

}

 

.container:hover .ear-wrap > div:last-child {

   

    transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    border-radius: 80% 4% 60% 0%;

    transition: all 1s;

   

}

.container:hover .eye-bottom {

  margin-top: 30px;

  transition: all 1s;

}

.container:hover .eye-red {

  opacity: 1;

  transition: all 2.5s;

}

.container:hover .mouth {

  border-radius: 50%;

  transition: all 1s;

}

.container:hover .eye-core {

  width: 40px;

  margin-left: -20px;

  transition: all 1s;

}

 

 

</style>

</head>

<body>

  <div class="container">

    <!-- 脸 -->

    <div class="face">

      <!-- 头发 -->

      <div class="hair">

        <div></div>

      </div>

      <!-- 眼睛 -->

      <div class="eye-wrap">

        <div class="eye left">

          <div class="eye-circle">

            <div class="eye-core"></div>

          </div>

          <div class="eye-bottom"></div>

          <div class="eye-red"></div>

        </div>

        <div class="eye right">

          <div class="eye-circle">

            <div class="eye-core"></div>

          </div>

          <div class="eye-bottom"></div>

          <div class="eye-red"></div>

        </div>

      </div>

      <!-- 鼻子 -->

      <div class="nose">

      </div>

      <!-- 嘴巴 -->

      <div class="mouth-wrap">

        <!-- <div class="mouth-top"></div> -->

        <div class="mouth left"></div>

        <div class="mouth right"></div>

      </div>

      <!-- 胡子 -->

      <div class="mustache-wrap">

        <div class="mustache left">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

        <div class="mustache right">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

    </div>

    <!-- 耳朵 -->

    <div class="ear-wrap">

      <div class="ear left"> </div>

      <div class="ear right"> </div>

    </div>

  </div>

</body>

</html>

以上是“Css如何实现笑脸猫动画制作”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！

--结束END--

本文标题: Css如何实现笑脸猫动画制作

本文链接: https://lsjlt.com/news/89529.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Css如何实现笑脸猫动画制作
    这篇文章主要为大家展示了“Css如何实现笑脸猫动画制作”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Css如何实现笑脸猫动画制作”这篇文章吧。代码如下：<...
    99+
    2024-04-02
  • Android实现笑脸进度加载动画
    目录一、默认状态1、画嘴巴2、画眼睛二、合并状态1、嘴巴的旋转2、眼睛的旋转三、自转状态1、开启动画2、重新绘制四、分离状态最后附上完整代码最近看到豆瓣的笑脸loading很有意思，...
    99+
    2024-04-02
  • 怎么在Android中实现一个笑脸进度加载动画
    怎么在Android中实现一个笑脸进度加载动画？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。Android是什么Android是一种基于Linux内核的自由及开放源代码的操作系...
    99+
    2023-06-14
  • 如何使用CSS制作文字实现逐帧动画
    这篇文章主要介绍了如何使用CSS制作文字实现逐帧动画，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。方法步骤HTML部分1、创建html定义一...
    99+
    2024-04-02
  • Android仿支付宝笑脸刷新加载动画的实现代码
    看到支付宝的下拉刷新有一个笑脸的动画，因此自己也动手实现一下。效果图如下： 一、总体思路 1、静态部分的笑脸。 这一部分的笑脸就是一个半圆弧，加上两颗眼睛，这部分比较简单，用...
    99+
    2022-06-06
    支付宝 动画 Android
  • 如何使用CSS制作旋转动画的实现步骤
    如何使用CSS制作旋转动画的实现步骤在现代网页设计中，动画效果是非常重要和受欢迎的一个元素。其中，旋转动画可以给网页注入活力和吸引力。本文将介绍如何使用CSS制作旋转动画的具体步骤，并提供一些代码示例。步骤一：创建HTML结构首先，在HTM...
    99+
    2023-10-26
    CSS 制作 旋转动画
  • js如何实现一个戴眼镜的笑脸
    这篇文章主要介绍了js如何实现一个戴眼镜的笑脸，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。首先我给大家一个图片示例：大家可以根据这个图来编...
    99+
    2024-04-02
  • CSS如何实现旋转动画
    这篇文章主要讲解了“CSS如何实现旋转动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS如何实现旋转动画”吧！ 　　沿X轴方向旋转 　　在代码中指...
    99+
    2024-04-02
  • 如何实现动画CSS边框
    这篇文章给大家分享的是有关如何实现动画CSS边框的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。动画CSS边框当我们想使我们的项目更可见时，该怎么办来给它做个动画!我们可以对我们的边框进行动画化处理，甚至在不改变元...
    99+
    2023-06-27
  • css如何实现车轨动画
    这篇文章主要讲解了“css如何实现车轨动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css如何实现车轨动画”吧！css实现车轨动画的方法：1、创建一个HTML文件，并定义div为“<...
    99+
    2023-07-05
  • 如何制作flash动画
    本文小编为大家详细介绍“如何制作flash动画”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何制作flash动画”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。制作flash动画：首先下载安装flash并打开，...
    99+
    2023-07-02
  • 如何使用CSS制作页面切换动画
    这篇文章主要讲解了“如何使用CSS制作页面切换动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用CSS制作页面切换动画”吧！今天我们想与大家分享一组...
    99+
    2024-04-02
  • jQuery如何模拟实现天猫购物车动画效果
    这篇文章主要介绍了jQuery如何模拟实现天猫购物车动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一、功能描述： &nbs...
    99+
    2024-04-02
  • CSS如何实现loading动画效果
    这篇文章主要介绍CSS如何实现loading动画效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体如下：预览代码使用了CSS的keyframes自定义关键帧动画<!DOCT...
    99+
    2024-04-02
  • css中如何实现动画属性
    这篇文章主要介绍了css中如何实现动画属性，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 　　一、css动画（animation）属性可以...
    99+
    2024-04-02
  • css动画中如何实现倾斜
    小编给大家分享一下css动画中如何实现倾斜，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ css动画...
    99+
    2024-04-02
  • css如何制作全屏幻灯片切换动画
    这篇文章主要介绍了css如何制作全屏幻灯片切换动画，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。<!DOCTYPE html>&...
    99+
    2024-04-02
  • CSS如何实现菜单按钮动画
    这篇文章将为大家详细讲解有关CSS如何实现菜单按钮动画，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。要写一个下拉菜单点击按钮 菜单入口就是是点击一个图标按钮 之前都是随便用个图片代替 今天突然想用CSS写...
    99+
    2023-06-08
  • CSS如何实现圆形缩放动画
    这篇文章将为大家详细讲解有关CSS如何实现圆形缩放动画，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。最近在做公司的登录页，UE同学希望第三方登录的图标在hover的时候有一个圆形的缩放效果（原话是波纹效果...
    99+
    2023-06-08
  • 如何使用CSS制作迷你图标动画效果
    CSS是一种用于描述网页样式的语言，在网页设计中起到了至关重要的作用。除了可以控制网页的布局和颜色外，CSS还可以实现一些动画效果，为网页增添生动活泼的气息。本文将介绍如何使用CSS制作迷你图标动画效果，并提供具体的代码示例。首先，我们需要...
    99+
    2023-10-21
    动画效果 CSS 图标 制作 迷你
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作