纯css布局实现一个闹钟app的交互效果
代码语言:html
所属分类:其他
代码描述:纯css布局实现一个闹钟app的交互效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'> <style> html, body { width: 100%; height: 100%; } body { background: -webkit-gradient(linear, left top, left bottom, from(#F6C96F), to(#E68D52)) fixed; background: linear-gradient(#F6C96F, #E68D52) fixed; color: #444; font-family: 'Roboto'; font-weight: 300; padding: 80px 0; box-sizing: border-box; } .body { z-index: 1; position: relative; background: #FFF; width: 300px; height: 500px; border-radius: 6px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); margin: 0 auto; overflow: hidden; } .app { z-index: 1; position: relative; display: -webkit-box; display: flex; -webkit-box-pack: stretch; justify-content: stretch; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; height: 100%; overflow: hidden; } .app #app-menu { display: none; } .app #app-menu:checked ~ .app-overlay { visibility: visible; opacity: 1; } .app #app-menu:checked ~ .app-menu { left: 0; visibility: visible; opacity: 1; } .app #app-add-alarm { display: none; } .app #app-add-alarm:checked ~ .app-footer { position: initial; } .app #app-add-alarm:checked ~ .app-footer label { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .app #app-add-alarm:checked ~ .app-footer label:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .app #app-add-alarm:checked ~ .app-footer label:after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .app #app-add-alarm:checked ~ .app-footer label div { top: -100%; opacity: 1; visibility: visible; } .app #app-add-alarm:checked ~ .app-footer label div:nth-child(1) { top: 0%; left: -100%; } .app #app-add-alarm:checked ~ .app-footer label div:nth-child(2) { top: -100%; left: -45%; } .app #app-add-alarm:checked ~ .app-footer label div:nth-child(3) { top: -100%; right: -45%; } .app #app-add-alarm:checked ~ .app-footer label div:nth-child(4) { top: 0; right: -100%; } .app-overlay { z-index: 50; position: absolute; background: rgba(0, 0, 0, 0.2); display: block; width: 200%; height: 200%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); visibility: hidden; opacity: 0; -webkit-transition: 0.3s ease; transition: 0.3s ease; cursor: pointer; } .app-menu { z-index: 100; position: absolute; top: 0; left: -40%; height: 100%; width: 80%; background: #FFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; -webkit-transition: 0.3s ease; transition: 0.3s ease; } .app-menu__header { padding: 40px 0; } .app-menu__brand { display: block; background: rgba(0, 0, 0, 0.1); width: 60px; height: 60px; border-radius: 100%; margin: 0 auto; } .app-menu__nav-item { color: #999; font-size: 12px; -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); } .app-menu__nav-item:hover { background: rgba(0, 0, 0, 0.05); } .app-menu__nav-item:hover a { padding-left: 26px; } .app-menu__nav-item a { display: block; width: 100%; padding: 15px 20px; box-sizing: border-box; color: inherit; text-decoration: none; -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); } .app-menu__nav-item--active { background: rgba(0, 0, 0, 0.05); border-left: 2px solid rgba(0, 0, 0, 0.1); color: #444; } .app-header { position: relative; background: #FFF; color: #222; padding: 20px 10px 10px; text-align: center; } .app-header__menu { position: absolute; top: 16px; display: block; width: 20px; height: 20px; padding: 2px 0; box-sizing: border-box; cursor: pointer; } .app-header__menu:hover span { width: 120%; } .app-header__menu:hover span:nth-child(2) { width: 40%; } .app-header__menu:hover span:nth-child(3) { width: 60%; } .app-header__menu span { display: block; background: #222; width: 100%; height: 1px; margin: 4px 0; -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); } .app-header__menu span:nth-child(2) { width: 80%; } .app-header__menu span:nth-child(3) { width: 40%; } .app-header__title { font-size: 18px; } .app-body { height: 100%; overflow: auto; } .app-footer { z-index: 1; position: relative; background: #FFF; width: 120%; height: 60px; min-height: 60px; box-shadow: 0 -10px 30px #FFF; -webkit-transform: translateX(-10%); transform: translateX(-10%); } .app-footer__button { outline: none; position: relative; display: block; background: #F86C5F; top: -50%; width: 56px; height: 56px; border: 0; border-radius: 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); margin: 0 auto; -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); cursor: pointer; } .app-footer__button:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .app-footer__button:before, .app-footer__button:after { content: ''; position: absolute; top: 50%; left: 50%; background: #FFF; width: 24px; height: 1px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); } .app-footer__button:after { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .app-footer__button div { outline: none; position: absolute; background: #B0BFCC; top: 0; width: 40px; height: 40px; border-radius: 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65); cursor: pointer; opacity: 0; visibility: hidden; } .app-footer__button div:nth-child(1), .app-footer__button div:nth-child(2) { left: 0%; } .app-footer__button div:nth-child(3), .app-footer__button div:nth-child(4) { right: 0%; } .app-footer__button div:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .app-footer__button div:nth-child(3) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .app-footer__button div:nth-child(4) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .app__row { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; flex-wrap: nowrap; margin: 0 0 20px; } .alarm { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; flex-wrap: nowrap; width: 100%; } .alarm__column { z-index: 1; position: relative; background: #FFF; width: 50px; min-width: 50px; } .alarm__column:nth-child(2) { width: 100%; } .alarm__column:nth-child(3) { width: 60px; min-width: 60px; } .alarm__icon { display: block; background: #F2CF68; width: 10px; height: 10px; border-radius: 100%; margin: 20px auto; box-shadow: 0 0 0 2px rgba(242, 207, 104, 0.4), 0 0 0 4px rgba(242, 207, 104, 0.2); } .alarm__icon--afternoon { background: #B0BFCC; box-shadow: 0 0 0 2px rgba(176, 191, 204, 0.4), 0 0 0 4px rgba(176, 191, 204, 0.2); } .alarm__icon--night { position: relative; background: #AFB5BD; box-shadow: 0 0 0 2px rgba(175, 181, 189, 0.4), 0 0 0 4px rgba(175, 181, 189, 0.2); -webkit-transform: translateX(5px); transform: translateX(5px); } .alarm__icon--night:after { content: ''; position: absolute; top: -5px; right: -18px; display: block; background: #FFF; width: 25px; height: 20px; border-radius: 100%;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0