HTML+CSS+JS实现 ❤️ 宇宙星球旋转动画特效❤️

 

  代码目录:

 

主要代码实现:

css样式:

/*** @date 2021/1/20 16:10*//*  取消默认间距  */* {margin: 0;padding: 0;
}a {text-decoration: none;color: #fff;outline: none
}.container {width: 100%;height: 100%;background: url('../img/allStart.jpg')no-repeat center center;background-size: 100% 100%;position: absolute;overflow: hidden;
}

html :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转星球</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/totate.css">
</head><body><div class="container"><div id="content"><div class="section3"><div class="ui_base u_p3d"><!-- 中间圆球 --><div class="ball_c"></div><!-- 外侧轨道线 1 --><div class="base u_p3d"><!-- 轨道线 2 --><div class="line1"></div><!-- 轨道线 3 --><div class="line2"></div><div class="ball_base u_p3d ball_1"><div class="ball"></div></div><div class="ball_base u_p3d ball_2"><div class="ball"></div></div><div class="ball_base u_p3d ball_3"><div class="ball"></div></div><div class="ball_base u_p3d ball_4"><div class="ball"></div></div><div class="ball_base u_p3d ball_5"><div class="ball"></div></div></div></div></div></div><img src="img/bgbg.png" alt="" style="position:absolute;z-index: 2; width: 200%;height: 100%;opacity: .75;top: 0;left: -50%"></div></body></html>

js文件在上面截图可以看到 需要引进来。

精彩推荐更新中:

HTML5大作业实战100套

  打卡 文章 更新  36  /  100天

大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562128.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java制作扫雷游戏中埋雷的难点_月薪30K程序员花了一个小时,用c++做出经典扫雷游戏 !...

上次发过一个俄罗斯方块的游戏源码&#xff0c;由于是通过Easy X实现的&#xff0c;但是很多和我一样的新手&#xff0c;一开始不知道Easy X是什么&#xff0c;到时源码拿过去之后&#xff0c;运行报错&#xff0c;我这次发的扫雷&#xff0c;也是通过Easy X实现&#xff0c;Ea…

量子计算机 真假,复原乳到底有没有营养?量子计算机是否已拍死“前浪”?“科学”流言榜告诉你真假...

由北京市科学技术协会、北京市网信办、首都互联网协会指导&#xff0c;北京科技记者编辑协会、北京地区网站联合辟谣平台共同发布的12月“科学”流言榜31日出炉&#xff0c;快来看看这些流言究竟是真是假&#xff1a;1.复原乳没营养是“假牛奶”&#xff0c;堪称奶中“地沟油”…

HTML+CSS+JS实现 ❤️ 团队人物图片蜂巢布局❤️

代码目录&#xff1a; 主要代码实现&#xff1a; css样式&#xff1a; html, body {height: 100%;margin: auto;--wrp: 800px;width: var(--wrp); }body {background: center/1.6% #f5f5f5 url(data:image/svgxml,%3Csvg xmlns"http://www.w3.org/2000/svg" width&q…

设置中文环境_我花几年时间找到的学习中文好方法,值得你一看

最近挺多朋友问关于我家小C是如何学习中文汉字的&#xff0c;其实我也一直挺想写这方面的内容的&#xff0c;但真的是很纠结。说起这个过程&#xff0c;就是一把眼泪一把鼻涕的辛酸&#xff0c;因为对于海外党来说&#xff0c;学中文真的是太艰辛了&#xff01;在孩子学习中文过…

重装系统无法在计算机上运行,开机无法进入系统?重装系统开机不能进入系统怎么办...

电脑卡顿、运行缓慢、蓝屏崩溃&#xff0c;在电脑出现这些问题的时候&#xff0c;我们都会选择重装系统来解决这些问题。然而在重装系统过程中&#xff0c;有时候出现意外&#xff0c;导致重装系统后进不了系统。重装系统开机进不了系统&#xff0c;我们应该怎么办呢&#xff1…

HTML+CSS+JS实现 ❤️ 粒子倒计时特效❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

我与计算机作文450字,打电脑作文450字

今天&#xff0c;我妈让我玩电脑。我想可以玩CF咯&#xff0c;我特别的高兴。下面请大家来看看作文网小编为大家带来的最新单元作文《打电脑作文450字》。如果想要更多关于单元作文&#xff0c;请继续关注我们出国留学网的作文栏目。篇一&#xff1a;打电脑作文450字放暑假了&a…

恒企自考_致自考生:想自考的人千千万万,遇到的困难却千篇一律

今天我们就一起来聊聊&#xff0c;自考路上&#xff0c;都有哪些困难&#xff0c;以及要如何解决&#xff01;先看一下&#xff0c;已经在路上的考生们他们觉的自考难在哪里&#xff1f;&#xff1a;从上图来看&#xff0c;总的来说就是“记忆力不行”“自律能力差”“没法安静…

HTML+CSS+JS实现 ❤️ 科技感的数字时钟特效❤️

代码目录&#xff1a; 主要代码实现&#xff1a; css样式 : charset "utf-8"; import url("https://fonts.googleapis.com/css?familyShareTechMono"); html, body {height: 100%; }body {background: #0f3854;background: radial-gradient(ellipse at c…

HTML+CSS+JS实现 ❤️ 卡西欧手表图形特效❤️

代码目录&#xff1a; 主要代码实现&#xff1a; css样式&#xff1a; import url(https://fonts.googleapis.com/css2?familyGidugu&familyMichroma&displayswap); font-face {font-family: "DSEG7 Classic";src: url(https://manzdev.github.io/twitch-c…

徐州医科大学计算机报名,2019年徐州医科大学计算机等级考试准考证打印

2019年上半年(第54次)全国计算机等级考试&#xff0c;将于2019年3月30日-4月1日进行。我校考点考试报名和考前培训班的招生工作已全面启动。本次报名考生将自行在网上报名、缴费及打印准考证&#xff0c;因此请报名考试和培训的同学在报名前务必认真阅读此通知及报名系统中的通…

HTML+CSS+JS实现 ❤️ 立方体旋转图片切换特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; css样式&#xff1a; /*Full-page view:https://codepen.io/GeorgePark/full/gegavO/*/import url(https://fonts.googleapis.com/css?familyMontserrat:500); :root {/* Base font size */font-size: 1…

湖北大学计算机考研怎么样,湖北大学研究生好考吗 复试难吗

考取湖北大学的研究生比较容易。考研难易主要看招生单位所处的地域、名气、排名等&#xff0c;因为报考生源不同。一般来说发达地区特别是大城市的重点大学都难考&#xff0c;而非重点大学则相对好考。湖北大学是非211高校&#xff0c;所在城市位于湖北。湖北大学研究生好考吗1…

区分错误类型_牛鹭学院:Bug类型解析及其常见实例介绍

软件测试中&#xff0c;bug的类型有很多种&#xff0c;比如&#xff1a;代码错误、界面优化、设计缺陷、需求补充和用户体验等&#xff1b;一般情况下&#xff0c;需求补充和设计缺陷比较好区分&#xff0c;但是代码错误、界面优化和用户体验区分不是很明显&#xff1b;下面我们…

HTML+CSS+JS实现 ❤️酷炫的时光隧道旅行动特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; css样式&#xff1a; html, body {width: 100%;height: 100%;overflow: hidden; }body {background: #000;text-align: center; }body::before {content: "";display: inline-block;height: 10…

word文档保存到服务器,读取SQL表数据保存到Word并将Word文档保存到服务器代码

代码如下&#xff1a;引用 Microsoft Word 11.0 Object Librarypublic bool ExportWord( DataTable Table ){object Missing System.Reflection.Missing.Value;int NumRows, NumColumns, rowIndex, colIndex;object FileName Word文件名; //如&#xff1a;c:\tets.docWord.Ap…

HTML+CSS+JS实现 ❤️夜晚云层动画特效❤️

效果演示&#xff1a; 基于css3 keyframes 属性制作乌云密布云层动画&#xff0c;夜晚云层飘过动画特效。可用于网页动态云层背景特效。利用animation 和png云图片制作完成。 代码目录&#xff1a; 主要代码实现&#xff1a; css样式&#xff1a; html, body {width: 100%;he…

微机原理换行代码_微机原理课程设计——汇编输出杨辉三角

目录第一章绪论...................................................................................................................................1第二章分析与设计..............................................................................................…

微软ODBC服务器驱动,Windows ODBC 驱动程序中的连接弹性

Windows ODBC 驱动程序中的连接弹性09/01/2020本文内容为了确保应用程序能与 Azure SQL 数据库 保持连接&#xff0c;Windows 上的 ODBC 驱动程序可以还原空闲连接。重要Microsoft Azure SQL 数据库和 SQL Server 2014(及更高版本)服务器版本支持连接复原能力功能。若要详细了解…

HTML+CSS+JS实现 ❤️3D悬浮粒子翻转动效❤️

效果演示&#xff1a; three基于canvas制作全屏的3D方块粒子悬停&#xff0c;跟随鼠标移动3D翻转动画特效。支持360度无死角翻转效果。 代码目录&#xff1a; 主要代码实现&#xff1a; html代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu…