如何用CSS3做星體
- 高洛峰原創
- 2017-03-04 16:53:521498瀏覽
製作原理：在我的上一篇隨筆中有詳細的說明，由於這個方法製作的球，比較耗性能，就只做了3個小球，效果大家可以試驗。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: black;
}
.taiYang {
width: 80px;
height: 80px;
border-radius: 40px;
box-shadow: 0 0 30px 30px pink;
opacity: 0.5;
position: absolute;
top: 50%;
margin-top: -40px;
margin-left: -40px;
left: 50%;
transform: rotateX(70deg);
transform-style: preserve-3d;
}
.ty {
width: 80px;
height: 80px;
opacity: 0.5;
border: 1px solid #EFF57E;
background-color: #EFF57E;
border-radius: 50%;
position: absolute;
}
.diQiuGD {
width: 600px;
height: 600px;
border-radius: 300px;
border: 1px solid white;
position: absolute;
top: 50%;
margin-top: -300px;
margin-left: -300px;
left: 50%;
transform-style: preserve-3d;
}
.diQiu {
width: 40px;
height: 40px;
box-shadow: 0 0 20px 20px darkgoldenrod;
border-radius: 20px;
background-color: green;
top: 20px;
left: 425px;
position: absolute;
transform: rotateX(30deg);
transform-style: preserve-3d;
}
.dq {
width: 40px;
height: 40px;
background-color: green;
border-radius: 50%;
position: absolute;
}
.yueLiangGD{
width: 150px;
height: 150px;
border-radius: 80px;
border: 1px solid white;
position: absolute;
top: 50%;
margin-top: -75px;
margin-left: -75px;
left: 50%;
transform-style: preserve-3d;
}
.yueLiang {
width: 20px;
height: 20px;
box-shadow: 0 0 10px 10px greenyellow;
border-radius: 10px;
background-color: goldenrod;
top: 102px;
left: 130px;
position: absolute;
transform-style: preserve-3d;
}
.yl {
width: 20px;
height: 20px;
background-color: goldenrod;
border-radius: 50%;
position: absolute;
}
@keyframes faguang {
0% {
box-shadow: 0 0 0 10px white;
}
50% {
box-shadow: 0 0 50px 50px white;
}
100% {
box-shadow: 0 0 0 10px white
}
}
.animation2 {
animation: faguang 3s linear infinite;
}
@keyframes zizhuan {
from {
rotateX(0 deg) rotateY(0 deg)
}
to {
transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
}
}
@keyframes zizhuan1 {
from {
rotateX(0 deg) rotateY(0 deg)
}
to {
transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
}
}
.animation {
animation: zizhuan 10s linear infinite;
}
.animation1 {
animation: zizhuan1 3s linear infinite;
}
</style>
</head>
<body>
<p class="taiYang animation2" id="taiYang">
<p class="diQiuGD animation">
<p id="diQiu">
<p class="yueLiangGD animation1">
<p id="yueLiang"></p>
</p>
</p>
</p>
</p>
</body>
</html>
<script>
window.onload = function () {
function zaoQiu(id, className) {
var ele = document.getElementById(id);
for (var i = 0; i < 36; i++) {
var p = document.createElement("p");
p.className = className;
ele.appendChild(p);
}
var ps = document.getElementsByClassName(className);
for (var i = 0; i < 18; i++) {
ps[i].style.transform = "rotateY(" + 10 * i + "deg)";
}
for (var i = 18; i < ps.length; i++) {
ps[i].style.transform = "rotateX(" + 10 * i + "deg)";
}
}
zaoQiu("taiYang", "ty");
zaoQiu("diQiu", "dq");
zaoQiu("yueLiang", "yl");
}
</script>更多如何用CSS3做星體相關文章請關注PHP中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css繼承與層疊的詳解下一篇：css繼承與層疊的詳解