周末愉快——css画大熊猫

最新推荐文章于 2024-09-26 08:37:49 发布
最新推荐文章于 2024-09-26 08:37:49 发布
阅读量350 收藏 6
点赞数 2
文章标签： CSS 大熊猫 动画 鼠标跟随 前端交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25674791/article/details/120943503
版权

周末找了点轻松的话题，css画大熊猫。

先上效果图

欢迎竞猜大熊猫到底说了什么？？

周末愉快——css画大熊猫

打招呼


 

周末愉快——css画大熊猫

眼睛跟随鼠标移动

再上源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover, user-scalable=no">
  <title>纯css画大熊猫</title>
</head>
<body>
<div id="scene1" class="scene-1">
  <!--熊猫坐着-->
  <div class="head">
    <div class="ear ear-left"></div>
    <div class="ear ear-right"></div>
    <div class="face">
      <div class="eye-out eye-left">
        <div id="leftEyeOut" class="eye">
          <div id="leftEye" class="eyeball"></div>
        </div>
      </div>
      <div class="eye-out eye-right">
        <div class="eye">
          <div id="rightEye" class="eyeball"></div>
        </div>
      </div>
      <div class="nose"></div>
      <div id="mouth" class="mouth">
        <div id="tongue" class="tongue"></div>
      </div>
    </div>
  </div>
  <div id="pandaBody" class="body">
    <div id="leftArm" class="arm-left"></div>
    <div id="rightArm" class="arm-right"></div>
    <div class="foot foot-left">
      <div class="toe"></div>
    </div>
    <div class="foot foot-right">
      <div class="toe"></div>
    </div>
  </div>
</div>

<style>
  /*动画相关*/
  @keyframes mouth_animation {
    0%   {
      top: 132px;
      height: 14px;
    }
    25%  {
      top: 123px;
      height: 32px;
    }
    50%  {
      top: 125px;
      height: 26px;
    }
    75%  {
      top: 123px;
      height: 32px;
    }
    100% {
      top: 132px;
      height: 14px;
    }
  }

  .mouth-animation {
    /*animation: infinite;*/
    animation-name: mouth_animation;
    animation-duration: 3s;
  }

  .tongue-animation {
    /*animation: infinite;*/
    animation-name: tongue_animation;
    animation-duration: 3s;
  }

  @keyframes tongue_animation {
    10%   {
      bottom: 3px;
      height: 8px;
      opacity: 0;
    }
    15%  {
      bottom: 4px;
      height: 14px;
      opacity: 1;
    }
    50%  {
      bottom: 4px;
      height: 16px;
      opacity: 1;
    }
    85%  {
      bottom: 4px;
      height: 14px;
      opacity: 1;
    }
    90% {
      bottom: 3px;
      height: 8px;
      opacity: 0;
    }
  }

  .arm-left-animation {
    animation-name: arm_left_animation;
    animation-duration: 3s;
  }

  @keyframes arm_left_animation {
    0% {
      transform: rotate(75deg);
    }
    50%   {
      transform: rotate(125deg);
    }
    100% {
      transform: rotate(75deg);
    }
  }

  .arm-right-animation {
    animation-name: arm_right_animation;
    animation-duration: 3s;
  }

  @keyframes arm_right_animation {
    0% {
      transform: rotate(-75deg);
    }
    50%   {
      transform: rotate(-125deg);
    }
    100% {
      transform: rotate(-75deg);
    }
  }
</style>

<script>
  // 打招呼
  var hasAnimation = false

  function doAnimation(e, centerx) {

    let arm, ani;
    if (centerx > e.pageX) {
      arm = document.getElementById('leftArm');
      ani = 'arm-left-animation'
    } else {
      arm = document.getElementById('rightArm');
      ani = 'arm-right-animation'
    }

    var mouth = document.getElementById('mouth');
    mouth.classList.add("mouth-animation");

    var tongue = document.getElementById('tongue');
    tongue.classList.add("tongue-animation");

    arm.classList.add(ani);
    setTimeout(() => {
      hasAnimation = false
      mouth.classList.remove("mouth-animation");
      tongue.classList.remove("tongue-animation");
      arm.classList.remove(ani);
    }, 3000)
  }

  var pandaBody = document.getElementById('pandaBody');
  pandaBody.addEventListener("dblclick", function (e) {
    if (hasAnimation) {
      return ;
    }
    hasAnimation = true

    var x = pandaBody.getBoundingClientRect().x + pandaBody.getBoundingClientRect().width / 2.0;
    doAnimation(e, x)
  })
</script>

<script>
  // 眼睛跟随动
  var leftEyeCenter = {}, rightEyeCenter = {}
  setTimeout(() => {
    var eyel = document.getElementById('leftEye');
    var eyeCenterX = eyel.getBoundingClientRect().x + eyel.getBoundingClientRect().width / 2.0;
    var eyeCenterY = eyel.getBoundingClientRect().y + eyel.getBoundingClientRect().height / 2.0;
    leftEyeCenter = {x: eyeCenterX, y: eyeCenterY, dom: eyel}

    var eyer = document.getElementById('rightEye');
    eyeCenterX = eyer.getBoundingClientRect().x + eyer.getBoundingClientRect().width / 2.0;
    eyeCenterY = eyer.getBoundingClientRect().y + eyer.getBoundingClientRect().height / 2.0;
    rightEyeCenter = {x: eyeCenterX, y: eyeCenterY, dom: eyer}
  }, 100)

  var body = document.body;

  body.addEventListener("click", function (e) {
    eyePosition(leftEyeCenter, e);
    eyePosition(rightEyeCenter, e);
  })
  
  function eyePosition(eyeCenter, e) {
    var cx = e.pageX, cy = e.pageY;

    var eye = eyeCenter.dom;

    if ((cx < eyeCenter.x + 8 && cx > eyeCenter.x - 8) && cy < eyeCenter.y + 8 && cy > eyeCenter.y - 8) {
      eye.style = "";
    } else {
      var st = Math.atan2((cy - eyeCenter.y), (cx - eyeCenter.x));
      var x = 6 + 6 * Math.cos(st);
      var y = 6 + 6 * Math.sin(st);
      eye.style.left = x + 'px';
      eye.style.top = y + 'px';
    }
  }

  var timeOut = null;
  body.addEventListener("mousemove", function (e) {
    if (timeOut) {
      return ;
    }
    eyePosition(leftEyeCenter, e);
    eyePosition(rightEyeCenter, e);
    timeOut = setTimeout(() => {
      timeOut = null
    }, 50)
  })

</script>

<style>
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .scene-1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 360px;
  }
</style>

<style>
  /*头*/
  .head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 160px;
    width: 200px;
    z-index: 10;
  }
  .head .face {
    position: relative;
    height: 160px;
    width: 200px;
    border-radius: 50% 50% 40% 40%;
    background: white;
    border: 1px solid black;
    z-index: 1;
  }
  .head .ear {
    position: absolute;
    top: -15px;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background: black;
  }
  .head .ear:after {
    content: ' ';
    position: absolute;
    left: 20px;
    top: 20px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: darkgrey;
  }
  .head .ear-left {
    left: -15px;
  }
  .head .ear-right {
    right: -15px;
  }
  .head .eye-out {
    position: absolute;
    top: 30px;
    height: 80px;
    width: 60px;
    border-radius: 50%;
    background: black;
  }
  .head .eye {
    position: absolute;
    top: 20px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    border: 2px solid white;
    background-color: white;
  }
  .head .eye-left {
    left: 50px;
    transform: rotate(30deg);
    transform-origin: 0% 0%;
  }
  .head .eye-left .eye {
    left: 15px;
    transform: rotate(-30deg);
    transform-origin: 50% 50%;
  }
  .head .eye-right {
    right: 50px;
    transform: rotate(-30deg);
    transform-origin: 100% 0%;
  }
  .head .eye-right .eye {
    right: 15px;
    transform: rotate(30deg);
    transform-origin: 50% 50%;
  }
  .head .eyeball {
    position: absolute;
    top: 6px;
    left: 6px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: black;
  }
  .head .eyeball:before {
    content: " ";
    position: absolute;
    left: 3px;
    top: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50% / 50%;
    background-color: white;
  }
  .head .eyeball:after {
    content: " ";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50% / 50%;
    background-color: white;
  }
  .head .nose {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 30px;
    height: 20px;
    transform: translateX(-50%);
    border-radius: 50% 50% 40% 40%;
    background-color: black;
  }
  .head .nose:after {
    content: ' ';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 12px;
    height: 8px;
    border-radius: 50% / 50%;
    background-color: white;
  }
  .head .mouth {
    position: absolute;
    top: 132px;
    left: 50%;
    width: 70px;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 40% 40% 50% 50%;
    background-color: black;
  }
  .head .mouth .tongue {
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 40px;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 50%;
    background-color: red;
    opacity: 0;
  }
</style>

<style>
  /*身子*/
  .body {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    height: 220px;
    width: 240px;
    z-index: 5;
  }
  .body:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    height: 220px;
    width: 240px;
    border-radius: 50% 50% 20% 20%;
    background-color: black;
    z-index: 2;
  }
  .body:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 60px;
    width: 228px;
    height: 160px;
    overflow: hidden;
    border-radius: 160px 160px 40% 40%;
    background-color: white;
    border: 1px solid black;
    z-index: 3;
  }
  .body .arm-left {
    position: absolute;
    top: 40px;
    left: 20px;
    height: 120px;
    width: 60px;
    transform: rotate(75deg);
    transform-origin: 50% 10%;
    background-color: black;
    border-radius: 0 0 30px 30px;
  }
  .body .arm-right {
    position: absolute;
    top: 40px;
    right: 20px;
    height: 120px;
    width: 60px;
    transform: rotate(-75deg);
    transform-origin: 50% 10%;
    background-color: black;
    border-radius: 0 0 30px 30px;
  }
  .body .foot {
    position: absolute;
    top: 150px;
    height: 80px;
    width: 80px;
    background-color: black;
    border-radius: 40px;
    z-index: 5;
  }
  .body .foot:after {
    content: '';
    position: absolute;
    top: 30px;
    left: 20px;
    height: 40px;
    width: 40px;
    background-color: darkgrey;
    border-radius: 40px;
    z-index: 5;
  }
  .body .foot-left {
    left: -10px;
  }
  .body .foot-right {
    right: -10px;
  }
  .body .toe {
    position: absolute;
    top: 10px;
    left: 32px;
    height: 16px;
    width: 16px;
    background-color: darkgrey;
    border-radius: 40px;
  }
  .body .toe:before {
    content: " ";
    position: absolute;
    top: 4px;
    left: -18px;
    height: 16px;
    width: 16px;
    background-color: darkgrey;
    border-radius: 40px;
  }
  .body .toe:after {
    content: " ";
    position: absolute;
    top: 4px;
    left: 18px;
    height: 16px;
    width: 16px;
    background-color: darkgrey;
    border-radius: 40px;
  }
</style>

</body>
</html>
杂学不精
关注
可爱的熊猫图形CSS3特效
07-24
可爱的熊猫图形CSS3特效是一款基于css3绘制的卡通可爱熊猫动物，坐在地上的熊猫图形ui特效。
css熊猫动画
ZJ___MR9799的博客
04-26 630
<div class="panda"> </div> .panda { top: 25%; left: 60%; width:21em; height:16em; background-color:white; background-image:radial-gradient(ellipse...
Panda CSS 项目教程
最新发布
gitblog_00314的博客
09-26 864
Panda CSS 项目教程 panda ???? Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️ 项目地址: https://gitcode.com/gh_...
五分钟用CSS创造一只萌萌哒的大熊猫
weixin_34242658的博客
08-20 777
黑眼圈的大熊猫可谓非常可爱，今天就用CSS实现以下萌萌哒的大熊猫一枚 代码在这儿：https://codepen.io/woshilyy/p... body代码： <div class="panda"> <span class="hat"></span> <spa...
黑与白的融合，手把手带大家画一只大熊猫
Web_boom的博客
10-13 387
它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
html+css 实现 熊猫样式
weixin_42998230的博客
03-06 4157
样式实现
animate.css——页面动画
03-11
animate.css
CSS3——CSS3动画(animation)及应用
流楚丶格念的博客
07-15 4888
改革春风吹满地动画(CSS3) animation案例1：太阳系的运作案例2：图片播放标题 动画(CSS3) animation 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 }
CSSCheckStyle——CSS的解析、检查、修复和压缩
03-02
说起来也比较奇怪，同样是前端开发的三大语言之一，CSS的检查工具备受冷落，而JS的代码规范检查工具则层出不穷。JSLint/JSHint/gjslint等神器不断涌现，且检查的严格程度令人瞠目结舌，但是CSS的检查工具却寥寥无几...
CSS——CSS 三大特性（理论）
流楚丶格念的博客
06-29 4449
文章目录CSS层叠性CSS继承性CSS优先级CSS特殊性（Specificity）总结： 层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。 CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序
HTML+CSS大熊猫（前端）
hexuhui0920的博客
01-02 700
HTML+CSS大熊猫（前端）
案例篇13—css3实现可爱的熊猫和竹子（附源码）
风中追风
03-10 362
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个css3实现一个可爱的熊猫和竹子效果，赶紧学起来吧，跟着本专栏尝试用css3做一些有意思的动画效果，提高兴趣的同时学到一些css技巧。 2.CSS编写 总结 以上就是今天要讲的内容啦，给大家分享了一个css3实现一个甜甜圈饼干卡通效果，谢谢观看，如果觉得对您有帮助的话，可否给博主一个小小的赞和关注~
css-左三角
qq_41670147的博客
10-31 897
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Panda CSS : 一种现代化的 CSS-in-JS 解决方案
python_bug262的博客
09-20 256
总结来说，Panda CSS 是一个现代化的 CSS-in-JS 解决方案，它提供了简洁的语法和丰富的功能，使开发人员能够更轻松地管理和应用样式。通过将样式直接嵌入到 JavaScript 代码中，Panda CSS 提供了更高的灵活性和可重用性，同时还支持媒体查询和伪类选择器等高级特性。在这篇文章中，我们将介绍一种名为 Panda CSS 的现代化 CSS-in-JS 解决方案，并提供相应的源代码示例。它的设计灵感来自于可爱的熊猫，并采用了一种简单的语法，使开发人员能够以一种更直观和自然的方式编写样式。
怎样用一个DIV绘制熊猫头像
切糕的技术博客
10-27 2335
纯HTML+CSS3实现的图片
如何用css和HTML结合画熊,结合伪元素实现的纯CSS3高级图形绘制
weixin_33651906的博客
07-01 564
自小编上次整理了一些基础图形的绘制方法之后，大家都纷纷表示对css3的绘图技巧学习很有帮助。虽说万变不离其宗，再复杂的图形也可以用最简单的三角形或者圆弧组合出来，但仍有不少朋友反映，学会基本图形也不懂得怎样组合，也不知道什么时候用伪元素比较合适。所以今天小编来一篇相对复杂的图形绘制教程，大家看过之后就会发现，很多看似复杂的图形(比如下图这样的)，换一下组合方式就会变得简单很多。如果你觉得以上图形无...
【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）
weixin_34077371的博客
05-11 263
仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用canvas不是能画得更逼真而且更简单吗？这点我也非常赞同，但我的理由还是，那就没意思了。 这次写的详细一点，把各个部位都拆出来分析。 GitHub传送门：https://github.com...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值