css+div实现手机导航app软件交互动画ui效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div实现手机导航app软件交互动画ui效果代码
代码标签: css div 手机 导航 app 软件 交互 动画 ui
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfBBc9.ttf) format('truetype'); } body { font-family: 'Roboto', sans-serif; font-size: 62.5%; } body { background: #321e43; } input { display: none; } ul { padding: 0; } li { list-style-type: none; } .c-mobile-view { position: relative; margin: 120px auto 0; width: 320px; height: 568px; background: url("//repo.bfw.wiki/bfwrepo/image/65763c2626807.png"); background-position: bottom; background-size: cover; opacity: 0; animation-name: animation-fadein; animation-duration: 0.5s; animation-delay: 0.1s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-animation-name: animation-fadein; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0.1s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .c-mobile-view:before { position: absolute; content: ''; display: block; top: 0; width: 100%; height: 100%; -webkit-box-shadow: inset 0 -1px 3px rgba(255, 255, 255, 0.2); -moz-box-shadow: inset 0 -1px 3px rgba(255, 255, 255, 0.2); box-shadow: inset 0 -1px 3px rgba(255, 255, 255, 0.2); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .c-mobile-view__inner { overflow: hidden; width: 100%; height: 100%; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .c-pin { position: absolute; width: 36px; height: 36px; top: 120px; left: 160px; z-index: -1; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; border: solid 4px #5873fe; -moz-border: solid 4px #5873fe; -webkit-border: solid 4px #5873fe; opacity: 0; animation-name: animation-fadein-infinite; animation-duration: 1.5s; animation-timing-function: easy-in-out; animation-iteration-count: infinite; -webkit-animation-name: animation-fadein-infinite; -webkit-animation-duration: 1.5s; -webkit-animation-timing-function: easy-in-out; -webkit-animation-iteration-count: infinite; } .c-button { cursor: pointer; font-size: 1.2em; } .c-mobile__button { position: absolute; width: 68px; height: 68px; bottom: -26px; line-height: 60px; text-align: center; z-index: 2; color: #FFF; border: solid 6px rgba(255, 255, 255, 0.2); opacity: 0; animation-name: animation-fadein; animation-duration: 0.5s; animation-delay: 0.4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-animation-name: animation-fadein; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0.4s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); background-color: #5873fe; background: -webkit-gradient(linear, left top, right bottom, from(#5873fe), to(#871cde)); background: -moz-linear-gradient(top, #5873fe, #871cde); -webkit-box-shadow: 0 0 10px #404040; -moz-box-shadow: 0 0 10px #404040; box-shadow: 0 0 10px #404040; left: 50%; margin-left: -34px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition-property: all; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } .c-mobile__button:hover { width: 80px; height: 80px; line-height: 77px; bottom: -26px; border: solid 4px rgba(255, 255, 255, 0.2); left: 50%; margin-left: -40px; } .c-mobile__button .c-mobile__button__plus { transition-property: all; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } input[name=u-mobile__button]:checked ~ .c-mobile__button .c-mobile__button__plus { transform: rotate(45deg); -webkit-transform: rotate(45deg); transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } .c-mobile__topbar { position: relative; overflow: hidden; width: 100%; height: 10%; transition-property: all; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; -webkit-border-radius: 30px 30px 0 100%; -moz-border-radius: 30px 30px 0 100%; border-radius: 30px 30px 0 100%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background-color: #5873fe; background: -webkit-gradient(linear, left top, right bottom, from(#5873fe), to(#871cde)); background: -moz-linear-gradient(top, #5873fe, #871cde); } .c-mobile__topbar a { text-decoration: none; color: #FFF; letter-spacing: 3px; font-size: 1.4em; z-index: 1; transition-property: all; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } .c-mobile__topbar a:hover { transition-property: all; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; color: #ecc54d; } .c-mobile__topbar ul { text-align: right; padding-top: 40px; } .c-mobile__topbar li { margin: 30px 30px 40px 0; } input[name=u-topbar__button]:checked ~ .c-mobile-view__inner .c-mobile__topbar { height: 50%; transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } .u-link__effect { position: relative; } .u-link__effect:after { position: absolute; content: ''; display: block; right: 0; width: 0; bottom: -4px; height: 2px; background: #ecc54d; transition-property: all; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } .u-link__effect:hover:after { width: 100%; transition-property: all; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } .c-topbar__button--menu { position: absolute; right: 32px; top: 32px; z-index: 1; color: #FFF; transform: scale(1); -webkit-transform: scale(1); transition-property: all; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } .c-topbar__button--close { position: absolute; right: 32px; top: 32px; z-index: 1; cursor: pointer; color: #FFF; transform: scale(0); -webkit-transform: scale(0); transition-property: all; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } input[name=u-topbar__button]:checked ~ .c-mobile-view__inner .c-topbar__button--menu { transform: scale(0); -webkit-transform: scale(0); transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } input[name=u-topbar__button]:checked ~ .c-mobile-view__inner .c-topbar__button--close { transform: scale(1); -webkit-transform: scale(1); transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } .c-switcher__button { position: absolute; left: 20px; bottom: 20px; color: #FFF; } .c-switcher__button--cards { transform: rotate(0); -webkit-transform: rotate(0); transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } input[name=u-cards-switcher__button]:checked ~ .c-switcher__button .c-switcher__button--cards { transform: rotate(180deg); -webkit-transform: rotate(180deg); transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } input[name=u-cards-switcher__button]:checked ~ .c-mobile-view__inner .c-card--back { z-index: 1; opacity: 1; bottom: 60px; transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; transform: scale(1); -webkit-transform: scale(1); } input[name=u-cards-switcher__button]:checked ~ .c-mobile-view__inner .c-card--front { z-index: 0; opacity: 0.7; bottom: 30px; transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; transform: scale(0.9); -webkit-transform: scale(0.9); } .c-hide__button, .c-show__button { position: absolute; right: 20px; bottom: 20px; color: #FFF; } .c-show__button--cards { transform: scale(1); -webkit-transform: scale(1); transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } .c-hide__button--cards { transform: scale(0); -webkit-transform: scale(0); transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } input[name=u-cards-hide__button]:checked ~ .c-show__button .c-show__button--cards { transform: scale(0); -webkit-transform: scale(0); transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } input[name=u-cards-hide__button]:checked ~ .c-hide__button .c-hide__button--cards { transform: scale(1); -webkit-transform: scale(1); transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } input[name=u-cards-hide__button]:checked ~ .c-mobile-view__inner .c-card { opacity: 0; transition-property: all; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; } .cards__inner { position: relative; } .c-card { position: absolute; bottom: 60px; width: calc(100% - 40px); margin: 0 20px; overflow: hidden; opacity: 1; transition-property: all; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: 0; -webkit-transition-property: all; -webkit-transition-duration: 0.8s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 0; -webkit-box-shadow: 0 0 10px 0 rgba(22, 1, 40, 0.9); -moz-box-shadow: 0 0 10px 0 rgba(22, 1, 40, 0.9); box-shadow: 0 0 10px 0 rgba(22, 1, 40, 0.9); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .c-card--back { bottom: 30px; opacity: 0.7; transform: scale(0.9); -webkit-transform: scale(0.9); } .c-card--back .c-card__details__bottom { background: #871cde; } .c-card--back .c-card__details__top h1 { color: #871cde; } .c-card__details .........完整代码请登录后点击上方下载按钮下载查看
网友评论0