ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3を使って星を作る方法
CSS3を使って星を作る方法
- 高洛峰オリジナル
- 2017-03-04 16:53:521526ブラウズ
製造原理: この方法で作成したボールは比較的パフォーマンスが重視されるため、効果をテストすることができます。
<!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 中国語 Web サイトに注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSの継承とカスケードの詳細な説明次の記事：CSSの継承とカスケードの詳細な説明