周末愉快--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如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
随机推荐
- elasticsearch支持大table格式数据的搜索
一.问题源起 数据情况 TableMeta, 保存table的元数据,通过fileId关联具体的GridFS文件: id name creator fileId 1 table1 mango f1 2 ...
- 解决方案-问题001：物理机、虚机等等Linux操作系统/usr/bin目录权限误操作,导致无法切换root
导语:平常运维人员会误操作一些目录权限,导致一些问题,那么如何恢复呢? 问题:物理机.虚机等等Linux操作系统/usr/bin目录权限误操作,导致无法切换root? 实验环境: ip地址 是否目录正 ...
- 洛谷P2115 Sabotage G 题解
题目 [USACO14MAR]Sabotage G 题解 本蒟蒻又来了,这道题可以用二分答案来解决.我们可以设答案最小平均产奶量为 \(x \ (x \in[1,10000])\) .然后二分搜索 \ ...
- MySQL——MySQL安装
1.rpm yum安装:安装方便.速度快.无法定制 2.二进制安装:解压即可使用,不能定制功能 3.编译安装: 可定制.安装慢: MySQL5.5之前:./configure make make in ...
- openswan中的in_struct和out_struct函数
openswan中的in_struct和out_struct函数 文章目录 openswan中的in_struct和out_struct函数 1. 花絮 2. in_struct代码实现分析 3. 它 ...
- golang 注释 exported function xxx should have comment or be unexported
0x00 问题 exported function xxx should have comment or be unexported. 0x01 解决 https://golang.org/s/sty ...
- Linux上安装服务器监视工具，名为Scout_Realtime。
如何从浏览器监视Linux服务器和进程指标 在服务器上安装Ruby 1.9.3+ sudo yum -y install rubygems-devel 在Linux系统上安装了Ruby之后,现在可以使 ...
- 安装Centos7,出现无法联网的问题-----解决办法
安装Centos7,出现无法联网的问题-----解决办法 我安装的是centos7的版本 在我照着centos7安装教程-CentOS-PHP中文网这个教程安装完后 我发现我的centOS无法联网,在 ...
- disruptor笔记之三：环形队列的基础操作(不用Disruptor类)
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- JMeter主要元件
配置元件 http cookie管理器 http信息头管理器 http请求默认值 统一管理 快速切换测试环境 http cache管理器 静态资源 监听器元件 查看结果树 分析查看某个请求的详情 请求 ...