Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body{background-color: #1F1F1F;overflow: hidden} .wrapper { min-width: 100vw; min-height: 100vh; display: flex; align-items: center; justify-content: center; perspective: 60em; flex-direction: column; background-color: #131417; overflow: hidden; } .wrapper .title { font-size: 3rem; margin-bottom: 6rem; color: #DDD; } .wrapper .sphere { width: 45vmin; height: 45vmin; position: relative; animation: rotation 60s infinite linear; transform-style: preserve-3d; } .wrapper .sphere .section { width: 100%; height: 100%; position: absolute; border-radius: 50%; border: 2px solid #333; transform-style: preserve-3d; } .wrapper .sphere .section:nth-child(1) { border-color: #5500ff; box-shadow: inset 0 0 5vmin 0px #5500ff, 0 0 90px -30px #5500ff; transform: rotateY(9deg); animation: fullRot1 10s linear infinite; } @keyframes fullRot1 { from { transform: rotateY(12deg); } to { transform: rotateY(372deg); } } .wrapper .sphere .section:nth-child(2) { border-color: #aa00ff; box-shadow: inset 0 0 5vmin 0px #aa00ff, 0 0 90px -30px #aa00ff; transform: rotateY(18deg); animation: fullRot2 10s linear infinite; } @keyframes fullRot2 { from { transform: rotateY(24deg); } to { transform: rotateY(384deg); } } .wrapper .sphere .section:nth-child(3) { border-color: magenta; box-shadow: inset 0 0 5vmin 0px magenta, 0 0 90px -30px magenta; transform: rotateY(27deg); animation: fullRot3 10s linear infinite; } @keyframes fullRot3 { from { transform: rotateY(36deg); } to { transform: rotateY(396deg); } } .wrapper .sphere .section:nth-child(4) { border-color: #ff00aa; box-shadow: inset 0 0 5vmin 0px #ff00aa, 0 0 90px -30px #ff00aa; transform: rotateY(36deg); animation: fullRot4 10s linear infinite; } @keyframes fullRot4 { from { transform: rotateY(48deg); } to { transform: rotateY(408deg); } } .wrapper .sphere .section:nth-child(5) { border-color: #ff0055; box-shadow: inset 0 0 5vmin 0px #ff0055, 0 0 90px -30px #ff0055; transform: rotateY(45deg); animation: fullRot5 10s linear infinite; } @keyframes fullRot5 { from { transform: rotateY(60deg); } to { transform: rotateY(420deg); } } .wrapper .sphere .section:nth-child(6) { border-color: red; box-shadow: inset 0 0 5vmin 0px red, 0 0 90px -30px red; transform: rotateY(54deg); animation: fullRot6 10s linear infinite; } @keyframes fullRot6 { from { transform: rotateY(72deg); } to { transform: rotateY(432deg); } } .wrapper .sphere .section:nth-child(7) { border-color: #ff5500; box-shadow: inset 0 0 5vmin 0px #ff5500, 0 0 90px -30px #ff5500; transform: rotateY(63deg); animation: fullRot7 10s linear infinite; } @keyframes fullRot7 { from { transform: rotateY(84deg); } to { transform: rotateY(444deg); } } .wrapper .sphere .section:nth-child(8) { border-color: #ffaa00; box-shadow: inset 0 0 5vmin 0px #ffaa00, 0 0 90px -30px #ffaa00; transform: rotateY(72deg); animation: fullRot8 10s linear infinite; } @keyframes fullRot8 { from { transform: rotateY(96deg); } to { transform: rotateY(456deg); } } .wrapper .sphere .section:nth-child(9) { border-color: yellow; box-shadow: inset 0 0 5vmin 0px yellow, 0 0 90px -30px yellow; transform: rotateY(81deg); animation: fullRot9 10s linear infinite; } @keyframes fullRot9 { from { transform: rotateY(108deg); } to { transform: rotateY(468deg); } } .wrapper .sphere .section:nth-child(10) { border-color: #aaff00; box-shadow: inset 0 0 5vmin 0px #aaff00, 0 0 90px -30px #aaff00; transform: rotateY(90deg); animation: fullRot10 10s linear infinite; } @keyframes fullRot10 { from { transform: rotateY(120deg); } to { transform: rotateY(480deg); } } .wrapper .sphere .section:nth-child(11) { border-color: #55ff00; box-shadow: inset 0 0 5vmin 0px #55ff00, 0 0 90px -30px #55ff00; transform: rotateY(99deg); animation: fullRot11 10s linear infinite; } @keyframes fullRot11 { from { transform: rotateY(132deg); } to { transform: rotateY(492deg); } } .wrapper .sphere .section:nth-child(12) { border-color: lime; box-shadow: inset 0 0 5vmin 0px lime, 0 0 90px -30px lime; transform: rotateY(108deg); animation: fullRot12 10s linear infinite; } @keyframes fullRot12 { from { transform: rotateY(144deg); } to { transform: rotateY(504deg); } } .wrapper .sphere .section:nth-child(13) { border-color: #00ff55; box-shadow: inset 0 0 5vmin 0px #00ff55, 0 0 90px -30px #00ff55; transform: rotateY(117deg); animation: fullRot13 10s linear infinite; } @keyframes fullRot13 { from { transform: rotateY(156deg); } to { transform: rotateY(516deg); } } .wrapper .sphere .section:nth-child(14) { border-color: #00ffaa; box-shadow: inset 0 0 5vmin 0px #00ffaa, 0 0 90px -30px #00ffaa; transform: rotateY(126deg); animation: fullRot14 10s linear infinite; } @keyframes fullRot14 { from { transform: rotateY(168deg); } to { transform: rotateY(528deg); } } .wrapper .sphere .section:nth-child(15) { border-color: cyan; box-shadow: inset 0 0 5vmin 0px cyan, 0 0 90px -30px cyan; transform: rotateY(135deg); animation: fullRot15 10s linear infinite; } @keyframes fullRot15 { from { transform: rotateY(180deg); } to { transform: rotateY(540deg); } } .wrapper .sphere .section:nth-child(16) { border-color: #00aaff; box-shadow: inset 0 0 5vmin 0px #00aaff, 0 0 90px -30px #00aaff; transform: rotateY(144deg); animation: fullRot16 10s linear infinite; animation: none; transform: scale(1.6); opacity: 0; box-shadow: inset 0 0 5vmin 0px #00aaff, 0 0 90px -30px #00aaff; } @keyframes fullRot16 { from { transform: rotateY(192deg); } to { transform: rotateY(552deg); } } .wrapper .sphere .section:nth-child(17) { border-color: #0055ff; box-shadow: inset 0 0 5vmin 0px #0055ff, 0 0 90px -30px #0055ff; transform: rotateY(153deg); animation: fullRot17 10s linear infinite; animation: none; transform: scale(1.7); opacity: 0; box-shadow: inset 0 0 5vmin 0px #0055ff, 0 0 90px -30px #0055ff; opacity: 1; transform: scale(1.7); box-shadow: inset 0 0 5vmin 0px #0055ff, 0 0 90px -30px #0055ff; } @keyframes fullRot17 { from { transform: rotateY(204deg); } to { transform: rotateY(564deg); } } .wrapper .sphere .section:nth-child(18) { border-color: blue; box-shadow: inset 0 0 5vmin 0px blue, 0 0 90px -30px blue; transform: rotateY(162deg); animation: fullRot18 10s linear infinite; animation: none; transform: scale(1.8); opacity: 0; box-shadow: inset 0 0 5vmin 0px blue, 0 0 90px -30px blue; opacity: 1; transform: scale(1.8); box-shadow: inset 0 0 5vmin 0px blue, 0 0 90px -30px blue; } @keyframes fullRot18 { from { transform: rotateY(216deg); } to { transform: rotateY(576deg); } } .wrapper .sphere .section:nth-child(19) { border-color: #5500ff; box-shadow: inset 0 0 5vmin 0px #5500ff, 0 0 90px -30px #5500ff; transform: rotateY(171deg); animation: fullRot19 10s linear infinite; animation: none; transform: scale(1.9); opacity: 0; box-shadow: inset 0 0 5vmin 0px #5500ff, 0 0 90px -30px #5500ff; opacity: 1; transform: scale(1.9); box-shadow: inset 0 0 5vmin 0px #5500ff, 0 0 90px -30px #5500ff; } @keyframes fullRot19 { from { transform: rotateY(228deg); } to { transform: rotateY(588deg); } } .wrapper .sphere .section:nth-child(20) { border-color: #aa00ff; box-shadow: inset 0 0 5vmin 0px #aa00ff, 0 0 90px -30px #aa00ff; transform: rotateY(180deg); animation: fullRot20 10s linear infinite; animation: none; transform: scale(2); opacity: 0; box-shadow: inset 0 0 5vmin 0px #aa00ff, 0 0 90px -30px #aa00ff; opacity: 1; transform: scale(2); box-shadow: inset 0 0 5vmin 0px #aa00ff, 0 0 90px -30px #aa00ff; } @keyframes fullRot20 { from { transform: rotateY(240deg); } to { transform: rotateY(600deg); } } @keyframes rotation { 0% { transform: rotateY(0deg) rotateX(90deg); } 50% { transform: rotateY(1080deg) rotateX(120deg); } 100% { transform: rotateY(2160deg) rotateX(90deg); } }
JavaScript
粒子
时间
文字
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号