百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

周末愉快——css画大熊猫

bigegpt 2024-08-27 11:56 2 浏览

周末找了点轻松的话题，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>

相关推荐

10w qps缓存数据库——Redis（redis缓存调优）

一、Redis数据库介绍：Redis：非关系型缓存数据库nosql：非关系型数据库没有表，没有表与表之间的关系，更不存在外键存储数据的形式为key：values的形式c语言写的服务（监听端口），用来存...

Redis系列专题4--Redis配置参数详解

本文基于windowsX64，3.2.100版本讲解，不同版本默认配置参数不同在Redis中，Redis的根目录中有一个配置文件（redis.conf，windows下为redis.windows....

开源一夏 | 23 张图，4500 字从入门到精通解释 Redis

redis是目前出场率最高的NoSQL数据库，同时也是一个开源的数据结构存储系统，在缓存、数据库、消息处理等场景使用的非常多，本文瑞哥就带着大家用一篇文章入门这个强大的开源数据库——Redis。...

redis的简单与集群搭建（redis建立集群）

Redis是什么？是开源免费用c语言编写的单线程高性能的（key-value形式）内存数据库，基于内存运行并支持持久化的nosql数据库作用主要用来做缓存，单不仅仅是做缓存，比如：redis的计数器生...

推荐几个好用Redis图形化客户端工具

RedisPlushttps://gitee.com/MaxBill/RedisPlusRedisPlus是为Redis可视化管理开发的一款开源免费的桌面客户端软件，支持Windows、Linux...

关于Redis在windows上运行及fork函数问题

Redis在将数据库进行持久化操作时，需要fork一个进程，但是windows并不支持fork，导致在持久化操作期间，Redis必须阻塞所有的客户端直至持久化操作完成。微软的一些工程师花费时间在解决在...

你必须懂的Redis十大应用场景（redis常见应用场景）

Redis作为一款高性能的键值存储数据库，在互联网业务中有着广泛的应用。今天，我们就来详细盘点一下Redis的十大常用业务场景，并附上Golang的示例代码和简图，帮助大家更好地理解和应用Redis。...

极简Redis配置（redis的配置）

一、概述Redis的配置文件位于Redis安装目录下，文件名为redis.conf(Windows名为redis.windows.conf，linux下的是redis.conf)你可以通过C...

什么是redis，怎么启动及如何压测

从今天起咱们一起来学习一下关于“redis监控与调优”的内容。一、Redis介绍Redis是一种高级key-value数据库。它跟memcached类似，不过数据可以持久化，而且支持的数据类型很丰富。...

一款全新Redis UI可视化管理工具，支持WebUI和桌面——P3X Redis UI

介绍P3XRedisUI这是一个非常实用的RedisGUI，提供响应式WebUI访问或作为桌面应用程序使用，桌面端是跨平台的，而且完美支持中文界面。Githubhttps://github....

windows系统的服务器快速部署java项目环境地址

1、mysql:https://dev.mysql.com/downloads/mysql/（msi安装包）2、redis:https://github.com/tporadowski/redis/r...

window11 下 redis 下载与安装（windows安装redis客户端）

#热爱编程是一种怎样的体验#window11下redis下载与安装1）各个版本redis下载(windows)https://github.com/MicrosoftArchive/r...

一款轻量级的Redis客户端工具，贼好用!

使用命令行来操作Redis是一件非常麻烦的事情，我们一般会选用客户端工具来操作Redis。今天给大家分享一款好用的Redis客户端工具TinyRDM，它的界面清新又优雅，希望对大家有所帮助！简介Ti...

一个.NET开发且功能强大的Windows远程控制系统

我们致力于探索、分享和推荐最新的实用技术栈、开源项目、框架和实用工具。每天都有新鲜的开源资讯等待你的发现！项目介绍SiMayRemoteMonitorOS是一个基于Windows的远程控制系统，完...

Redis客户端工具详解(4款主流工具)

大家好，我是mikechen。Redis是大型架构的基石，也是大厂最爱考察内容，今天就给大家重点详解4款Redis工具@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合集...

一周热门
最近发表
标签列表