CSS3制作3D战斗机

最新推荐文章于 2024-09-13 23:28:46 发布
最新推荐文章于 2024-09-13 23:28:46 发布
阅读量96 收藏
点赞数
分类专栏： htiml CSS 文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57765394/article/details/120501669
版权
CSS 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
htiml
3 篇文章 0 订阅
订阅专栏

先新建一个HTML文件按我这样打下去

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS 3D战斗机</title>

<style>

* {

margin:0 auto;

}

html {

height:100%;

}

body {

height:100%;

display:flex;

justify-content:center;

align-items:center;

background:rgb(7,83,83);

perspective:3000px;

/*滤镜形成阴影效果*/

        filter:-shadow(0px 120px 10px rgba(0,0,0,0.5));

overflow:hidden;

}

main {

width:500px;

height:400px;

border:1px solid transparent;

/* perspective:3000px;

*/

        transform-style:preserve-3d;

/* transform:rotateX(-100deg);

*/

        animation:dong 20s linear infinite alternate;

cursor:pointer;

}

@keyframes dong {

0% {

}50% {

transform:rotateX(-80deg) rotateY(-80deg) rotateZ(0deg);

}

100% {

transform:rotateX(80deg) rotateY(80deg) rotateZ(45deg);

}

}div {

transform-style:preserve-3d;

/* transform:rotateX(90deg);

*/

}

#feiji {

width:500px;

height:300px;

/* background:teal;

*/

        position:relative;

/* transform:rotateX(-30deg);

*/

         /* border:1px solid white;

*/

         /* transform:rotateY(-90deg);

*/

         animation:zhuan1 10s linear infinite alternate;

}

@keyframes zhuan1 {

0% {

transform:rotateX(-40deg);

}

100% {

transform:rotateX(30deg)

}

}#tou {

width:170px;

height:50px;

/* background:red;

*/

        position:absolute;

left:0;

top:125px;

transform:rotateZ(-7deg);

}

#tou div {

width:0px;

height:0px;

border-top:25px solid transparent;

border-bottom:25px solid transparent;

border-left:0px solid transparent;

border-right:170px solid yellow;

position:absolute;

transform:rotateX(90deg);

}

#tou .tou-t {

border-right:170px solid rgb(180,180,179);

transform:rotateX(0deg)  rotateY(8deg) translateZ(-12px);

}

#tou .tou-t::before {

content:'J - 30';

width:100px;

color:white;

font-size:18px;

font-weight:bold;

position:absolute;

left:110px;

top:-5px;

font-family:黑体;

transform:rotate(5deg);

}

#tou .tou-b {

border-right:170px solid rgb(180,180,179);

transform:rotateX(0deg)  rotateY(-8deg) translateZ(12px);

}

#tou .tou-b::before {

content:'J - 30';

width:100px;

color:white;

font-size:18px;

font-weight:bold;

position:absolute;

left:110px;

top:-5px;

font-family:黑体;

transform:rotate(5deg);

}

#tou .tou-l {

border-right:170px solid rgb(214,214,214);

/* transform-origin:0% 0%;

*/

     transform:rotateX(90deg) rotateY(8.5deg);

top:13px;

}

#tou .tou-r {

border-right:170px solid rgb(180,180,179);

transform:rotateX(90deg) rotateY(-8.5deg);

top:-13px;

}

#tou .tou-r::before {

content:'';

width:0;

height:0;

border-top:20px solid transparent;

border-bottom:20px solid transparent;

border-left:0px solid transparent;

border-right:50px solid rgb(73,73,73);

position:absolute;

left:120px;

top:-20px;

}

#jishen {

width:180px;

height:50px;

/* background:tomato;

*/

        position:absolute;

top:125px;

left:170px;

}

#jishen div {

width:1px;

height:30px;

border-top:10px solid transparent;

border-bottom:10px solid transparent;

border-right:0px solid transparent;

border-left:179px solid rgb(180,180,179);

position:absolute;

transform:rotateX(0deg);

}

#jishen .jishen-t {

border-left:185px solid rgb(180,180,179);

transform:rotateX(90deg) rotateY(2deg) translateX(-5px);

top:-31px;

}

#jishen .jishen-t::before {

content:'';

width:0;

height:0;

border-top:20px solid transparent;

border-bottom:20px solid transparent;

border-left:80px solid rgb(73,73,73);

border-right:0px solid transparent;

position:absolute;

left:-185px;

top:-5px;

}

#jishen .jishen-b {

border-left:179px solid rgb(214,214,214);

transform:rotateX(90deg) rotateY(-6deg);

top:7px;

}

#jishen .jishen-l {

width:1px;

height:25px;

border-top:26px solid transparent;

border-bottom:0px solid transparent;

border-right:0px solid transparent;

border-left:185px solid rgb(180,180,179);

transform:rotateX(0deg) rotateY(3deg) rotateZ(-6deg) translateZ(20px) translateX(-4px);

top:-20px;

}

#jishen .jishen-r {

width:1px;

height:25px;

border-top:26px solid transparent;

border-bottom:0px solid transparent;

border-right:0px solid transparent;

border-left:185px solid rgb(180,180,179);

transform:rotateX(0deg) rotateY(-3deg) rotateZ(-6deg) translateZ(-20px) translateX(-5px);

top:-20px;

}

#jishen  #yi {

/* background:yellow;

*/

         position:absolute;

width:1px;

height:25px;

border-top:50px solid transparent;

border-bottom:0px solid transparent;

border-right:0px solid transparent;

border-left:165px solid rgb(180,180,179);

/* transform:rotateX(-90deg);

*/

}

#jishen #yi::before {

content:'';

position:absolute;

width:1px;

height:25px;

border-top:50px solid transparent;

border-bottom:0px solid transparent;

border-right:0px solid transparent;

border-left:164px solid rgb(121,121,119);

right:0;

top:-50px;

transform:scale(0.8) translateX(-20px);

}

#jishen  .yi-l {

transform:rotateX(-98deg) rotateZ(-90deg) translateX(100px);

position:absolute;

top:-20px;

left:-20px;

}

#jishen  .yi-r {

transform:rotateX(98deg)  rotateZ(-90deg) translateX(100px);

position:absolute;

top:-20px;

left:-20px;

}

#wei {

width:100px;

height:40px;

/* background:red;

*/

        position:absolute;

right:50px;

top:123px;

}

#wei div {

width:1px;

height:15px;

border-top:5px solid transparent;

border-bottom:5px solid transparent;

border-right:0px solid transparent;

border-left:40px solid rgb(250,41,41);

position:absolute;

transform:rotateX(0deg);

}

#wei .wei-l {

transform:rotateX(0deg) rotateY(10deg) rotateZ(-2deg) translateZ(11px);

}

#wei .wei-l::after {

content:'';

border-top:5px solid transparent;

border-bottom:5px solid transparent;

border-right:0px solid transparent;

border-left:40px solid rgb(250,41,41);

position:absolute;

left:0px;

transform:rotateX(0deg);

opacity:0;

transition:0.5s;

}

#wei .wei-r {

transform:rotateX(0deg) rotateY(-10deg) rotateZ(-2deg) translateZ(-11px);

}

#wei .wei-r::after {

content:'';

border-top:5px solid transparent;

border-bottom:5px solid transparent;

border-right:0px solid transparent;

border-left:40px solid rgb(250,41,41);

position:absolute;

left:0px;

transform:rotateX(0deg);

opacity:0;

transition:0.5s;

}

#wei .wei-t {

border-top:8px solid transparent;

border-bottom:8px solid transparent;

border-left:45px solid rgb(250,41,41);

transform:rotateX(90deg) rotateY(4deg);

top:-14px;

left:-3px;

}

#wei .wei-t::after {

content:'';

border-top:5px solid transparent;

border-bottom:5px solid transparent;

border-right:0px solid transparent;

border-left:40px solid rgb(202,243,19);

position:absolute;

left:0px;

transform:rotateX(0deg);

opacity:0;

transition:0.5s;

}

#wei .wei-b {

border-top:8px solid transparent;

border-bottom:8px solid transparent;

border-left:45px solid rgb(250,41,41);

transform:rotateX(90deg) rotateY(-10deg);

top:5px;

left:-3px;

}

#wei .wei-b::after {

content:'';

border-top:5px solid transparent;

border-bottom:5px solid transparent;

border-right:0px solid transparent;

border-left:40px solid rgb(202,243,19);

position:absolute;

left:0px;

transform:rotateX(0deg);

opacity:0;

transition:0.5s;

}

main:hover #wei div::after {

left:20px;

opacity:1;

}

#wei .wei-yt {

top:-38px;

width:1px;

height:15px;

border-top:20px solid transparent;

border-bottom:0px solid transparent;

border-right:0px solid transparent;

border-left:45px solid rgb(180,180,179);

transform:rotateZ(-83deg);

}

#wei .wei-yl {

height:10px;

border-top:15px solid transparent;

border-bottom:0px solid transparent;

border-right:0px solid transparent;

border-left:35px solid rgb(180,180,179);

transform:rotateY(-90deg) rotateX(-100deg) translateX(28px) rotateZ(10deg);

left:7px;

}

#wei .wei-yr {

height:10px;

border-top:15px solid transparent;

border-bottom:0px solid transparent;

border-right:0px solid transparent;

border-left:35px solid rgb(180,180,179);

transform:rotateY(90deg) rotateX(100deg) translateX(28px) rotateZ(10deg);

left:7px;

}

#feng {

width:200px;

height:2px;

background:white;

position:absolute;

transform:rotateX(30deg);

opacity:0;

filter:blur(2px);

}

#feng:nth-child(2) {

left:150px;

transform:translateZ(100px) translateY(-50px) rotateX(30deg);

}

#feng:nth-child(3) {

top:-0px;

left:100px;

transform:translateY(0px) rotateX(30deg);

}

#feng:nth-child(4) {

top:-50px;

left:300px;

transform:translateZ(-150px) rotateX(30deg) translateY(150px);

}

@keyframes move {

0% {

opacity:0;

}

20% {

opacity:0.8;

}

100% {

opacity:0;

left:400px;

}

}main:hover #feng {

animation:move 3s linear -1s infinite;

}

main:active #wei div::after {

animation:move1 1s linear -1s infinite;

}

@keyframes move1 {

0% {

opacity:0;

left:0;

}

100% {

opacity:1;

left:20px;

}

}

</style>

</head>

<body>

<main>

    <div id="feiji">

        <div id="tou">

            <div class="tou-t"></div>

            <div class="tou-b"></div>

            <div class="tou-l"></div>

            <div class="tou-r"></div>

        </div>

        <div id="jishen">

            <div class="jishen-t"></div>

            <div class="jishen-b"></div>

            <div class="jishen-l"></div>

            <div class="jishen-r"></div>

            <div id="yi" class="yi-l"></div>

            <div id="yi" class="yi-r"></div>

        </div>

        <div id="wei">

            <div class="wei-l"></div>

            <div class="wei-r"></div>

            <div class="wei-t"></div>

            <div class="wei-b"></div>

            <div class="wei-yl"></div>

            <div class="wei-yr"></div>

            <div class="wei-yt"></div>

        </div>

    </div>

    <div id="feng"></div>

    <div id="feng"></div>

    <div id="feng"></div>

    <div id="feng"></div>

</main>

</body>

</html>

weixin_57765394
关注
专栏目录
网页设计大作业-雷霆战机-HTML，css，js
weixin_43474701的博客
10-30 1306
网页设计大作业-游戏雷霆战机（下载链接在文末） 如下动态图：
css如何利用transparent属性设置透明度？transparent属性绘制各种三角形
lin123_00的博客
05-11 6715
想到用css设置元素透明度，大家的第一反应会是：用Opacity属性来设置透明度，其实在css中还有其他设置透明度的方法。本章给大家介绍用transparent属性设置透明度，以及用transparent属性绘制各种三角形。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 那么，大家是不是会问css transparent属性是什么，有什么用？ 其实，css transparent是一种全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值；是用来指定全透明色彩的
边框0.5px和解决1px的问题
米儿的博客
09-12 613
工作中遇到了一个产品需求，要求把列表分割线改成0.5px，直接写成border：0.5px solid #cccccc;是不符合规范的写法，会存在Android和IOS手机上的兼容问题，故，我们可以利用CSS3的transform特性，放缩边框宽度来实现这一效果。 <ul class="mBasicBorder_box"> <li class="mBasicBorder_scale_border">边框宽度0.5px</li> <li class
利用border设置transparent绘制图形
weixin_33877885的博客
03-13 2473
建立一个宽高为0的div，设置不同的border属性，可以绘制各类图形，注意只能给一条边框指定颜色，其他边框要设置transparent（透明）颜色属性。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="te...
transparent(指定透明度)使用方法
qq_41973526的博客
12-07 6701
transparent(指定透明度)使用方法 1.在web前端中使用html+css用于制作三角形（用途） 2.盒子宽和高必须都为0,这时盒子四边以三角形的形式进行相接。如果只有一个边框宽度存在时，那么这个边框不会显示。因此，必须存在两个边框宽度才会显示。 3. 那个给transparent属性就说明哪两个直接要进行连线 （重点理解，自己再多操作几遍） 3.1如 /*箭头朝上的三角形 */ div...
使用 HTML 5 Canvas 和 Raycasting 创建伪 3D 游戏
weixin_46596227的博客
11-14 1538
随着最近浏览器性能的提高，除了像 Tic-Tac-Toe 这样的简单游戏之外，用 JavaScript 实现游戏变得更加容易。我们不再需要使用 Flash 来制作炫酷的效果，而且随着 HTML5 Canvas 元素的出现，创建外观漂亮的网页游戏和动态图形比以往任何时候都更容易。一段时间以来，我想实现的一款游戏或游戏引擎是一种伪 3D 引擎，例如 iD Software 在旧的德军总部 3D 游戏中使用的引擎。
（转）使用Three.js制作一个基本的3D飞行游戏
qq_21222737的博客
02-20 2078
今天，我们将使用Three.js创建一个简单的3D飞机，使WebGL更简单。由于GLSL的复杂性和语法，WebGL对许多开发人员来说是一个相当陌生的世界。但是通过Three.js，浏览器中的3D变得非常容易实现。 在本教程中，我们将创建一个简单的3D场景，并在两个主要部分中进行一些交互。 在第一部分，我们将解释Three.js的基础知识，以及如何建立一个非常简单的场景。 第二部分详细介绍了如...
简单的动漫网页成品 HTML+CSS静态网页作业 DW动漫网页设计与制作素材成品代做 海贼王主题网页设计制作6个页面
VX_WJ88950106的博客
08-05 4025
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 ：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。主要有： 等总共6个页面html下载。：此作品为学生个人主页网页设计题材，代码为简单学生
游戏开发与设计中的“3C”是指什么？
Jerish的博客
03-15 2732
这是【游戏开发那些事】第47篇原创随着国内游戏行业的不断发展，越来越多国外的专业词汇被引入进来。“3C”作为一个比较重要的技术名词至今却仍然被不少游戏从业者所陌生。那么到底什么是3C？他在...
神之刃游戏官网网业模板.zip
08-02
这个压缩包包含了制作一个专业、吸引人的游戏官网所需的关键元素，如jQuery、CSS3、HTML等技术的应用。以下是基于这些信息的详细知识点讲解： 1. **jQuery**：jQuery是一个高效、简洁且功能丰富的JavaScript库，它...
大一Web课程设计：企业网站——HTML+CSS+JavaScript电子购物商城(37页面)
VX_WJ88950106的博客
08-20 1471
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
【前端素材】优质小游戏推荐-跑酷小游戏
m0_46013789的博客
04-13 834
"3D动画游戏"通常指的是使用三维动画技术制作的电子游戏，这种游戏以立体三维图形来呈现游戏世界和角色。
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1189
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
CSS学习17--CSS3 过渡、2D变形、3D变形、动画
qq_54641174的博客
09-10 1067
CSS3 过渡、2D变形、3D变形、动画
打造古风炫酷个人网页：用HTML和CSS3传递笔墨韵味
m0_61118741的博客
09-13 569
简洁的页面布局：保持优雅和对称在古风设计中，布局的对称性非常重要。通过左右平衡的内容布局，配合留白来减少页面的视觉噪音。
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1089
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
使用HTMLHeaderTextSplitter高效分割HTML文档
afTFODguAKBF的博客
09-11 310
是一个"结构感知"的文本分割器，它在HTML元素级别拆分文本，并为每个与给定块"相关"的标题添加元数据。保持相关文本的语义分组保留文档结构中编码的丰富上下文信息这个分割器类似于用于Markdown文件的。是一个强大的工具，可以帮助你智能地分割HTML文档，同时保留文档的结构和语义信息。通过合理使用这个工具，你可以更好地处理大型HTML文档，为后续的文本分析和处理任务做好准备。
使用HTMLSectionSplitter进行智能HTML文档分割
afTFODguAKBF的博客
09-11 723
是一个"结构感知"的分割器，它可以在元素级别分割文本，并为每个相关的块添加元数据。保持相关文本的语义分组保留文档结构中编码的上下文丰富的信息可以按元素分割或合并具有相同元数据的元素是一个强大的工具，可以智能地分割HTML文档，保持文档的结构和语义。通过与其他文本分割器结合使用，它可以提供更灵活的文档处理方案。在实际应用中，根据具体需求调整参数和使用方式，可以获得最佳的分割效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值