JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘： 传送门 密码：8ft8
绚丽的3D星空动画效果(纯CSS)
(3D星空动画可以用作网页背景，Gary为文本文字)
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery和CSS3超绚丽的3D星空动画特效</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src='js/prefixfree.min.js'></script>
<style class="cp-pen-styles"> p {
position: fixed;
top: 50%;
left: 0;
right: 0;
text-align: center;
transform: translateY(-50%);
font-size: 40px;
font-weight: 900;
color: white;
text-shadow: 0 0 50px black;
text-transform: capitalize;
font-family: 'Roboto','Helvetica','Arial',sans-serif;
letter-spacing: 5px;
} body {
background: radial-gradient(200% 100% at bottom center, #0070aa, #0b2570, #000035, #000);
background: radial-gradient(220% 105% at top center, #000 10%, #000035 40%, #0b2570 65%, #0070aa);
background-attachment: fixed;
overflow: hidden;
} @keyframes rotate {
0% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
}
100% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
}
}
.stars {
transform: perspective(500px);
transform-style: preserve-3d;
position: absolute;
bottom: 0;
perspective-origin: 50% 100%;
left: 50%;
animation: rotate 90s infinite linear;
} .star {
width: 2px;
height: 2px;
background: #F7F7B6;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0 -300px;
transform: translate3d(0, 0, -300px);
backface-visibility: hidden;
}
</style>
</head>
<body> <p>Gary</p>
<div class="stars"> </div>
<script src='js/stopExecutionOnTimeout.js'></script> <script>
$(document).ready(function () {
var stars = 800;
var $stars = $('.stars');
var r = 800;
for (var i = 0; i < stars; i++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
var $star = $('<div/>').addClass('star');
$stars.append($star);
}
window.CP.exitedLoop(1);
$('.star').each(function () {
var cur = $(this);
var s = 0.2 + Math.random() * 1;
var curR = r + Math.random() * 300;
cur.css({
transformOrigin: '0 0 ' + curR + 'px',
transform: ' translate3d(0,0,-' + curR + 'px) rotateY(' + Math.random() * 360 + 'deg) rotateX(' + Math.random() * -50 + 'deg) scale(' + s + ',' + s + ')'
});
});
}); </script>
</body>
</html>
index.html
(使用了三个框架)
jquery.min
prefixfree.min
stopExecutionOnTimeout
实现过程
CSS
星空渐变背景
body {
background: radial-gradient(200% 100% at bottom center, #0070aa, #0b2570, #000035, #000);
background: radial-gradient(220% 105% at top center, #000 10%, #000035 40%, #0b2570 65%, #0070aa);
background-attachment: fixed;
overflow: hidden;
}
background：设置星空夜晚渐变效果(也不知道他们是怎么测试出来的)
background-attachment :指定一个固定的背景图像
fixed 背景图像是固定的
星空(一颗)
.star {
width: 2px;
height: 2px;
background: #F7F7B6;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0 -300px;
transform: translate3d(0, 0, -300px);
backface-visibility: hidden;
}
transform-origin:设置旋转元素的基点位置 传送门
x-axis:定义视图被置于 X 轴的何处
y-axis:定义视图被置于 Y 轴的何处
z-axis:定义视图被置于 Z 轴的何处
backface-visibility：隐藏被旋转的 div 元素的背面(影藏星星在星空下)
动态星空(多颗)
.stars {
transform: perspective(500px);
transform-style: preserve-3d;
position: absolute;
bottom: 0;
perspective-origin: 50% 100%;
left: 50%;
animation: rotate 90s infinite linear;
}
perspective 定义 3D 元素距视图的距离(星星在星空中的距离)
制作星空动画
@keyframes rotate {
0% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
}
100% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
}
}
perspective()：为 星星转换元素定义透视视图
rotateZ() ：定义星星沿着 Z 轴的 3D 旋转 20deg
rotateX()： 定义星星沿着 X 轴的 3D 旋转 -40deg
rotateY()： 定义星星沿着 Y 轴的 3D 旋转
DOM
<script>
$(document).ready(function () {
var stars = 800;
var $stars = $('.stars');
var r = 800;
for (var i = 0; i < stars; i++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
var $star = $('<div/>').addClass('star');
$stars.append($star);
}
window.CP.exitedLoop(1);
$('.star').each(function () {
var cur = $(this);
var s = 0.2 + Math.random() * 1;
var curR = r + Math.random() * 300;
cur.css({
transformOrigin: '0 0 ' + curR + 'px',
transform: ' translate3d(0,0,-' + curR + 'px) rotateY(' + Math.random() * 360 + 'deg) rotateX(' + Math.random() * -50 + 'deg) scale(' + s + ',' + s + ')'
});
});
});
</script>
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件
星星遍布夜空
addClass() ：向被选元素添加一个或多个类名
append() ：用于在列表末尾添加新的对象
transform-origin ：设置旋转元素的基点位置
transformOrigin: '0 0 ' + curR + 'px',
transform: ' translate3d(0,0,-' + curR + 'px) rotateY(' + Math.random() * 360 + 'deg) rotateX(' + Math.random() * -50 + 'deg) scale(' + s + ',' + s + ')'
transformOrigin：星空每次都绕着字体中间旋转
transform:随机出现新的星星
暂时不知道
window.CP.shouldStopExecution(1)
window.CP.exitedLoop(1)
有什么用。。。
O(∩_∩)O留着
JS框架_(JQuery.js)绚丽的3D星空动画的更多相关文章
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- JS框架_(JQuery.js)圆形多选菜单选项
百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
- JS框架_(JQuery.js)文章全屏动画切换
百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
- JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
- JS框架_(JQuery.js)点赞按钮动画
百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...
- JS框架_(JQuery.js)图片相册掀开切换效果
百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- JS框架_(JQuery.js)上传进度条
百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- JS框架_(JQuery.js)模拟刮奖
百度云盘:传送门 密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- Python 入门 之 面向对象的三大特性（封装 / 继承 / 多态）
Python 入门 之 面向对象的三大特性(封装 / 继承 / 多态) 1.面向对象的三大特性: (1)继承 继承是一种创建新类的方式,在Python中,新建的类可以继承一个或多个父类,父类又可以 ...
- Scala学习一——基础
一.使用Scala解释器 如果以命令行的方式运行,输出的结果会把类型带上,且结果名默认为res0递增.且Scala解释器读到一个解释器求值打印然后读取下一个(这个过程为读取-求值-打印-循环[REPL ...
- Codeforces Round #603 F Economic Difficulties
题目大意 给你两棵树,结点分别是1-A与1-B,然后给了N台设备,并且A树和B树的叶子结点(两棵树的叶子节点数量相同)都是链接电机的.问,最多可以删掉几条边使得每个设备都能连到任意一棵(或两棵)树的根 ...
- 分布式的几件小事（六）dubbo如何做服务治理、服务降级以及重试
1.服务治理 服务治理主要作用是改变运行时服务的行为和选址逻辑,达到限流,权重配置等目的. ①调用链路自动生成 一个大型的分布式系统,会由大量的服务组成,那么这些服务之间的依赖关系和调用链路会很复杂, ...
- 12 Python之函数进阶
1. 动态传参 *, ** : 形参: 聚合 位置参数* -> 元组 def func(*args, a, b, c): print(a, b , c, args) func(1,2,3,4,5 ...
- 帝国cms 常用标签汇总
1.列表内容标签 [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--] 2.分页标签 [!--show. ...
- python多线程、多进程、协程笔记
import threading import time import multiprocessing import asyncio movie_list = ['斗破.avi', '复仇者联盟.mp ...
- Python内置函数清单
作者:Vamei 出处:http://www.cnblogs.com/vamei Python内置(built-in)函数随着python解释器的运行而创建.在Python的程序中,你可以随时调用这些 ...
- DockerScan：Docker安全分析&测试工具
DockerScan:Docker安全分析&测试工具 今天给大家介绍的是一款名叫DockerScan的工具,我们可以用它来对Docker进行安全分析或者安全测试. 项目主页 http://gi ...
- iQOO5G手机卡槽公布
华为.中兴.一加.OPPO.vivo各自的5G手机相继拿到了3C强制认证,小米的也在路上,5G手机真的越来越近了. 今天,vivo iQOO还公布了其5G手机所用的卡槽样式,可以看到采用了双卡设计,同 ...