【欧洲杯】用纯前端写一个滚动的足球（下）

已于 2024-06-24 10:13:29 修改
阅读量694 收藏 8
点赞数 28
分类专栏： JavaScript 文章标签： 前端
于 2024-06-24 10:09:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Conan9912345/article/details/139915304
版权

怎么样？正五边形简单吧？那么今天我们继续，把整个滚动的足球写出来吧。

一、五角星在足球上的位置

一个传统足球表面有 12 个正五边形。为了便于理解，我们使用地球模型来做讲解。

最简单的，我们在南极和北极各放一个正五边形。这两个五边形从正常的屏幕主视角（也叫做前视角）看上去，都是几乎处于水平位置。即：这两个正五边形围绕 X 轴分别向上或向下旋转 90deg。

然后我们需要在北半球和南半球的相同维度各放置五个正五边形。

维度方面：北半球的五个应该放在北纬 30deg 的地方，同样南半球的五个也应该放在南纬 30deg 的地方。这样一来，北极到北纬、北纬到南纬、南纬到南极，角度差均为 60deg。

经度方面：完整一圈一共有 360deg，一圈放置 5 个，那么就平均放在夹角 72deg 的平均分布。并确保南半球和北半球相对有一个 36deg 的错位。

二、构建创建正五边形的方法

我们从主视角出发，每一个正五边形都创建在主视觉正中间。然后通过 transform 的 3D 属性完成位置旋转。因此需要控制五边形的样式为 3D 模式：

// html
<div class="ball"></div>

// css
.ball {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  margin: auto;
  transform-style: preserve-3d;
}
.five {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 0;
  margin: auto;
  border-top: 190.35px solid black;
  border-right: 61.8px solid transparent;
  border-left: 61.8px solid transparent;
  backface-visibility: visible;
}
.five::before {
  position: absolute;
  top: -285px;
  left: -61.8px;
  border-right: 161.8px solid transparent;
  border-bottom: 95.1px solid black;
  border-left: 161.8px solid transparent;
  content: '';
}

我们通过 JavaScript 动态生成一个正五边形元素：

const ball = document.querySelector('.ball');
const five = document.createElement('div');
five.className = 'five';
ball.appendChild(five);

 若要把这个正五边形放到北极，只需要围绕 X 轴向北旋转 90deg：

five.style.transform = 'rotateY(0deg) rotateX(90deg) translateZ(500px)';

 同理，放到南极：

five.style.transform = 'rotateY(0deg) rotateX(-90deg) translateZ(500px)';

 同样的道理，放置北半球的五个，需要以 72deg 为跨度让其围绕 Y 轴旋转：

five.style.transform = 'rotateY(0deg) rotateX(30deg) translateZ(500px)';
five.style.transform = 'rotateY(72deg) rotateX(30deg) translateZ(500px)';
five.style.transform = 'rotateY(144deg) rotateX(30deg) translateZ(500px)';
five.style.transform = 'rotateY(216deg) rotateX(30deg) translateZ(500px)';
five.style.transform = 'rotateY(288deg) rotateX(30deg) translateZ(500px)';

 南半球与北半球在经度方面存在一个 36deg 的错位：

five.style.transform = 'rotateY(36deg) rotateX(-30deg) translateZ(500px)';
five.style.transform = 'rotateY(108deg) rotateX(-30deg) translateZ(500px)';
five.style.transform = 'rotateY(180deg) rotateX(-30deg) translateZ(500px)';
five.style.transform = 'rotateY(252deg) rotateX(-30deg) translateZ(500px)';
five.style.transform = 'rotateY(324deg) rotateX(-30deg) translateZ(500px)';

 聪明的你肯定已经找到规律了，咱们不妨将每一个正五角星的创建封装成一个函数：

/**
 * @description 创建一个正五角星
 * @param {Number} num 北半球或者南半球各有 num 个正五角星
 * @param {Number} item 纬度
 * @param {Number} index 北半球或者南半球的第 index 个正五角星
 * @param {Number} translate 南半球与北半球之间在经度上存在一个 36deg 的错位，默认为 0，南半球传入 36
*/
function createFivePolygon(num, item, index, translate = 0) {
  const radius = 500; // 足球半径
  const gap = 360 / num; // 每个五边形之间的空隙
  const ball = document.querySelector('.ball'); // 找到足球 DOM
  const five = document.createElement('div'); // 创建一个正五边形
  five.className = 'five'; // 设置这个正五边形的类名，让其与 CSS 样式关联
  five.style.transform = `rotateY(${index * gap + translate}deg) rotateX(${item}deg) translateZ(${radius}px)`; // 位置控制
  ball.appendChild(five); // 把这个正五边形放到足球 DOM 树上
}

 这样，咱们就封装了一个创建正五边形的函数。

三、在对应位置创建正五边形

北极和南极各创建一个正五边形：

createFivePolygon(1, 90, 0); // 北极
createFivePolygon(1, -90, 0); // 南极

北半球和南半球各在对应位置创建五个正五边形：

createFivePolygon(5, 30, 0); // 北半球
createFivePolygon(5, 30, 1); // 北半球
createFivePolygon(5, 30, 2); // 北半球
createFivePolygon(5, 30, 3); // 北半球
createFivePolygon(5, 30, 4); // 北半球
createFivePolygon(5, -30, 0, 36); // 南半球
createFivePolygon(5, -30, 1, 36); // 南半球
createFivePolygon(5, -30, 2, 36); // 南半球
createFivePolygon(5, -30, 3, 36); // 南半球
createFivePolygon(5, -30, 4, 36); // 南半球

 可以看到，createFivePolygon 方法调用了 12 次，摸清楚其中的规律，我们就可以通过循环调用：

function calcPosition() {
  const rotateArr = [30, -30]; // 每一圈绕 X 轴旋转的度数
  const num = 5; // 每一圈有多少个五边形

  rotateArr.forEach(function(item) {
    for (let i = 0; i < num; i++) {
        createFivePolygon(num, item, i, item > 0 ? 0 : 36);
    }
  });
  createFivePolygon(1, 90, 0); // 北极
  createFivePolygon(1, -90, 0); // 南极
}

 这样，我们就通过一个简单的函数封装，实现了 12 个正五边形的创建。

四、让足球滚动起来

咱们通过 CSS 动画，让足球围绕 Y 轴转动：

@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

为了更加真实一些，我们控制一个“黄赤夹角”，让其滚动的更加真实一些：

.ball {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  margin: auto;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(10deg);
  transform-style: preserve-3d;
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from { transform: rotateX(-20deg) rotateY(0deg) rotateZ(10deg); }
  to { transform: rotateX(-20deg) rotateY(360deg) rotateZ(10deg); }
}

这样，我们就实现了一个足球的滚动效果。

完整源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>足球</title>
<style type="text/css">
.ball {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  margin: auto;
  /* transform: rotateX(-20deg) rotateZ(10deg) rotateY(0deg); */
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(10deg);
  transform-style: preserve-3d;
  animation: rotate 10s linear infinite;
}
.five {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 0;
  margin: auto;
  border-top: 190.35px solid black;
  border-right: 61.8px solid transparent;
  border-left: 61.8px solid transparent;
  backface-visibility: visible;
}
.five::before {
  position: absolute;
  top: -285px;
  left: -61.8px;
  border-right: 161.8px solid transparent;
  border-bottom: 95.1px solid black;
  border-left: 161.8px solid transparent;
  content: '';
}

@keyframes rotate {
  from { transform: rotateX(-20deg) rotateY(0deg) rotateZ(10deg); }
  to { transform: rotateX(-20deg) rotateY(360deg) rotateZ(10deg); }
}
</style>
<script type="text/javascript">
function calcPosition() {
  const rotateArr = [30, -30]; // 每一圈绕 X 轴旋转的度数
  const num = 5; // 每一圈有多少个五边形

  rotateArr.forEach(function(item) {
    for (let i = 0; i < num; i++) {
        createFivePolygon(num, item, i, item > 0 ? 0 : 36);
    }
  });
  createFivePolygon(1, 90, 0); // 北极
  createFivePolygon(1, -90, 0); // 南极
}

/**
 * @description 创建一个正五角星
 * @param {Number} num 北半球或者南半球各有 num 个正五角星
 * @param {Number} item 纬度
 * @param {Number} index 北半球或者南半球的第 index 个正五角星
 * @param {Number} translate 南半球与北半球之间在经度上存在一个 36deg 的错位，默认为 0，南半球传入 36
*/
function createFivePolygon(num, item, index, translate = 0) {
  const radius = 500; // 足球半径
  const gap = 360 / num; // 每个五边形之间的空隙
  const ball = document.querySelector('.ball'); // 找到足球 DOM
  const five = document.createElement('div'); // 创建一个正五边形
  five.className = 'five'; // 设置这个正五边形的类名，让其与 CSS 样式关联
  five.style.transform = `rotateY(${index * gap + translate}deg) rotateX(${item}deg) translateZ(${radius}px)`; // 位置控制
  ball.appendChild(five); // 把这个正五边形放到足球 DOM 树上
}

window.onload = calcPosition;
</script>
</head>
<body>
<div class="ball"></div>
</body>
</html>

↓

↓

↓

仅仅依赖文字讲解，对于这样 3D 模型来说，比较容易难以理解。不久的将来，我会补上视频讲解，以便更加透彻的理解。

大家敬请期待......

关注我，为你提供更多经常内容！ 

Conan9912345
关注
  • 28
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【欧洲杯】用纯前端写一个滚动的足球（上）
Conan9912345的博客
06-21 1080
今年的欧洲杯已经开始啦~~~~~~~~~~~~~~~连续两天晚上被男朋友凌晨三点起来看球给吵醒，好困啊！各位前端的宝子们，今天我突发奇想，决定用纯前端写一个滚动着的足球出来。怎么样？够刺激吧？开整！由于篇幅较长，我根据内容阶段，分为了上、下两篇文章呈现。今天我们重点探讨足球上的正五边形是如何写出来的。
Web前端大作业 体育主题足球网页制作 足球梅西HTML网页设计制作 dreamweaver学生网页源代码
QQ_____365392777的博客
08-15 3806
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
javascript大作业《web课程设计》用html做一个期末作业网站，梅西足球体育网页，css
网页设计与制作
11-04 187
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构
2004欧洲足球锦标赛数据库.rar_SQL java_java 数据库_足球数据
07-14
SQL数据库为后台的Java编程
2016欧洲杯足球赛完整数据统计.xlsx
06-29
2016欧洲杯足球赛完整数据统计.xlsx
欧洲杯福利_足球相关系列图标_svg_ai_png下载.zip
12-28
在本资源包中，我们主要关注的是与足球相关的图标设计，特别是一些为庆祝欧洲杯这一重大足球赛事而创作的视觉元素。这些图标是设计师们为各种用途，如网站、应用、海报等，提供的一种独特视觉语言，用以增强与足球...
2021地产项目欧洲杯暖场“激情欧洲杯 畅饮一夏”系列活动策划方案【足球】
06-22
2021地产项目欧洲杯暖场“激情欧洲杯 畅饮一夏”系列活动策划方案【足球】
欧洲锦标赛足球主题下载PPT模板
03-20
【欧洲锦标赛足球主题下载PPT模板】是一款专为体育爱好者和活动策划者设计的PowerPoint模板，特别适合用于展示与足球相关的赛事、活动或者教学。该模板以2012年欧洲锦标赛为灵感，融合了体育竞技的活力与欧洲文化的...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1101
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 898
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1398
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 290
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
JWT（JSON Web Token）
Casual_Lei的博客
07-03 1294
JWT 提供了一种简洁而强大的方式来进行身份验证和授权，特别适用于分布式系统和微服务架构。Spring Security 通过其强大的扩展机制，使得与 JWT 的集成变得非常简单和高效。通过了解和应用这些技术，开发者可以构建出安全、可靠的现代 Web 应用。
react自定义hooks---useCounter
weixin_73098736的博客
07-02 292
【代码】react自定义hooks---useCounter。
ESP32-Web-Server编程- 使用 mDNS 建立域名系统
wangyx1234的博客
07-02 253
1）本节首先介绍了 DNS 域名服务系统，然后引出了 mDNS（multicast DNS，组播 DNS）系统的基本原理。 2）在 ESP32 Web Server 系统中部署 mDNS 服务，并演示了通过建立的域名访问 Web 服务器的方法。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 105
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
黑马点评学习过程汇总——Cookie \ Session \ Token的区别
weixin_45791946的博客
07-02 387
在后续的请求中，前端发往后端的请求中都携带token，后端拿到token后进行jwt的解密并验证signature，如果检验成功信息没有被篡改，就会放行。，自动存储session信息到cookie中。Token不依赖于session和cookie，对集群和前后端分离架构友好。前端发起登录请求到后端，后端对前端携带来的信息进行认证，认证成功后会生成。我们往session中存储用户信息，服务器端保存session并通过。头部，Payload负载，Signature签名 ）并以。（4）Session的弊端。
JS混淆基本类型和原理
最新发布
朴拙科技的博客
07-06 536
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
欧洲杯足球，土耳其vs格鲁吉亚
06-19
欧洲杯足球赛（UEFA European Championship）是欧洲最高水平的国家队足球比赛，每四年举行一次，由欧洲足球协会联盟（UEFA）主办。土耳其和格鲁吉亚都是欧洲杯的参赛队伍之一，但他们在过去的比赛中并不算顶级强队。 2022年欧洲杯预选赛中，土耳其和格鲁吉亚被分在同一小组。土耳其在国际足联的世界排名中通常位于中上位置，拥有丰富的足球文化和历史，曾经取得过欧洲杯和世界杯的好成绩。而格鲁吉亚则相对较弱，他们的进步空间较大。 在2022年预选赛中，两队之间的直接对决对于小组出线至关重要。土耳其可能会利用主场优势以及自身的实力试图赢得比赛，而格鲁吉亚则会全力以赴争取积分。比赛的结果取决于球队当天的状态、战术安排以及球员表现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值