Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
input { --trunk: maroon; --ground: white; --sky: #dde; --sky2: #bbd; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 70vmin; height: 50vmin; background: /* tree */ conic-gradient(at 50% -20%, #0000 177deg, var(--trunk) 177.25deg 182.75deg, #0000 183deg) 30vmin 50% / 10vmin 30vmin, conic-gradient(at 110% 30%, #0000 237deg, var(--trunk) 237.25deg 245.75deg, #0000 247deg) 35vmin 60% / 10vmin 20vmin, conic-gradient(at 110% 40%, #0000 217deg, var(--trunk) 217.25deg 225.75deg, #0000 227deg) 38vmin 48% / 4vmin 10vmin, conic-gradient(at 110% 30%, #0000 287deg, var(--trunk) 287.25deg 295.75deg, #0000 297deg) 43vmin 60% / 3vmin 10vmin, conic-gradient(at 120% 30%, #0000 217deg, var(--trunk) 217.25deg 222.75deg, #0000 223deg) 35vmin 24% / 6vmin 14vmin, conic-gradient(at 110% 30%, #0000 277deg, var(--trunk) 277.25deg 282.75deg, #0000 283deg) 39.75vmin 34% / 4vmin 10vmin, conic-gradient(at 110% 40%, #0000 237deg, var(--trunk) 227.25deg 235.75deg, #0000 247deg) 41.75vmin 28% / 2vmin 8vmin, conic-gradient(at 120% 30%, #0000 207deg, var(--trunk) 207.25deg 212.75deg, #0000 213deg) 35vmin 10% / 3vmin 9vmin, conic-gradient(at 120% 30%, #0000 217deg, var(--trunk) 217.25deg 223.75deg, #0000 224deg) 35vmin 21% / 3vmin 9vmin, conic-gradient(at -40% 30%, #0000 95deg, var(--trunk) 0 100deg, #0000 0) 26vmin 50% / 9vmin 10vmin, conic-gradient(at -40% 10%, #0000 115deg, var(--trunk) 0 120deg, #0000 0) 28vmin 47% / 4vmin 6vmin, conic-gradient(at -40% 80%, #0000 36deg, var(--trunk) 0 40deg, #0000 0) 31vmin 60% / 9vmin 10vmin, conic-gradient(at -40% -20%, #0000 110deg, var(--trunk) 0 115deg, #0000 0) 27.5vmin 38% / 7.5vmin 6vmin, conic-gradient(at 0% -20%, #0000 160deg, var(--trunk) 0 165deg, #0000 0) 29vmin 30% / 7.5vmin 4vmin, conic-gradient(at 0% -20%, #0000 150deg, var(--trunk) 0 158deg, #0000 0) 31.5vmin 25% / 4vmin 6vmin, /* snow */ radial-gradient(closest-side, white 40%, #0000 0) 70% 70% / 1vmin 1vmin, radial-gradient(closest-side, white 50%, #0000 0) 60% 60% / 1vmin 1vmin, radial-gradient(closest-side, white 60%, #0000 0) 80% 30% / 1vmin 1vmin, radial-gradient(closest-side, white 70%, #0000 0) 90% 60% / 1vmin 1vmin, radial-gradient(closest-side, white 40%, #0000 0) 50% 10% / 1vmin 1vmin, radial-gradient(closest-side, white 50%, #0000 0) 55% 25% / 1vmin 1vmin, radial-gradient(closest-side, white 60%, #0000 0) 65% 15% / 1vmin 1vmin, radial-gradient(closest-side, white 70%, #0000 0) 75% 34% / 1vmin 1vmin, radial-gradient(closest-side, white 40%, #0000 0) 85% 10% / 1vmin 1vmin, radial-gradient(closest-side, white 50%, #0000 0) 95% 77% / 1vmin 1vmin, radial-gradient(closest-side, white 60%, #0000 0) 72% 50% / 1vmin 1vmin, radial-gradient(closest-side, white 70%, #0000 0) 92% 35% / 1vmin 1vmin, radial-gradient(closest-side, white 40%, #0000 0) 5% 70% / 1vmin 1vmin, radial-gradient(closest-side, white 50%, #0000 0) 15% 60% / 1vmin 1vmin, radial-gradient(closest-side, white 60%, #0000 0) 25% 30% / 1vmin 1vmin, radial-gradient(closest-side, white 70%, #0000 0) 35% 60% / 1vmin 1vmin, radial-gradient(closest-side, white 40%, #0000 0) 45% 10% / 1vmin 1vmin, radial-gradient(closest-side, white 50%, #0000 0) 17% 25% / 1vmin 1vmin, radial-gradient(closest-side, white 60%, #0000 0) 37% 15% / 1vmin 1vmin, radial-gradient(closest-side, white 70%, #0000 0) 27% 34% / 1vmin 1vmin, radial-gradient(closest-side, white 40%, #0000 0) 46% 70% / 1vmin 1vmin, radial-gradient(closest-side, white 50%, #0000 0) 22% 77% / 1vmin 1vmin, radial-gradient(closest-side, white 60%, #0000 0) 28% 50% / 1vmin 1vmin, radial-gradient(closest-side, white 70%, #0000 0) 10% 10% / 1vmin 1vmin, /* background */ radial-gradient(175vmin 50% at 35vmin 95%, var(--ground) 30%, #0000 30.25%), radial-gradient(farthest-side at 50% 70%, #bb6, #aa5 99%, #0000) 6.5vmin 84% / 11vmin 7vmin, radial-gradient(farthest-side at 50% 70%, #fff 99%, #0000 0) 7vmin 84% / 10vmin 8vmin, radial-gradient(farthest-side at 50% 110%, #def 99%, #0000 0) 38vmin 87% / 100vmin 10vmin, linear-gradient(var(--sky2), var(--sky)) ; background-repeat: no-repeat; background-color: #f002; overflow: hidden; border: 5vmin ridge #963; box-shadow: -21vmin 38vmin 0 -29.25vmin #fff, -26.75vmin 38vmin 0 -29.5vmin #222, -27vmin 40vmin 0 -29.75vmin #888, -26vmin 40vmin 0 -29.75vmin #fff, -22vmin 40vmin 0 -29.75vmin #888, -21.5vmin 41.5vmin 0 -29.75vmin #888, -22.5vmin 41.5vmin 0 -29.75vmin #fff, -27vmin 41.5vmin 0 -29.75vmin #888, -21vmin 43vmin 0 -29.75vmin #fff, -27vmin 43vmin 0 -29.75vmin #888, -25vmin 40vmin 0 -25vmin white, -24.75vmin 40.25vmin 0 -25vmin #0002, 0 0 0 100vmax #def; } input::before { --trunk: brown; --ground: green; --sky2: #aef; --sky: #8ce; content: ""; display: block; position: absolute; top: 0; left: 0; width: calc(var(--size) * 1%); height: 100%; background: /* leaves */ radial-gradient(closest-side, #00c300 90%, #0000 0) 23vmin 27% / 9vmin 9vmin, radial-gradient(closest-side, #0b0 99%, #0000 0) 35vmin 30% / 10vmin 9vmin, radial-gradient(closest-side, #0b0 99%, #0000 0) 31vmin 42% / 10vmin 9vmin, radial-gradient(closest-side, #0b0 99%, #0000 0) 35vmin 49% / 7vmin 6vmin, radial-gradient(closest-side, #0b0 90%, #0000 0) 27vmin 23% / 12vmin 9vmin, radial-gradient(closest-side, #0b0 99%, #0000 0) 26vmin 47% / 9vmin 6vmin, radial-gradient(closest-side, #0b0 80%, #0000 0) 39vmin 50% / 9vmin 9vmin, radial-gradient(closest-side, #0b0 70%, #0000 0) 28vmin 57% / 9vmin 9vmin, radial-gradient(closest-side, #0b0 84%, #0000 0) 30.5vmin 10% / 9vmin 9vmin, /* tree */ conic-gradient(at 50% -20%, #0000 177deg, var(--trunk) 177.25deg 182.75deg, #0000 183deg) 30vmin 50% / 10vmin 30vmin, conic-gradient(at 110% 30%, #0000 237deg, var(--trunk) 237.25deg 245.75deg, #0000 247deg) 35vmin 60% / 10vmin 20vmin, conic-gradient(at 110% 40%, #0000 217deg, var(--trunk) 217.25deg 225.75deg, #0000 227deg) 37.75vmin 48% / 4vmin 10vmin, conic-gradient(at 110% 30%, #0000 287deg, var(--trunk) 287.25deg 295.75deg, #0000 297deg) 42.75vmin 60% / 3vmin 10vmin, conic-gradient(at 120% 30%, #0000 217deg, var(--trunk) 217.25deg 222.75deg, #0000 223deg) 35vmin 24% / 6vmin 14vmin, conic-gradient(at 110% 30%, #0000 277deg, var(--trunk) 277.25deg 282.75deg, #0000 283deg) 40vmin 34% / 4vmin 10vmin, conic-gradient(at 110% 40%, #0000 237deg, var(--trunk) 227.25deg 235.75deg, #0000 247deg) 42vmin 28% / 2vmin 8vmin, conic-gradient(at 120% 30%, #0000 207deg, var(--trunk) 207.25deg 212.75deg, #0000 213deg) 35vmin 10% / 3vmin 9vmin, conic-gradient(at 120% 30%, #0000 217deg, var(--trunk) 217.25deg 223.75deg, #0000 224deg) 35vmin 21% / 3vmin 9vmin, conic-gradient(at -40% 30%, #0000 95deg, var(--trunk) 0 100deg, #0000 0) 26vmin 50% / 9vmin 10vmin, conic-gradient(at -40% 10%, #0000 115deg, var(--trunk) 0 120deg, #0000 0) 28vmin 47% / 4vmin 6vmin, conic-gradient(at -40% 80%, #0000 36deg, var(--trunk) 0 40deg, #0000 0) 31vmin 60% / 9vmin 10vmin, conic-gradient(at -40% -20%, #0000 110deg, var(--trunk) 0 115deg, #0000 0) 27.5vmin 38% / 7.5vmin 6vmin, conic-gradient(at 0% -20%, #0000 160deg, var(--trunk) 0 165deg, #0000 0) 29vmin 30% / 7.5vmin 4vmin, conic-gradient(at 0% -20%, #0000 150deg, var(--trunk) 0 158deg, #0000 0) 31.5vmin 25% / 4vmin 6vmin, /* leaves */ radial-gradient(closest-side, #090 90%, #0000 0) 25vmin 22% / 12vmin 12vmin, radial-gradient(closest-side, #080 99%, #0000 0) 35vmin 25% / 9vmin 9vmin, radial-gradient(closest-side, #070 80%, #0000 0) 39vmin 50% / 9vmin 9vmin, radial-gradient(closest-side, #090 80%, #0000 0) 23vmin 47% / 10vmin 10vmin, radial-gradient(closest-side, #080 84%, #0000 0) 27.5vmin 57% / 9vmin 9vmin, radial-gradient(closest-side, #080 84%, #0000 0) 30.5vmin 60% / 9vmin 9vmin, radial-gradient(closest-side, #080 84%, #0000 0) 25.5vmin 35% / 9vmin 9vmin, radial-gradient(closest-side, #070 90%, #0000 0) 30vmin 42% / 16vmin 16vmin, /* sun */ radial-gradient(circle at 14vmin 20%, #ff8e 4vmin, #fff0 12vmin), /* background */ radial-gradient(175vmin 50% at 35vmin 95%, var(--ground) 30%, #0000 0), radial-gradient(farthest-side at 50% 70%, #0b0 99%, #0000) 6.5vmin 84% / 11vmin 7vmin, radial-gradient(farthest-side at 50% 110%, #0a0 99%, #0000 0) 38vmin 87% / 100vmin 10vmin, linear-gradient(var(--sky2), var(--sky)) ; box-shadow: inset -2px 0, 0 0 0 2px; background-repeat: no-repeat; background-color: #f002; } input::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: inset 0 0 0 2vmin #ffd, inset 0 0 1vmin 1.5vmin; } /* hide the range handler */ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: transparent; border: 0 solid transparent; width: 10%; height: 10%; display: block; } input[type=range]::-moz-range-thumb { -webkit-appearance: none; background: transparent; border: 0 solid transparent; width: 10%; height: 10%; display: block; } input[type=range]::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; }
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号