<!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>纯CSS实现迎着阳光飞行的3D纸飞机动画</title>
<style>
/* I believe I can... */
@keyframes fly {
0% {
transform: perspective(1000px) rotateY(270deg) translateX(-50vh) translateY(-50%) translateZ(50vw);
}
75% {
transform: perspective(1000px) rotateY(-810deg) translateX(50vh) translateY(50%) translateZ(0);
}
}
@keyframes sunshine {
0%, 75% {
top: -30vh;
transform: scale(0);
}
}
@keyframes wind {
25% {
opacity: .8;
transform: rotateY(90deg) translateX(1000vh);
}
100% {
opacity: .8;
transform: rotateY(90deg) translateX(-100vh);
}
}
* {
margin: 0;
padding: 0;
outline: 0;
}
html,
body {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: skyblue;
z-index: -2;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50vh;
height: 50vh;
transform: rotateY(-90deg);
transform-style: preserve-3d;
transition: .5s;
z-index: -1;
animation: fly 8s ease-out;
}
.sun {
position: absolute;
top: -15vh;
left: 0;
right: 0;
margin: auto;
width: 30vh;
max-width: 30vw;
height: 30vh;
max-height: 30vw;
border-radius: 50%;
background: lightgoldenrodyellow;
box-shadow: inset 0 0 10vw 5vw white, 0 0 15vw 10vw white;
filter: blur(20px);
/* For Firefox */
transition: .5s;
animation: sunshine 8s ease-out;
z-index: -2;
}
svg {
position: absolute;
left: 0;
z-index: 2;
}
.ltop {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
}
.ltop:hover ~ .container {
transform: perspective(1000px) rotateY(-135deg) translateY(-20vh) translateZ(50vh);
transition: 1s;
}
.ltop:hover ~ .sun {
top: 90vh;
right: -100%;
transition: 1s;
}
.ltop:hover ~ .wind {
transform: perspective(800px) rotateX(-15deg) rotateY(-45deg);
transform-origin: left;
transition: 1s;
}
.lbot {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
}
.lbot:hover ~ .container {
transform: perspective(1000px) rotateY(-135deg) translateY(50vh) translateZ(50vh);
transition: 1s;
}
.lbot:hover ~ .sun {
top: -15vh;
right: -100%;
transition: 1s;
}
.lbot:hover ~ .wind {
transform: perspective(800px) rotateX(10deg) rotateY(-45deg);
transform-origin: left;
transition: 1s;
}
.rtop {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
}
.rtop:hover ~ .container {
transform: perspective(1000px) rotateY(-45deg) translateY(-20vh) translateZ(-50vh);
transition: 1s;
}
.rtop:hover ~ .sun {
top: 90vh;
left: -100%;
transition: 1s;
}
.rtop:hover ~ .wind {
transform: perspective(800px) rotateX(-15deg) rotateY(45deg);
transform-origin: right;
transition: 1s;
}
.rbot {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 50%;
}
.rbot:hover ~ .container {
transform: perspective(1000px) rotateY(-45deg) translateY(50vh) translateZ(-50vh);
transition: 1s;
}
.rbot:hover ~ .sun {
left: -100%;
transition: 1s;
}
.rbot:hover ~ .wind {
transform: perspective(800px) rotateX(10deg) rotateY(45deg);
transform-origin: right;
transition: 1s;
}
#lside {
border-top: 25vh solid transparent;
border-right: 50vh solid #ececec;
transform: rotate(-5deg) rotateY(0deg) rotateX(-10deg);
transform-origin: bottom;
}
#rside {
margin-top: -25vh;
border-top: 25vh solid transparent;
border-right: 50vh solid #ececec;
transform: rotate(-5deg) rotateY(0deg) rotateX(10deg);
transform-origin: bottom;
}
#lwing {
margin-top: -25vh;
border-bottom: 25vh solid #f5f5f5;
border-right: 30vh solid transparent;
border-left: 50vh solid transparent;
transform: rotate(-22deg) rotateX(55deg) rotateY(-10deg) rotateZ(25deg);
transform-origin: top;
}
#rwing {
margin-top: -25vh;
border-bottom: 25vh solid #f5f5f5;
border-right: 30vh solid transparent;
border-left: 50vh solid transparent;
transform: rotate(-22deg) rotateX(-55deg) rotateY(10deg) rotateZ(25deg);
transform-origin: top;
}
.wind {
position: absolute;
width: 100%;
height: 100%;
perspective: 800px;
z-index: -2;
}
.wind > div {
position: absolute;
height: 5px;
background: linear-gradient(to right, white, transparent);
border-radius: 10px;
opacity: 0;
}
#lw1 {
top: 0;
left: 10%;
width: 20vh;
animation: wind 1.2s linear 6s infinite;
}
#lw2 {
top: 50%;
left: 0;
width: 50vh;
animation: wind .8s linear 6s infinite;
}
#lw3 {
top: 80%;
left: 0;
width: 40vh;
animation: wind 1s linear 6s infinite;
}
#rw1 {
top: 10%;
right: 0;
width: 30vh;
animation: wind 1s linear 6s infinite;
}
#rw2 {
top: 20%;
right: 0;
width: 40vh;
animation: wind 1.2s linear 6s infinite;
}
#rw3 {
top: 70%;
right: 0;
width: 20vh;
animation: wind 1.5s linear 6s infinite;
}
#rw4 {
top: 100%;
right: 20%;
width: 50vh;
animation: wind .8s linear 6s infinite;
}
</style>
</head>
<body>
<div class="ltop"></div>
<div class="lbot"></div>
<div class="rtop"></div>
<div class="rbot"></div>
<div class="container">
<div id="lside"></div>
<div id="rside"></div>
<div id="lwing"></div>
<div id="rwing"></div>
</div>
<div class="sun"></div>
<div class="wind">
<div id="lw1"></div>
<div id="lw2"></div>
<div id="lw3"></div>
<div id="rw1"></div>
<div id="rw2"></div>
<div id="rw3"></div>
<div id="rw4"></div>
</div>
</body>
</html>
纯CSS3实现迎着阳光飞行的3D纸飞机动画效果源码.zip
版权申诉
148 浏览量
2022-11-09
22:10:50
上传
评论
收藏 2KB ZIP 举报
纯CSS3实现迎着阳光飞行的3D纸飞机动画效果源码.zip （1个子文件） 
132686911724549414 
index.html 6KB资源评论
毕业_设计
- 粉丝: 1944
- 资源: 1万+
最新资源
- 基于C++实现多目标跟踪系统
- 基于单片机的压力流量报警器（附代码+proteus仿真+论文）
- 基于 Flask 的请假审批管理系统设计与实现
- Test Report TC-24-37 MQ012K0VPY 25.764-28.476MHz.SchDoc
- Java项目-基于Springboot+Vue的校园博客系统的设计与实现（源码+万字LW+部署视频+代码讲解视频+全套软件）
- 服务器虚拟化工具VMware vSphere Client for windows（VMware-viclient-all-6）
- 文件批量改名工具，用于替换/更改字符，更改文件后缀等
- Home Assistant 接入小米空气净化器
- 2024年全国职业院校技能大赛集成电路应用开发赛项竞赛试题（08 卷）
- 2024年全国职业院校技能大赛集成电路应用开发赛项竞赛试题（07 卷）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
