Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
READY
EMPTY
CLOSE
START
css
@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Nova+Mono&display=swap"); * { box-sizing: border-box; padding: 0; margin: 0; } body { display: flex; height: 100vh; background: #92bfd1; font-size: 14px; font-family: 'Nova Mono', monospace; } #wrapper { margin: auto; display: flex; flex-direction: column; align-items: center; } #washingMachine { background: #ececf4; width: 300px; height: 388.2352941176px; border-radius: 15px; border-top: 15px solid #80819c; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: inset -15px -15px 0 0 rgba(196, 196, 210, 0.3); padding: 85px 0 45px; } #washingMachine:before, #washingMachine:after { content: ""; position: absolute; border: 4px solid transparent; width: 150%; } #washingMachine:before { border-bottom-color: #c4c4d2; height: 70px; top: 0; border-radius: 50%; box-shadow: inset 0 -15px 0 0 rgba(196, 196, 210, 0.3); } #washingMachine:after { border-top-color: #c4c4d2; height: 30px; bottom: 0; } #washingMachine #controls { top: 19.0909090909px; text-align: center; right: 30px; background: #242527; color: lightgreen; border-radius: 5px; padding: 3px 10px; font-weight: 500; font-size: 1em; justify-content: center; } #washingMachine #controls, #washingMachine #controls:before, #washingMachine #controls:after { position: absolute; } #washingMachine #controls, #washingMachine #controls:after { height: 23.8636363636px; min-width: 60px; } #washingMachine #controls, #washingMachine #controls:before { display: flex; align-items: center; transition: all 0.2s cubic-bezier(0.56, 0.35, 0, 1.35); } #washingMachine #controls:before { content: "━━"; font-size: 14px; color: #80819c; box-shadow: inset 0px -15px 0px 0px rgba(196, 196, 210, 0.3); height: 31.8181818182px; width: 31.8181818182px; border: 3px solid #c4c4d2; border-radius: 100%; transform: rotate(0deg); left: calc(100% + -135.9090909091px); } #washingMachine #controls:after { content: ""; left: calc(100% + -240px); background: rgba(196, 196, 210, 0.3); border-radius: 3px 3px 10px 10px; border: 3px solid #c4c4d2; box-shadow: inset 0 10px 0 0 #c4c4d2; } #washingMachine #door, #washingMachine #tub { transition: all 0.2s ease-in-out; } #washingMachine #door { width: 200px; height: 200px; border: 25px solid #80819c; border-radius: 50%; position: absolute; z-index: 1; box-shadow: inset 5px 10px 0 0 rgba(0, 0, 0, 0.1), 5px -1px 0 0 transparent; transform-origin: 0% 0%; transform: rotateY(0deg); } #washingMachine #door:before, #washingMachine #door:after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); } #washingMachine #door:after { background: #666783; height: 50%; width: 17%; right: 0; border-radius: 40% 30% 30% 40% / 50% 45% 45% 50%; transition: all 0.2s ease-in-out; z-index: 3; } #washingMachine #door:before { width: 60%; height: 60%; left: 0; right: 0; margin: auto; border-radius: 50%; border: 5px solid transparent; border-left: 15px solid white; transform: translateY(-50%) rotate(45deg); opacity: 0.2; box-shadow: inset -10px 10px 0 0 rgba(255, 255, 255, 0.2); border-radius: 40% 30% 30% 40% / 50%; z-index: 2; } #washingMachine #tub { width: 175px; height: 175px; background: #453e57; position: relative; border-radius: 50%; overflow: hidden; z-index: 0; box-shadow: 0 0 0 7px rgba(196, 196, 210, 0.3); } #washingMachine #tub .clothes { position: absolute; opacity: 0; transition: all 0.1s ease-in-out; } #washingMachine #tub .clothes:nth-child(1) { background: linear-gradient(#48873e, #7b9f17); width: 70%; height: 25%; bottom: 10%; right: -20%; transform: rotate(-20deg); border-radius: 49% 38% 65% 8% / 30% 12% 51% 36%; } #washingMachine #tub .clothes:nth-child(2) { background: linear-gradient(#c22323, #e15050); width: 100%; height: 20%; border-radius: 64% 40% 27% 47% / 63% 63% 32% 36%; bottom: 0; } #washingMachine #tub .clothes:nth-child(3) { background: linear-gradient(#5a5589, #4f46b4); width: 70%; height: 25%; transform: rotate(40deg); border-radius: 41% 38% 71% 8% / 51% 36% 51% 24%; bottom: 0; left: -10%; } #washingMachine.isOpen #door { transform: rotateY(45deg); box-shadow: inset 5px 10px 0 0 transparent, 5px -1px 0 0 #b9bac9; } #washingMachine.isOpen #door:after { box-shadow: 5px -1px 0 0 #505166; } #washingMachine.isOpen #tub { box-shadow: inset 5px 10px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 7px rgba(196, 196, 210, 0.3); } #washingMachine.isWashing { animation-name: shake; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } #washingMachine.isWashing #controls:before { transform: rotate(45deg); } #washingMachine.isWashing #tub { animation-name: rotate; animation-duration: 0.6s; animation-timing-function: linear; animation-iteration-count: infinite; } #washingMachine.isFilled #tub .clothes { opacity: 1; } #washingMachine.isStarting { animation-duration: 200ms; animation-timing-function: cubic-bezier(0, -0.01, 0.61, 0.01); } #washingMachine.isStarting #tub { animation-duration: 1.2s; animation-timing-function: cubic-bezier(0, -0.01, 0.61, 0.01); } @keyframes shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); } 50% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #playground { margin-top: 25px; width: 300px; display: flex; } #playground button { flex: 1; background: #ececf4; border: none; outline: none; border-radius: 6px; padding: 7px 10px; box-shadow: -1px 2px 0 0 rgba(0, 0, 0, 0.2); transition: background 0.2s ease-in-out; font: inherit; font-size: 0.8em; } #playground button#opening { margin: 0 15px; } #playground button:hover:not(:disabled) { background: white; cursor: pointer; } #playground button::-moz-focus-inner { border: 0; } #playground button:active:not(:disabled) { box-shadow: 0px 1px 0 0 rgba(0, 0, 0, 0.2); }
JavaScript
// VARIABLES const washSpeed = 600; // If changed, need to be updated in the CSS as well const washingMachine = document.getElementById('washingMachine'); const screen = document.getElementById('controls'); const status = { opening: { isActive: true, statusClass: 'isOpen', controller: document.getElementById('opening'), controllerLabel: ["CLOSE", "OPEN"] }, content: { isActive: true, statusClass:'isFilled', controller: document.getElementById('content'), controllerLabel: ["EMPTY", "FILL"] }, power: { isActive: false, statusClass: 'isWashing', controller: document.getElementById('power'), controllerLabel: ["STOP", "START"] } }; // PLAYGROUND for (let action in status) { const { statusClass, controller, controllerLabel } = status[action]; controller.addEventListener('click', function(event) { const { isActive } = status[action]; washingMachine.classList.toggle(statusClass); this.innerHTML = controllerLabel[isActive*1]; if(action === "power" && !isActive) { // Slow start washingMachine.classList.add(statusClass); washingMachine.classList.add("isStarting"); setTimeout(() => { washingMachine.classList.remove("isStarting"); }, washSpeed * 2); } status[action].isActive = !isActive; setTimeout(function() { updateMachine(); }, 100); // Timeout needed because of a bug on FF when updating innerHTML }); } function updateMachine() { const { opening, content, power } = status; // Update playground opening.controller.disabled = power.isActive; content.controller.disabled = !opening.isActive; power.controller.disabled = opening.isActive || !content.isActive; // Update screen text if(power.isActive) { screen.innerHTML = "清洗中" } else if(!content.isActive) { screen.innerHTML = "空"; } else if (opening.isActive) { screen.innerHTML = "完成"; } else { screen.innerHTML = "READY"; } }
粒子
时间
文字
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号