原生js实现卡片名片点击三维翻开动画效果代码
代码语言:html
所属分类:三维
代码描述:原生js实现卡片名片点击三维翻开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500" rel="stylesheet"> <style> /*------------------* * Global variables * *------------------*/ /*------------* * CSS Styles * *------------*/ *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } body { -webkit-box-align: center; align-items: center; background: linear-gradient(135deg, #404040, #333); background-color: #333; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; min-height: 100vh; padding: 24px; } body::-webkit-scrollbar { display: none; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } .card { color: #d4cd96; font-family: 'Fira Sans', sans-serif; height: 100%; left: 0; position: absolute; top: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49); transition: -webkit-transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49); transition: transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49); transition: transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49), -webkit-transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49); } .card.flipped { -webkit-transform: translateX(-100%) rotateY(-180deg); transform: translateX(-100%) rotateY(-180deg); } .card-front, .card-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3), transparent 1px, rgba(0, 0, 0, 0.3) 2px); background-size: 3px 3px; background-color: #302f34; border-radius: 1px; box-shadow: 0px -6px 8px 0px rgba(0, 0, 0, 0.1), 0px 6px 8px 0px rgba(0, 0, 0, 0.1), 6px 0px 8px 0px rgba(0, 0, 0, 0.1), -6px 0px 8px 0px rgba(0, 0, 0, 0.1); cursor: pointer; height: 100%; left: 0; padding: 5%; position: absolute; top: 0; width: 100%; } .card-back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .card-back .layer { background: repeating-linear-gradient(135deg, rgba(76, 71, 31, 0.3), transparent 1px, rgba(76, 71, 31, 0.3) 2px); background-size: 3px 3px; background-color: #d4cd96; color: #302f34; height: 100%; position: relative; width: 100%; } .card-back .layer:after { background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), transparent); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .card-back .layer .top, .card-back .layer .bottom { left: 8%; position: absolute; z-index: 1; } .card-back .layer .top { top: 12%; } .card-back .layer .bottom { bottom: 12%; } .card-back .layer h2, .card-back .layer h3, .card-back .layer h4 { font-weight: 400; margin: 2px 0; } .card-back .layer h2 { font-size: 18px; font-weight: 500; text-transform: uppercase; } .card-back .layer h3 { font-size: 16px; } .card-back .layer h4 { font-size: 16px; font-style: italic; } .card-front .layer { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; height: 100%; -webkit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0