偶尔谢谢带动感,让自己消遣的小画面,在探索CSS 和 JS的道路中,会发现很多有趣的东西,我觉得这是值得欣慰的一件事.
有时候觉得学习有些单调,枯燥,就想让画面自己动起来,CSS和JS稍微组合一下,画面就来了,感觉还不错.
主要是运用 CSS的Box-shaow属性,打造月亮周围的小星星.然后JS输出星星,根据条件让它们自己慢慢飘动.
效果图如下![]()
以下是整个代码的具体实现:
<style>
.head{
width: 100%;
height: 500px;
background:radial-gradient(rgba(0, 0, 0, 0.979),rgba(0, 0, 0, 0.973));
}
.moon{
width: 180px;
height: 180px;
border-radius: 50%;
background-color:white;
position: absolute;
margin: 50px 200px;
box-shadow: 3px 3px 3px 3px rgba(255, 255, 255, 0.986);
transform: rotate(-5deg);
animation:one 5s ease-in-out infinite;
}
.moon div{
width: 170px;
height: 170px;
border-radius: 50%;
background-color: black;
margin-left: 60px;
}
.star div{
background-color: rgba(255, 255, 255, 0.993);
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 5px 5px 5px solid white;
}
.starry{
position:absolute;
top: 15%;
left: 20%;
transform: translate(-50%, -50%);
height: 4px;
width: 4px;
border-radius:50%;
box-shadow:
#FFFFFF -26px 77px 0 -1px,
rgba(255,255,255,0.1) -36px 59px 0 -1px,
rgba(255,255,255,0.1) -28px 89px 0 -1px,
#FFFFFF -35px 20px 0 -1px,
#FFFFFF 14px 100px,
rgba(255,255,255,0.1) 41px 60px,
#FFFFFF 34px 39px,
rgba(255,255,255,0.1) 14px 45px 0 -1px,
#FFFFFF 64px 12px 0 -1px,
rgba(255,255,255,0.1) 32px 96px 0 -1px,
#FFFFFF 64px 71px,
rgba(255,255,255,0.1) 60px 18px 0 -1px,
#FFFFFF 34px 9px,
rgba(255,255,255,0.1) -26px 55px 0 -1px;
animation: starry_star 5s ease-in-out infinite;
}
.starry2{
position:absolute;
top: 15%;
left: 30%;
transform: translate(-50%, -50%);
height: 4px;
width: 4px;
border-radius:50%;
box-shadow:
#FFFFFF -26px 77px 0 -1px,
rgba(255,255,255,0.1) -36px 59px 0 -1px,
rgba(255,255,255,0.1) -28px 89px 0 -1px,
#FFFFFF -35px 20px 0 -1px,
#FFFFFF 14px 100px,
rgba(255,255,255,0.1) 41px 60px,
#FFFFFF 34px 39px,
rgba(255,255,255,0.1) 14px 45px 0 -1px,
#FFFFFF 64px 12px 0 -1px,
rgba(255,255,255,0.1) 32px 96px 0 -1px,
#FFFFFF 64px 71px,
rgba(255,255,255,0.1) 60px 18px 0 -1px,
#FFFFFF 34px 9px,
rgba(255,255,255,0.1) -26px 55px 0 -1px;
animation: starry_star 5s ease-in-out infinite;
}
.starry3{
position:absolute;
top: 15%;
left: 10%;
transform: translate(-50%, -50%);
height: 4px;
width: 4px;
border-radius:50%;
box-shadow:
#FFFFFF -26px 77px 0 -1px,
rgba(255,255,255,0.1) -36px 59px 0 -1px,
rgba(255,255,255,0.1) -28px 89px 0 -1px,
#FFFFFF -35px 20px 0 -1px,
#FFFFFF 14px 100px,
rgba(255,255,255,0.1) 41px 60px,
#FFFFFF 34px 39px,
rgba(255,255,255,0.1) 14px 45px 0 -1px,
#FFFFFF 64px 12px 0 -1px,
rgba(255,255,255,0.1) 32px 96px 0 -1px,
#FFFFFF 64px 71px,
rgba(255,255,255,0.1) 60px 18px 0 -1px,
#FFFFFF 34px 9px,
rgba(255,255,255,0.1) -26px 55px 0 -1px;
animation: starry_star 5s ease-in-out infinite;
}
@keyframes starry_star{
50%{
box-shadow:
rgba(255,255,255,0.1) -26px 77px 0 -1px,
#FFF -36px 59px 0 -1px,
#FFF -28px 89px 0 -1px,
rgba(255,255,255,0.1) -35px 20px 0 -1px,
rgba(255,255,255,0.1) 14px 100px,
#FFF 41px 60px,
rgba(255,255,255,0.1) 34px 39px,
#FFF 14px 45px 0 -1px,
rgba(255,255,255,0.1) 64px 12px 0 -1px,
#FFF 32px 96px 0 -1px,
rgba(255,255,255,0.1) 64px 71px,
#FFF 60px 18px 0 -1px,
rgba(255,255,255,0.1) 34px 9px,
#FFF -26px 55px 0 -1px,
rgba(255,255,255,0.1) -26px 77px 0 -1px,
#FFF 60px 18px 0 -1px,
rgba(255,255,255,0.1) 34px 9px,
#FFF -26px 55px 0 -1px,
rgba(255,255,255,0.1) -26px 77px 0 -1px;
}
}
@keyframes one {
50%{transform: rotate(10deg)}
}
</style>
</head>
<body>
<div class="head">
<div class="moon">
<div></div>
</div>
<div class="starry"></div>
<div class="starry2"></div>
<div class="starry3"></div>
</div>
<script>
window.onload=function(){
var s=0;
function all(){
s++;
var head = document.querySelector('.head'), //获取要插入的地方
snow = document.createElement('div'),
numColor = Math.random*1+0.8;
function stars(){ //以下函数是返回星星随机飘动的各种值,比如maginleft,marginTop,大小,透明度等等
return Math.floor(Math.random()*98);
}
function newTop(){
return (Math.random()*300-50);
}
function move(){
return (Math.random()*1333);
}
function big(){
return Math.random()*3;
}
function ran(){
return (Math.random()*1+0.5) ;
}
function num(){
return Math.floor(Math.random()*2+3);
}
function numOpac(){
return parseFloat(Math.random()*1+0.3) ;
}
var top = function(){
return Math.floor(Math.random()*400+20);
}
var left = function(){
return Math.floor(Math.random()*1333);
}
snow.setAttribute('class','star'); //为插入的星星建立一个特性class,以便后面好取到操作DOM;
snow.style.cssText='width:'+num()+'px;height:'+num()+'px;margin-left:'+left()+'px;margin-top:'+top()+'px;position:absolute;border-radius:50%;transition:2s;opacity:'+ran()+'';
head.appendChild(snow); //插入星星到页面中,通过setTimeout 反复调用.
clear = setTimeout(all,100);
if(s == 99){ //当插入数量达到要求,便取消setTimeout,接下来就是简单的操作星星的位置.
var star = document.querySelectorAll('.star');
function stars(){
return Math.floor(Math.random()*98);
}
clearTimeout(clear);
function change(){
star[stars()].style.opacity=ran();
star[stars()].style.marginLeft=move()+'px';
star[stars()].style.transition='180s';
star[stars()].style.marginTop=newTop()+'px';
setTimeout(change,300); //最后通过setTImeout让星星们和月亮慢慢的移动,交相辉映,虽然效果没有做到很棒,但是思路清晰,至于样式,自己想怎么玩就怎么玩.
}
change();
}
}
all();
}
</script>
|
管理
