CSS

语言：

CSSSCSS

确定

/* 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;

}

3D纸飞机MATLAB代码,使用纯CSS实现的迎着阳光飞行的3D纸飞机相关推荐

  1. php垂直居中代码_纯css实现水平和垂直居中

    有时候我们需要实现一个水平居中和垂直居中的效果.例如你想做一个网页版的PPT,你希望演示的内容区域总是居中.这里介绍一个纯css实现. 水平和垂直居中 body {JQUERY的Deferred应用 ...

  2. 3d金字塔用css3动画,纯css实现旋转的金字塔

    css是个神奇的东西,在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一,设计精巧,计算精密,令世人赞叹.那么如何用CSS画一个金字塔呢? 人丑话不多,先看一下效果 ❐ 思路 金字塔是由5 ...

  3. css海浪动画代码,不行一行代码，纯css实现海浪动态效果！

    直入主题:首先画一个简单的盒子: 利用::before与::after画两个圆角值(radius)不同的不规则圆形: 父元素设置overflow: hidden 最后加上animation动画让两个不 ...

  4. HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML+CSS+JavaScript 程序员表白网页 简单的3D相册制作

    这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...

  5. 纯css实现iphone按钮（例飞行模式）

    1.本来的思路: 我使用两个div分别实现圆角矩形和圆形,并将其嵌套在一起,使圆形在圆角矩形内部.然后布局使用margin:0 auto; 2.出现的问题: 当使用伪类选择器hover或者active ...

  6. 小米官网首屏纯css代码

    小米官网首屏代码(纯CSS编写) ** 1.html部分: ** 小米商城 <!-- bar的内部容器--> <div class="top-bar w"> ...

  7. Css实现刘海,纯CSS样式写刘海屏效果

    1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...

  8. css实现提示信息,纯CSS 实现tooltip 内容提示信息效果

    Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...

  9. html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程

    这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...

最新文章

  1. yolo v3配置文件说明模型配置文件——cfg/yolov3-voc.cfg
  2. windbg学习-----n(Set Number base)
  3. Ultraedit使用技巧收集
  4. 《剑指offer》——基础数据结构：从简单知识构建细致扎实的思考和实现能力...
  5. valueOf()和toString()详解
  6. Swift - iCloud存储介绍
  7. JAVA 图片URL地址转Byte文件流
  8. dB、dBm、dBw、dBμV、dBmV、dBV、dBv等单位介绍
  9. 如何解决win8.1系统开机提示sgtool.exe损坏
  10. 玩寻仙一个月之我感受
  11. 2021.08.29_Android_各系统间换行符不同引起的无法执行shell脚本，提示no such file or directory
  12. Web前端期末大作业--中国港珠澳大桥网页设计(HTML+CSS+JavaScript)实现
  13. 深入浅出 Docker
  14. python打不开py文件查看代码,用python打开py文件
  15. 灾难等级排列 那些尴尬的智能家居设备
  16. 深度学习环境配置（GPU、CPU版本）
  17. 对 emwin 窗口创建的认识
  18. svn访问版本库时一直提示： please wait while the repository browser is initializing
  19. Matlab学习总结
  20. Onenote2016 for Win7/Mac-学习笔记

热门文章

  1. 网址打包（详细图文教程！） 使用HBuilder将网址打包成app
  2. 华为网工入门之eNSP小实验（2）--DNS(Domain Name System)域名系统
  3. android联系人索引
  4. VAPS XT航空仪表开发第一节
  5. js 截取指定字符后面/前面的所有字符串
  6. 如何将多个 Docx 格式 Word 文档批量转为 Doc 格式
  7. Android L无法接听/拒接来电现象的分析与解决（文末对比Android M）
  8. 引用hammer左右滑动后上下滚动失效
  9. 粒子炫酷黑个人页源码
  10. 项目中单独指定maven远程仓库