星空样式（HTML）

星空样式写法

引入jquery库
css样式代码
js部分

一：引入jquery库

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

二:css样式代码

body {/* 径向渐变 第一个参数是位置 *//* 这里用了background-attachment 在渐变色产生了效果*//* overflow: hidden;溢出隐藏元素 */background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);background-attachment: fixed;overflow: hidden;}/* perspective从哪个角度去看 *//* @keyframes roate 动画旋转 */@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;

三：js部分

$(document).ready(function() {var stars = 2000; /*星星的密集程度，数字越大越多*/
var $stars = $(".stars"); //操作星星
var r = 800; /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/
for (var i = 0; i < stars; i++) {var $star = $("<div/>").addClass("star"); //添加星星类
console.log($star)
$stars.append($star);
}
//这里创建出星星运动的轨迹
//选取出class = star 元素
//用this指的是这个对象
$(".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 + ")"})
})
})

最后得到的效果图

星空样式（HTML）相关推荐

七夕节，程序员们都怎么哄女朋友开心？
大家好,马上就七夕节了,七夕节是牛郎织女鹊桥相会的相会的日子. 这篇文章的前提是,你得有个女朋友,没有就先收藏着吧! 一.七夕节的由来七夕节的来源是梁山伯与祝英台的美丽传说,化成了一对蝴蝶~ 美丽的 ...
自定义刻度_想为 Apple Watch 打造自定义表盘，试试这款 App
作者:huhuhang David Smith 是一位专注于 Apple Watch 应用独立开发者,并在早些时候推出了一系列以 ++ 结尾命名的健康类应用,像 Sleep++.Workouts++. ...
七夕节马上要到了，前端工程师，后端工程师，算法工程师都怎么哄女朋友开心？
这篇文章的前提是,你得有个女朋友,没有就先收藏着吧! 七夕节的来源是梁山伯与祝英台的美丽传说,化成了一对蝴蝶~ 美丽的神话!虽然现在一般是过214的情人节了,但是不得不说,古老的传统的文化遗产,还是要 ...
Cnblogs自定义皮肤css样式-星空观测者
不知不觉来Cnblogs也这么久了,然而Blogs提供的主题还是依旧那么复古,总觉得阅读起来难免枯燥,虽然我认为做技术不可以太过浮躁,但是一个美观的主题终究是吸引人眼的第一要素. 毕竟这么久了,在博客 ...
绘制多边形_PS学习教程！教你绘制低多边形星空效果熊猫头像
低多边形风格介于抽象与象形之间,是一种表现力很强的插画类型,用于LOGO的设计也未尝不可.它的绘制过程也非常简单,尤其在AI中,利用三角色块一个个拼缀而成即可,设计师要做的是对色彩的选择和控制,以便能 ...
用python画梵高星空-python 梵高
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. 对于一个视频来说,只需要将每一帧都转换后输出,并按照一定的时间间隔清屏. ...
canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）...
[下篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
java替换html中的样式
package com.yz.yrh.integration;import java.util.regex.Pattern;/*** Created by Administrator on 2017/ ...
猎户星空否认停发高管薪资：无论遭遇怎样困难都不会苛扣员工薪酬
3月8日消息,近期有消息称猎户星空决定高管停发三个月薪水:中层缓发3个月.每个月缓发50%,并承诺3个月内工资补发到位. 对此猎户星空董事长傅盛公开发文回应外界称,相关报道对公司的经营和产品报道失实, ...

星空样式（HTML）

星空样式写法

星空样式（HTML）相关推荐

最新文章

热门文章