css实现一个咖啡机效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现一个咖啡机效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ padding: 0; margin: 0; background-color: white; } .container{ height: 350px; width: 350px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } .upper{ height: 0; width: 180px; border-top: 70px solid #735123; border-left: 10px solid transparent; border-right: 10px solid transparent; position: relative; margin: 55px auto; box-sizing: border-box; } .upper::after{ content: ""; position: absolute; background-color: #3b240e; height: 5px; width: 185px; left: -12.5px; top: -70px; } .timer{ content: ""; position: absolute; height: 65px; width: 60px; background-color: #e06526; margin: auto; left: 0; right: 0; top: -65px; display: grid; place-items: center; } .timer::before{ content: ""; position: absolute; height: 32px; width: 32px; background-color: white; border-radius: 50%; } .timer::after{ content: ""; position: absolute; background-color: #e06526; height: 12px; width: 4px; border-radius: 4px; top: 20px; } .upper-btn{ background-color: white; height: 8px; width: 8px; position: absolute; border-radius: 50%; left: 18px; bottom: 40px; } .upper-btn:before{ content: ""; position: absolute; background-color: #e06526; height: 12px; width: 12px; border-radius: 50%; top: 20px; left: -2px; } .upper-btn:after{ content: ""; position: absolute; background-color: white; height: 6px; width: 6px; border-radius: 50%; top: 23px; left: 1px; } .filter{ width: 45px; height: 16px; background: linear-gradient( to right, #ede9d7 70%, #dad1b7 70% ); position: relative; margin: auto; bottom: 57px; z-index: 5; cursor: pointer; } .filter-base{ background-color: white; height: 13px; border-radius: 0 0 5px 5px; position: relative; top: 15px; width: 45px; } .filter-base:before{ content: ""; position: absolute; background-color: white; height: 6px; width: 12px; top: 12px; left: 16px; } .handle{ height: 7px; border-right: 70px solid #e06526; border-top: 8px solid transparent; border-bottom: 8px solid transparent; position: relative; left: 39px; bottom: 16px; } .filter:hover .handle{ animation: spin 6s; } @keyframes spin{ 50%{ transform: translateX(-102px) rotateY(-180deg); } } .handle:after{ content: ""; position: absolute; height: 22.5px; width: 22.5px; border-radius: 50%; background-color: #c9561d; left: 58px; top: -7.5px; transform: rotateY(70deg); } .coffee{ height: 30px; width: 8px; background-color: #e06526; border-radius: 0 0 15px 15px; position: relative; margin: auto; bottom: 3px; visibility: hidden; } .filter:hover .coffee{ animation: pour 6s 4s; } @keyframes pour{ 0%{ visibility: visible; } 100%{ transform: translateY(30px); } } .steam{ background-color: rgba(204, 204, 204, 0.2); h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0