周末愉快--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如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
随机推荐
- 20210819 Emotional Flutter,Medium Counting,Huge Counting,字符消除2
考场 T1 一下想到了这题,将白块缩短 \(s\) 后维护类似的区间即可. T2 T3 俩计数,直接跳了. T4 的可行 \(t\) 集合相同相当与从 \(n\) 往前跳 kmp 数组,途径点相同,从 ...
- Intel® QAT加速卡之逻辑实例
Intel QAT加速卡逻辑实例 1. QAT相关的名词组织关系 在本手册中描述的平台上,处理器可以连接到一个或多个英特尔通信芯片组8925至8955系列(PCH)设备. 从软件角度来看,每个PCH设 ...
- throws声明异常中断式处理异常
1.throws 编译期异常,一直往上抛最后是JVM处理(打印并中断程序) 2.声明多个或者直接声明父类
- go build 与go install
相同点都能生成可执行文件 不同点go build 不能生成包文件, go install 可以生成包文件go build 生成可执行文件在当前目录下, go install 生成可执行文件在bin目录 ...
- vue-cli 项目中使用 v-chart 及导出 chart 图片
安装: npm i v-charts echarts -S 组件中使用: 1 <template> 2 <div class="app-chart"> 3 ...
- 一文搞懂如何使用Node.js进行TCP网络通信
摘要: 网络是通信互联的基础,Node.js提供了net.http.dgram等模块,分别用来实现TCP.HTTP.UDP的通信,本文主要对使用Node.js的TCP通信部份进行实践记录. 本文分享自 ...
- 一文详解JavaScript的继承模式
1 原型链继承 #### ES6中通过原型继承多个引用类型的属性和方法,由于原型和实例的关系,即每个构造函数都有自己的原型对象,同时原型有一个属性指向构造函数,并且实例有一个内部的指针指向原型.如果存 ...
- 如何在word中美观地插入编程代码
零.缘起 在整理Java笔记时,想把代码直接贴到word文档中,原来一直截图很麻烦,所以找到以下方法. 思想:问题比答案更重要!你能想到问题,才知道去百度搜索. 一.打开网站 http://www.p ...
- javascript 责任链模式 Chain of Responsibility
* 可拆分的责任链节点 // 可拆分的责任链节点 // Chain.prototype.setNextSuccessor 指定在链条中的下一个节点 // Chain.prototype.passReq ...
- javascript 对象池
* 一个对象池的简单应用 tool tip tootip.html <html> <head> <meta charset="UTF-8"> & ...