Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body { margin: 0; height: 100%; background-color: rgb(148,147,143); } div { top: 50%; left: 50%; width: 200px; height: 300px; border-radius: 50% 50% 30% 30%; /* border: 1px solid black; */ position: absolute; transform: translate(-120%, 0%) rotateZ(45deg); background-image: radial-gradient( ellipse at top center, rgba(255,255,255,1), transparent 50% ); background-size: 150px 300px; background-position: 10px 0px; background-repeat: no-repeat; box-shadow: -5px -60px 20px 5px rgba(0,0,0,0.4), inset 0px 50px 20px -15px rgba(0,0,0,0.4); } div::before { content: ''; top: -250px; left: -130px; width: 300px; height: 300px; border-radius: 50%; /* border: 1px solid black; */ position: absolute; transform: rotate(-45deg); background-color: rgb(148,147,143); background-image: radial-gradient( circle, rgba(255,255,255,0.3), rgba(255,255,255,0.1) 25%, transparent 50% ), radial-gradient( ellipse, rgba(210, 210, 210, 0.7), transparent 50% ), radial-gradient( ellipse, rgba(210, 210, 210, 0.7), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.7), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.7), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.4), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.5), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.7), transparent 50% ), radial-gradient( ellipse, rgba(255,255,255,0.5), transparent 50% ), radial-gradient( ellipse, rgba(0,0,0,0.1), transparent 60% ), radial-gradient( ellipse, rgba(0,0,0,0.2), transparent 60% ), radial-gradient( ellipse, rgba(57, 57, 57, 0.5), transparent 50% ), radial-gradient( ellipse, rgba(57, 57, 57, 0.5), transparent 50% ), radial-gradient( ellipse, rgba(109, 109, 109, 0.1), transparent 50% ), radial-gradient( ellipse, rgba(121, 121, 121, 0.2), transparent 50% ); background-size: /* shine */ 100px 100px, /* light */ 100px 100px, 100px 100px, 100px 100px, 100px 100px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, /* dark */ 100px 100px, 120px 120px, 120px 120px, 120px 120px, 120px 120px, 120px 120px; background-position: /* shine */ 58% -5%, /* light small */ -15% 90%, -5% 100%, 5% 110%, 20% 120%, /* light big */ -70% 170%, -35% 210%, -10% 215%, 80% 225%, /* dark */ -35% 25%, -10% -30%, 135% 15%, 80% -45%, 15% 40%, 75% 80%; background-repeat: no-repeat; box-shadow: inset -5px 5px 8px 0px rgba(0,0,0,0.15), inset -30px 15px 20px -10px rgba(0,0,0,0.2), inset -10px 10px 30px 5px rgba(0,0,0,0.2), inset -10px 10px 10px -5px rgba(0,0,0,0.1), inset 12px -20px 5px -21px rgba(255,255,255,0.8), inset 10px -30px 20px -20px rgba(255,255,255,0.5), inset 50px -50px 20px -10px rgba(108, 108, 108, 0.15); } div::after { content: ''; top: -240px; left: -40px; width: 60px; height: 80px; border-radius: 40px 0 0 0 / 15px 0 0 0; position: absolute; /* border: 1px solid black; */ transform: perspective(100px) scaleY(0.5) rotateX(-5deg) rotateY(-15deg) rotateZ(25deg); background-color: white; background-image: linear-gradient( to right, transparent 20%, rgba(255,255,255,0.5) 50%, transparent 100% ), linear-gradient( to top, transparent 70%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.4) 80%, transparent 90% ); filter: blur(.5px); } @media only screen and (max-width: 800px) { div { transform: scale(0.5) translate(-140%, 0%) rotateZ(45deg); } }
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号