Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
:root { --size: 45vmin; --pull: 1vmin; --height-sill: calc(var(--size) / 4); --height-ac: calc(var(--size) / 2.75); --height-curtain-rod: calc(var(--size) / 40); --color-wall: hsl(8, 72%, 72%); --color-frame: hsl(0, 100%, 100%); --color-ac-unit: hsl(72, 2%, 97%); --color-ac-unit-inner: hsl(0, 0%, 70%); --color-outside: hsl(213, 74%, 40%); --color-curtain-rod: hsl(18, 80%, 10%); --color-book-1: hsl(55, 100%, 48%); --color-book-2: hsl(178, 93%, 21%); --color-book-3: hsl(194, 100%, 48%); --color-planter: hsl(0, 100%, 100%); --color-leaf: hsl(72, 40%, 43%); --border-frame: 2.5vmin; --border-radius: 0.25vmin; } * { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: center; background-color: var(--color-wall); } .frame { display: grid; position: relative; margin-top: calc(var(--height-sill) * -1); width: var(--size); height: calc(var(--size) * 1.5); border-radius: var(--border-radius) var(--border-radius) 0 0; background-color: var(--color-frame); } .outside { position: absolute; width: 100%; height: 100%; background-color: var(--color-outside); overflow: hidden; -webkit-animation: flash 10s linear infinite; animation: flash 10s linear infinite; } .rain { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: rotate(25deg); transform: rotate(25deg); } .drop { position: absolute; background-color: rgba(255, 255, 255, 0.3); width: 1px; height: 4vmin; -webkit-animation: fall 200ms linear infinite; animation: fall 200ms linear infinite; } .drop:nth-child(1) { top: 10%; left: 70%; -webkit-animation-delay: -0.03s; animation-delay: -0.03s; -webkit-animation-duration: 205ms; animation-duration: 205ms; } .drop:nth-child(2) { top: 68%; left: 80%; -webkit-animation-delay: -0.06s; animation-delay: -0.06s; -webkit-animation-duration: 208ms; animation-duration: 208ms; } .drop:nth-child(3) { top: 20%; left: 88%; -webkit-animation-delay: -0.09s; animation-delay: -0.09s; -webkit-animation-duration: 209ms; animation-duration: 209ms; } .drop:nth-child(4) { top: 76%; left: 60%; -webkit-animation-delay: -0.12s; animation-delay: -0.12s; -webkit-animation-duration: 205ms; animation-duration: 205ms; } .drop:nth-child(5) { top: 66%; left: 72%; -webkit-animation-delay: -0.15s; animation-delay: -0.15s; -webkit-animation-duration: 202ms; animation-duration: 202ms; } .drop:nth-child(6) { top: 40%; left: 86%; -webkit-animation-delay: -0.18s; animation-delay: -0.18s; -webkit-animation-duration: 209ms; animation-duration: 209ms; } .drop:nth-child(7) { top: 92%; left: 92%; -webkit-animation-delay: -0.21s; animation-delay: -0.21s; -webkit-animation-duration: 204ms; animation-duration: 204ms; } .drop:nth-child(8) { top: 64%; left: 86%; -webkit-animation-delay: -0.24s; animation-delay: -0.24s; -webkit-animation-duration: 202ms; animation-duration: 202ms; } .drop:nth-child(9) { top: 96%; left: 94%; -webkit-animation-delay: -0.27s; animation-delay: -0.27s; -webkit-animation-duration: 209ms; animation-duration: 209ms; } .drop:nth-child(10) { top: 64%; left: 6%; -webkit-animation-delay: -0.3s; animation-delay: -0.3s; -webkit-animation-duration: 203ms; animation-duration: 203ms; } .drop:nth-child(11) { top: 10%; left: 60%; -webkit-animation-delay: -0.33s; animation-delay: -0.33s; -webkit-animation-duration: 209ms; animation-duration: 209ms; } .drop:nth-child(12) { top: 42%; left: 60%; -webkit-animation-delay: -0.36s; animation-delay: -0.36s; -webkit-animation-duration: 202ms; animation-duration: 202ms; } .drop:nth-child(13) { top: 28%; left: 70%; -webkit-animation-delay: -0.39s; animation-delay: -0.39s; -webkit-animation-duration: 201ms; animation-duration: 201ms; } .drop:nth-child(14) { top: 10%; left: 54%; -webkit-animation-delay: -0.42s; animation-delay: -0.42s; -webkit-animation-duration: 208ms; animation-duration: 208ms; } .drop:nth-child(15) { top: 4%; left: 100%; -webkit-animation-delay: -0.45s; animation-delay: -0.45s; -webkit-animation-duration: 204ms; animation-duration: 204ms; } .drop:nth-child(16) { top: 80%; left: 76%; -webkit-animation-delay: -0.48s; animation-delay: -0.48s; -webkit-animation-duration: 207ms; animation-duration: 207ms; } .drop:nth-child(17) { top: 98%; left: 68%; -webkit-animation-delay: -0.51s; animation-delay: -0.51s; -webkit-animation-duration: 208ms; animation-duration: 208ms; } .drop:nth-child(18) { top: 36%; left: 90%; -webkit-animation-delay: -0.54s; animation-delay: -0.54s; -webkit-animation-duration: 205ms; animation-duration: 205ms; } .drop:nth-child(19) { top: 94%; left: 44%; -webkit-animation-delay: -0.57s; animation-delay: -0.57s; -webkit-animation-duration: 207ms; animation-duration: 207ms; } .drop:nth-child(20) { top: 32%; left: 72%; -webkit-animation-delay: -0.6s; animation-delay: -0.6s; -webkit-animation-duration: 209ms; animation-duration: 209ms; } .drop:nth-child(21) { top: 64%; left: 36%; -webkit-animation-delay: -0.63s; animation-delay: -0.63s; -webkit-animation-duration: 208ms; animation-duration: 208ms; } .drop:nth-child(22) { top: 12%; left: 20%; -webkit-animation-delay: -0.66s; animation-delay: -0.66s; -webkit-animation-duration: 209ms; animation-duration: 209ms; } .drop:nth-child(23) { top: 62%; left: 70%; -webkit-animation-delay: -0.69s; animation-delay: -0.69s; -webkit-animation-duration: 202ms; animation-duration: 202ms; } .drop:nth-child(24) { top: 62%; left: 58%; -webkit-animation-delay: -0.72s; animation-delay: -0.72s; -webkit-animation-duration: 204ms; animation-duration: 204ms; } .drop:nth-child(25) { top: 58%; left: 92%; -webkit-animation-delay: -0.75s; animation-delay: -0.75s; -webkit-animation-duration: 206ms; animation-duration: 206ms; } .drop:nth-child(26) { top: 42%; left: 12%; -webkit-animation-delay: -0.78s; animation-delay: -0.78s; -webkit-animation-duration: 206ms; animation-duration: 206ms; } .drop:nth-child(27) { top: 90%; left: 84%; -webkit-animation-delay: -0.81s; animation-delay: -0.81s; -webkit-animation-duration: 210ms; animation-duration: 210ms; } .drop:nth-child(28) { top: 84%; left: 76%; -webkit-animation-delay: -0.84s; animation-delay: -0.84s; -webkit-animation-duration: 209ms; animation-duration: 209ms; } .drop:nth-child(29) { top: 16%; left: 38%; -webkit-animation-delay: -0.87s; animation-delay: -0.87s; -webkit-animation-duration: 207ms; animation-duration: 207ms; } .drop:nth-child(30) { top: 36%; left: 66%; -webkit-animation-delay: -0.9s; animation-delay: -0.9s; -webkit-animation-duration: 205ms; animation-duration: 205ms; } .curtain-rod { position: absolute; top: calc(var(--border-frame) / 4); left: 50%; width: calc(100% + (var(--pull) * 4) - 0.5vmin); height: var(--height-curtain-rod); background-color: var(--color-curtain-rod); border-radius: var(--border-radius); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .curtain { position: absolute; top: calc((var(--border-frame) / 4) - 0.25vmin); height: calc(100% - var(--height-ac)); width: 40%; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 2px); border-radius: calc(var(--border-radius) * 2) 0 100% calc(var(--border-radius) * 2); box-shadow: rgba(0, 0, 0, 0.06) 1vmin 1vmin 2vmin; } .curtain::before, .curtain::after { content: ""; position: absolute; top: 0; height: 100%; border-radius: inherit; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 2px, transparent 2px, transparent 3px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 2px, transparent 2px, transparent 3px); } .curtain::before { left: 5%; width: 80%; } .curtain::after { left: 5%; width: 60%; } .curtain.left { left: -1vmin; } .curtain.right { right: -1vmin; -webkit-transform: scaleX(-1); transform: scaleX(-1); } .window { position: relative; background-color: transparent; border: var(--border-frame) solid var(--color-frame); border-radius: inherit; z-index: 0; } .window.top { box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 4vmin; } .window.bottom { top: calc(var(--height-ac) * -1); box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 4vmin, rgba(0, 0, 0, 0.1) 0 -2vmin 1.5vmin -1vmin; } .ac { display: -webkit-box; display: flex; position: absolute; bottom: 0; width: 100%; height: var(--height-ac); background-color: var(--color-frame); box-shadow: rgba(0, 0, 0, 0.05) 0 -2vmin 1vmin -2vmin; z-index: 0; } .ac .unit { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 3fr; grid-gap: 1vmin; padding: 1vmin; position: relative; margin: auto; width: 45%; height: 80%; top: 0.5vmin; background-color: var(--color-ac-unit); border-radius: var(--border-radius); box-shadow: rgba(0, 0, 0, 0.1) 0 0.5vmin 1.5vmin; } .ac .unit::before { position: absolute; bottom: 100%; display: block; content: ""; width: 100%; height: calc(var(--size) / 40); background-color: inherit; box-shadow: inset rgba(0, 0, 0, 0.075) 0 0.5vmin 1.5vmin; -webkit-clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%); } .vent.small { grid-column: span 2; display: grid; grid-gap: 1px; } .vent.large { grid-column: span 3; display: grid; grid-gap: 1px; } .vent .slot { background-color: var(--color-ac-unit-inner); background-image: repeating-linear-gradient(to right, transparent, transparent 32%, var(--color-ac-unit) 32%, var(--color-ac-unit) 34%); border-radius: 360px; } .controls { background-color: var(--color-ac-unit-inner); border-radius: 0.5vmin; } .sill { position: absolute; top: calc(100% + 2vmin - 1px); left: 50%; width: calc(var(--size) * 1.1); height: var(--height-sill); border-radius: 0 0 var(--border-radius) var(--border-radius); background-color: var(--color-frame); box-shadow: inset rgba(0, 0, 0, 0.05) 0 3vmin 2.5vmin, rgba(0, 0, 0, 0.1) 0 1vmin 1.5vmin -0.5vmin; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } .sill::before, .sill::after { position: relative; display: block; content: ""; width: 110%; top: -2vmin; left: -5%; height: calc(var(--size) / 20); background-color: inherit; } .sill::before { box-shadow: inset rgba(0, 0, 0, 0.075) 0 0.5vmin 1.5vmin; -webkit-clip-path: polygon(8.75% 0, 91.25% 0, 100% 100%, 0% 100%); clip-path: polygon(8.75% 0, 91.25% 0, 100% 100%, 0% 100%); } .sill::after { margin-top: -1px; border-radius: var(--border-radius); } .sill .items { position: absolute; right: var(--pull); bottom: calc(100% + 0.5vmin); width: 100%; height: 100%; display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; -webkit-box-pack: end; justify-content: flex-end; } .planter { position: relative; width: 15%; height: 65%; background-image: -webkit-gradient(linear, left top, right top, from(#f2f2f2), color-stop(20%, var(--color-planter)), color-stop(70%, var(--color-planter)), to(#cccccc)); background-image: linear-gradient(90deg, #f2f2f2 0%, var(--color-planter) 20%, var(--color-planter) 70%, #cccccc 100%); z-index: 0; } .planter::before, .planter::after { content: ""; position: absolute; width: 100%; height: 15%; } .planter::before { bottom: 95%; background-image: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#333333)); background-image: linear-gradient(to bottom, #cccccc, #333333); border-radius: 100%; } .planter::after { top: 90%; border-radius: 0 0 100% 100%; background-image: inherit; z-index: -1; box-shadow: rgba(0, 0, 0, 0.1) 0.25vmin 1vmin 2vmin; } .leaf { position: absolute; bottom: 100%; width: 50%; height: 50%; background-color: var(--color-leaf); border-radius: 360px 0 360px 0; z-index: 1; -webkit-transform-origin: 0 0; transform-origin: 0 0; box-shadow: inset rgba(0, 0, 0, 0.1) -0.5vmin -0.5vmin 0.5vmin; } .leaf:nth-child(1) { left: 16%; bottom: 90%; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } .leaf:nth-child(2) { left: 50%; -webkit-transform: scaleX(-1); transform: scaleX(-1); box-shadow: inset rgba(0, 0, 0, 0.2) 0.5vmin -0.5vmin 1vmin; } .leaf:nth-child(3) { left: 45%; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .books { display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; -webkit-box-pack: end; justify-content: flex-end; width: 11%; height: 110%; z-index: 1; } .book { border-radius: var(--border-radius); box-shadow: inset rgba(0, 0, 0, 0.1) -0.5vmin -0.5vmin 1vmin; } .book:nth-child(1) { background-color: var(--color-book-1); width: 30%; height: 98%; } .book:nth-child(2) { background-color: var(--color-book-2); width: 40%; height: 100%; } .book:nth-child(3) { background-color: var(--color-book-3); width: 30%; height: 92%; } @-webkit-keyframes fall { 0% { -webkit-transform: translateY(-300%); transform: translateY(-300%); } 90% { -webkit-transform: translateY(300%) scaleY(1); transform: translateY(300%) scaleY(1); } 100% { -webkit-transform: translateY(300%) scaleY(0); transform: translateY(300%) scaleY(0); } } @keyframes fall { 0% { -webkit-transform: translateY(-300%); transform: translateY(-300%); } 90% { -webkit-transform: translateY(300%) scaleY(1); transform: translateY(300%) scaleY(1); } 100% { -webkit-transform: translateY(300%) scaleY(0); transform: translateY(300%) scaleY(0); } } @-webkit-keyframes flash { 0%, 1% { opacity: 1; } 1.1%, 1.5% { opacity: 0.2; } 1.6%, 4% { opacity: 1; } 4.1%, 4.3% { opacity: 0.2; } 4.4%, 4.5% { opacity: 1; } 4.6%, 4.8% { opacity: 0.2; } 4.9%, 7.4% { opacity: 1; } 7.5%, 7.7% { opacity: 0.5; } 7.8%, 100% { opacity: 1; } } @keyframes flash { 0%, 1% { opacity: 1; } 1.1%, 1.5% { opacity: 0.2; } 1.6%, 4% { opacity: 1; } 4.1%, 4.3% { opacity: 0.2; } 4.4%, 4.5% { opacity: 1; } 4.6%, 4.8% { opacity: 0.2; } 4.9%, 7.4% { opacity: 1; } 7.5%, 7.7% { opacity: 0.5; } 7.8%, 100% { opacity: 1; } }
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号