Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { box-sizing: border-box; } html, body, #main { height: 100%; overflow-x: hidden; background-color: #000033; background: linear-gradient(to top, #00008B, #000033); } #main { width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } #moon { position: absolute; top: 50px; width: 200px; height: 200px; background-color: #F2F2F2; background: linear-gradient(to right, #B3B3B3 20%, #F2F2F2 80%); border-radius: 100px; box-shadow: 0 0 60px 50px rgba(0, 0, 200, 0.4); opacity: 1; z-index: 2; } .cloud { position: absolute; width: 300px; height: 90px; background-color: #EEEEEE; border-radius: 50px; opacity: .8; box-shadow: 0 0 50px 60px #eeeeee; top: 140px; left: 270px; z-index: 3; animation: moveCloud 100s infinite linear; } .cloud-part { width: 100px; height: 40px; background-color: #EEEEEE; border-radius: 50px; box-shadow: 0 0 50px 60px #eeeeee; } .part1 { margin-left: 270px; margin-top: 40px; } .part2 { margin-top: -140px; margin-left: 20px; } #anotherCloud.cloud { top: 250px; animation-duration: 50s; } #anotherCloud.cloud .cloud-part.part1 { margin-left: 230px; margin-top: 60px; } .star { position: absolute; width: 2px; height: 2px; border-radius: 1px; background-color: white; z-index: 1; } #starCount { color: white; position: absolute; } @keyframes moveCloud { from { left: -500px; } to { left: 1500px; } }
JavaScript
window.onload = function(){ var num = 0; for (i =0; i < 1001; i++) { var thetop = Math.floor(Math.random() * 601) + "px"; var theleft = Math.floor(Math.random() * 1601) + "px"; var opacity = Math.random(); console.log({"left" :theleft,"top" :thetop}); var newStar = document.createElement("div"); newStar.className = "star"; document.body.appendChild(newStar); newStar.style.top = thetop; newStar.style.left = theleft; newStar.style.opacity = opacity; num++; // document.getElementById("starCount").innerHTML = num; } }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css月亮和云-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号