<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css3实现的3D 宝贝猪猡动画</title>
<style>
.pig {
width: 120px;
height: 100px;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-animation: r 10s infinite alternate;
animation: r 10s infinite alternate;
}
.pig > div {
position: absolute;
bottom: 0;
left: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
.pig > div > div {
position: absolute;
bottom: 0;
left: 0;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
.pig .body {
width: 120px;
height: 100px;
}
.pig .body .front {
-webkit-transform: translateZ(150px);
transform: translateZ(150px);
background-color: #ffa7b6;
width: 120px;
height: 100px;
}
.pig .body .back {
background-color: #ffa7b6;
width: 120px;
height: 100px;
}
.pig .body .left {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
width: 150px;
height: 100px;
background-color: #ffb6c3;
}
.pig .body .right {
-webkit-transform: rotateY(-90deg) translateZ(-120px);
transform: rotateY(-90deg) translateZ(-120px);
width: 150px;
height: 100px;
background-color: #ff97a9;
}
.pig .body .top {
background-color: #ffb6c3;
-webkit-transform: rotateX(-90deg) translateZ(-100px);
transform: rotateX(-90deg) translateZ(-100px);
width: 120px;
height: 150px;
}
.pig .body .bottom {
background-color: #ffa7b6;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
width: 120px;
height: 150px;
}
.pig .body div {
position: absolute;
bottom: 0;
left: 0;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
.left,
.right {
background-image: -webkit-linear-gradient(top, #F9E4E6, #FEB8D1);
background-image: linear-gradient(to bottom, #F9E4E6, #FEB8D1);
}
.pig .body .front {
background-image: -webkit-linear-gradient(top, #B65D5B, #FEB8D1);
background-image: linear-gradient(to bottom, #B65D5B, #FEB8D1);
}
.pig .head {
width: 100px;
height: 70px;
top: 10px;
left: 50%;
-webkit-transform: translate3d(-50%, 0, 150px);
transform: translate3d(-50%, 0, 150px);
}
.pig .head .front {
-webkit-transform: translateZ(40px);
transform: translateZ(40px);
background-color: #ffa7b6;
width: 100px;
height: 70px;
}
.pig .head .back {
background-color: #ffa7b6;
width: 100px;
height: 70px;
}
.pig .head .left {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
width: 40px;
height: 70px;
background-color: #ffb6c3;
}
.pig .head .right {
-webkit-transform: rotateY(-90deg) translateZ(-100px);
transform: rotateY(-90deg) translateZ(-100px);
width: 40px;
height: 70px;
background-color: #ff97a9;
}
.pig .head .top {
background-color: #ffb6c3;
-webkit-transform: rotateX(-90deg) translateZ(-70px);
transform: rotateX(-90deg) translateZ(-70px);
width: 100px;
height: 40px;
}
.pig .head .bottom {
background-color: #ffa7b6;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
width: 100px;
height: 40px;
}
.pig .head .front {
background-image: -webkit-linear-gradient(top, #D06D67, #E79DAE);
background-image: linear-gradient(to bottom, #D06D67, #E79DAE);
}
.pig .head .front::after {
position: absolute;
-webkit-animation: flash 3s infinite;
animation: flash 3s infinite;
content: "";
width: 10px;
height: 15px;
top: 0;
left: 50%;
box-shadow: 15px 0 0 0 #000, -15px 0 0 0 #000;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
.pig .nose {
width: 70px;
height: 36px;
top: 20px;
left: 50%;
-webkit-transform: translate3d(-50%, 0, 190px);
transform: translate3d(-50%, 0, 190px);
}
.pig .nose .front {
-webkit-transform: translateZ(30px);
transform: translateZ(30px);
background-color: #ffa7b6;
width: 70px;
height: 36px;
}
.pig .nose .back {
background-color: #ffa7b6;
width: 70px;
height: 36px;
}
.pig .nose .left {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
width: 30px;
height: 36px;
background-color: #ffb6c3;
}
.pig .nose .right {
-webkit-transform: rotateY(-90deg) translateZ(-70px);
transform: rotateY(-90deg) translateZ(-70px);
width: 30px;
height: 36px;
background-color: #ff97a9;
}
.pig .nose .top {
background-color: #ffb6c3;
-webkit-transform: rotateX(-90deg) translateZ(-36px);
transform: rotateX(-90deg) translateZ(-36px);
width: 70px;
height: 30px;
}
.pig .nose .bottom {
background-color: #ffa7b6;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
width: 70px;
height: 30px;
}
.pig .nose .front {
background: #CB6067;
}
.pig .nose .front::after {
position: absolute;
content: "";
width: 10px;
height: 15px;
top: 50%;
left: 50%;
box-shadow: 10px 0 0 0 #872C39, -10px 0 0 0 #872C39;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.pig .ear {
width: 20px;
height: 20px;
top: 10px;
left: 50%;
}
.pig .ear .front {
-webkit-transform: translateZ(20px);
transform: translateZ(20px);
background-color: #ffa7b6;
width: 20px;
height: 20px;
}
.pig .ear .back {
background-color: #ffa7b6;
width: 20px;
height: 20px;
}
.pig .ear .left {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
width: 20px;
height: 20px;
background-color: #ffb6c3;
}
.pig .ear .right {
-webkit-transform: rotateY(-90deg) translateZ(-20px);
transform: rotateY(-90deg) translateZ(-20px);
width: 20px;
height: 20px;
background-color: #ff97a9;
}
.pig .ear .top {
background-color: #ffb6c3;
-webkit-transform: rotateX(-90deg) translateZ(-20px);
transform: rotateX(-90deg) translateZ(-20px);
width: 20px;
height: 20px;
}
.pig .ear .bottom {
background-color: #ffa7b6;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
width: 20px;
height: 20px;
}
.pig .ear .front {
background: #C35C65;
}
.pig .ear .front::after {
position: absolute;
content: "";
width: 8px;
height: 10px;
bottom: 0;
left: 50%;
background-color: #872C39;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
.pig .ear-left {
-webkit-transform: translate3d(-180%, -20px, 150px);
transform: translate3d(-180%, -20px, 150px);
}
.pig .ear-right {
-webkit-transform: translate3d(80%, -20px, 150px);
transform: translate3d(80%, -20px, 150px);
}
.pig .foot {
width: 20px;
height: 25px;
bottom: -25px;
}
.pig .foot .front {
-webkit-transform: translateZ(20px);
transform: translateZ(20px);
background-color: #ffa7b6;
width: 20px;
height: 25px;
}
.pig .foot .back {
background-color: #ffa7b6;
width: 20px;
height: 25px;
}
.pig .foot .left {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
width: 20px;
height: 25px;
background-color: #ffb6c3;
}
.pig .foot .right {
-webkit-tr
纯css3实现的3D宝贝猪猡动画效果源码.zip （1个子文件） 
132689880509110429 
index.html 12KB资源评论
易小侠
- 粉丝: 6605
- 资源: 9万+
最新资源
- 面向初学者的 Java 教程（包含 500 个代码示例）.zip
- 阿里云OSS Java版SDK.zip
- 阿里云api网关请求签名示例（java实现）.zip
- 通过示例学习 Android 的 RxJava.zip
- 通过多线程编程在 Java 中发现并发模式和特性 线程、锁、原子等等 .zip
- 通过在终端中进行探索来学习 JavaScript .zip
- 通过不仅针对初学者而且针对 JavaScript 爱好者（无论他们的专业水平如何）设计的编码挑战，自然而自信地拥抱 JavaScript .zip
- 适用于 Kotlin 和 Java 的现代 JSON 库 .zip
- yolo5实战-yolo资源
- english-chinese-dictionary-数据结构课程设计
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
