react实现翻页折叠倒计时效果代码
代码语言:html
所属分类:布局界面
代码描述:react实现翻页折叠倒计时效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body, html { height: 100%; } body { background-image: url("//repo.bfw.wiki/bfwrepo/image/61a603120d1c0.png"); background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; } .counter { text-align: center; display: inline-flex; justify-content: center; width: 100%; background-color: rgba(0, 0, 0, 0.6); } .entry { text-align: center; padding: 5px; } .entry .entry-value { position: relative; height: 95px; perspective: 200px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transform: translate3d(0, 0, 0); margin: 0 auto; } .entry .entry-title { min-width: 80px; color: #fff; margin-top: 10px; font-weight: bold; } .count { background-color: #202020; color: #fff; display: block; font-size: 2em; line-height: 2.4em; overflow: hidden; position: absolute; text-align: center; top: 0; width: 100%; } .count.top { height: 50%; line-height: 95px; transform-origin: 50% 100%; } .count.bottom { line-height: 0; height: 50%; top: 50%; transform-origin: 50% 0; } .count.flipTop { -webkit-animation-name: flipTop; animation-name: flipTop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; z-index: 1; } .count.flipBottom { -webkit-animation-name: flipBottom; animation-name: flipBottom; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; z-index: 1; } .alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; text-align: center; } @-webkit-keyframes flipTop { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } } @keyframes flipTop { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } } @-webkit-keyframes flipBottom { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } } @keyframes flipBottom {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0