Heim >Web-Frontend >CSS-Tutorial >So erstellen Sie einen Stern mit CSS3
So erstellen Sie einen Stern mit CSS3
- 高洛峰Original
- 2017-03-04 16:53:521530Durchsuche
Herstellungsprinzip: Eine ausführliche Erklärung gibt es in meinem letzten Aufsatz. Da die nach dieser Methode hergestellten Bälle relativ leistungsintensiv sind, habe ich nur 3 kleine Bälle hergestellt. Sie können die Wirkung testen.
<!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>Weitere Artikel zur Verwendung von CSS3 zum Erstellen von Sternen finden Sie auf der chinesischen PHP-Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der CSS-Vererbung und -KaskadierungNächster Artikel：Ausführliche Erläuterung der CSS-Vererbung und -Kaskadierung