rx+hammer实现心跳监测app拖拉上下滑动效果代码
代码语言:html
所属分类:拖放
代码描述:rx+hammer实现心跳监测app拖拉上下滑动效果代码
下面为部分代码预览,完整代码请点击下载或在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> @import url("https://fonts.googleapis.com/css?family=Lato|Oswald:300"); :root { --stopped: calc(-1 * var(--pan-moving) + 1); --duration: calc(var(--stopped) * 0.6s); --drag: calc(var(--pan-y) * var(--pan-y) / 300000); font-size: 2.5vh; } #app { font-family: Lato, sans-serif; height: 90vh; width: 100%; max-width: 55vh; text-transform: uppercase; overflow: hidden; border-radius: 1rem; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2); -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); background: white; letter-spacing: 1px; } .ui-items { position: absolute; top: 0; left: 0; height: 100%; width: 100%; transform: translateY(calc( var(--pan-y) * 0.5px - var(--pan-item) * 50% )); transition: transform var(--duration) cubic-bezier(0.56, 0.01, 0.19, 1.4); } .ui-item { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 50%; width: 100%; } .ui-item:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateY(calc(var(--pan-y) * 0.5px)) scaleY(calc(1 + var(--drag))) skewY(calc(var(--pan-y) * 0.02deg)); transform-origin: bottom center; transition: transform var(--duration) cubic-bezier(0.56, 0.01, 0.19, 1.4), background-color 0.3s ease-in-out; } .ui-item.-yesterday { color: white; } .ui-item.-yesterday:before { background-color: var(--color-primary, #F82462); } .ui-item.-yesterday .fa-heart { -webkit-text-stroke-color: white; } .ui-item.-today { color: var(--color-primary, #F82462); } .ui-item.-today:before { background-color: white; } .ui-item.-today .fa-heart { -webkit-text-stroke-color: var(--color-primary, #F82462); } .ui-item > .ui-footer { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; flex-direction: row; justify-content: space-between; padding: 1rem; } .ui-date { font-size: 0.8rem; } .ui-heart-rate { font-family: Oswald, sans-serif; margin: 0.5rem 0; font-size: 2.5rem; } .ui-date, .ui-heart-rate { transform: scale(calc(1 - var(--drag))); transition: transform var(--duration) cubic-bezier(0.56, 0.01, 0.19, 1.4); } .fa-heart { transform: scale(calc(1 - var(--drag))) translateY(calc(var(--pan-y) * 0.1px)); transition: transform var(--duration) cubic-bezier(0.56, 0.01, 0.19, 1.4); -webkit-text-stroke-width: 2px; margin-bottom: 1rem; font-size: 2rem; color: transparent; } .ui-footer { opacity: var(--stopped); transition: opacity 0.2s cubic-bezier(0.56, 0.01, 0.19, 1.4); } *, *:before, *:after { box-sizing: border-box; position: relative; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } body { display: flex; flex-direction: row; justify-content: center; align-items: center; } body:before { content: ""; position: absolute; top: -150%; left: calc(50% - 50vh); width: 200%; height: 200%; border: 25vh solid white; border-radius: 7rem; background: var(--color-secondary, #1D2063); box-shadow: -25vh 25vh 0 var(--color-primary, #F82462), -50vh 50vh 0 var(--color-secondary, #1D2063); transition: all 0.3s ease-in-out; } </style> </head> <body > <div id="app"> <main class="ui-items"> <div class="ui-item -yesterday"> <i class="fa fa-heart"></i> <div class="ui-date">Yesterday</div.........完整代码请登录后点击上方下载按钮下载查看
网友评论0