周末愉快--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>
周末愉快--css画大熊猫的更多相关文章
- 一步一步教你用CSS画爱心
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Effective前端3：用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 用css画图标
css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
随机推荐
- mysqli的基本使用
简单实例 面向过程方式 // 创建数据库连接 $connect = mysqli_connect('127.0.0.1', 'root', 'root', 'test', 8889); // 判读是否 ...
- [编译] 10、kconfig 入门指导教程
目录 前言 1. 安装 kconfig 2. 克隆一个 demo 3. 运行 kconfig 4. 源码解析 4.1 选择题目设计模板 4.2 填空题目设计模板 4.3 判断题目设计模板 5. 产物解 ...
- Python - 面向对象编程 - 小实战（2）
需求 小明和小美都爱跑步 小明体重 75 公斤 小美体重 45 公斤 每次跑步会减肥 0.5 公斤 每次吃东西体重增加 1 公斤 需求分析 小明.小美都是一个具体的对象,他们都是人,所以应该抽象成人类 ...
- VUE004. provide与inject的使用（祖先组件隔多层传静态值给子孙组件）
provide和inject可以通过祖先组件隔三层四层甚至隔着九层妖塔传值给子孙组件. 需要注意的是这样的传值方式是非响应式的,需要结合自身的应用场景,比如将上传的限制条件通过父组件传值给子组件的子组 ...
- 在springboot pom文件配置过程，`spring-boot-maven-plugin`配置出错的问题解决及配置过程出现问题的一些思考
在springboot pom文件配置过程,spring-boot-maven-plugin配置出错的问题解决及配置过程出现问题的一些思考 解决方法一: 也是最简单的方法,可能是maven没有来得及导 ...
- 215 day01_Object类、常用API
day01[Object类.常用API] 主要内容 Object类 Date类 DateFormat类 Calendar类 System类 StringBuilder类 包装类 教学目标 -[ ] 能 ...
- webpack learn2-vue的jsx写法和postcss 1
首先输入命令安装 npm i postcss-loader autoprefixer babel-loader babel-core 在根目录创建文件 .babelrc和postcss.config. ...
- MySql分区、分表和分库
MySql分区.分表和分库 数据库的数据量达到一定程度之后,为避免带来系统性能上的瓶颈.需要进行数据的处理,采用的手段是分区.分片.分库.分表. 一些问题的解释: 1.为什么要分表和分区? 日常开发中 ...
- CSS写一个缺角的div和菱形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- http报文常见的请求头、响应头
http报文常见的请求头 1.Accept Accept: text/html 浏览器可以接受服务器回发的类型为 text/html. Accept: / 代表浏览器可以处理所有类型,(一般浏览 ...