vue3实现一个时间线效果代码
代码语言:html
所属分类:其他
代码描述:vue3实现一个时间线效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Play&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bkg: #242429; --card-bkg: #540880; --white: #dfdfdf; } body { min-height: 100vh; display: grid; justify-items: center; font-family: "Play", sans-serif; background-color: var(--bkg); } header { margin: 3em auto; padding: 1em; text-align: center; color: var(--white); } header p { margin: 1em 0; } .container { width: 100%; max-width: 700px; grid-auto-rows: min-content; } ul { list-style: none; margin: 5em 0; } .timeline { max-width: 960px; position: relative; } .timeline::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background-color: #208a00; } .card { color: var(--white); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; perspective: 1000px; } /* Left side cards */ .card:nth-child(odd) .card--title { grid-template-columns: 1fr 6ch; grid-column: 1/2; grid-row: 1/2; justify-self: end; transform-origin: 100% 0%; transition: 1s cubic-bezier(0.39, 0, 0.26, 1.37); } .card:nth-child(odd) .card--title::after { content: ""; position: absolute; display: block; width: 0; z-index: 1; border-style: solid; border-color: transparent var(--card-bkg); border-width: 15px 0 15px 15px; top: 50%; right: -15px; margin-top: -15px; } /* Right side cards */ .card:nth-child(even) .card--title { grid-template-columns: 6ch 1fr; grid-column: 2/3; grid-row: 1/2; padding: 0.5em 1em 0.5em 0.5em; transform-origin: 0% 0%; transition: 1s cubic-bezier(0.39, 0, 0.26, 1.37); } .card:nth-child(even) .card--title time { justify-self: start; } .card:nth-child(even) .card--title p { text-align: right; } .card:nth-child(even) .card--title::after { content: ""; position: absolute; display: block; width: 0; z-index: 1; border-style: solid; border-color: transparent var(--card-bkg); border-width: 15px 15px 15px 0; top: 50%; left: -15px; margin-top: -15px; } .card--title { width: 75%; background-color: var(--card-bkg); border-radius: 10px; display: grid; place-items: center; padding: 0.5em 0.5em 0.5em 1em; margin: 2em 20px 2em; box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px; position: relative; } .card--title time { display: block; text-align: center; padding: 0.5em; justify-self: end; font-weight: 600; } .card--title span { display: block; text-transform: uppercase; font-size: 1rem; } .card--title p { font-size: 1.1rem; width: 100%; } /* Intersection Observer classes */ .before-enter { opacity: 0.1; transform: translateY(-30px) rotateY(-40deg); } .enter { opacity: 1; transform: translateY(0px) rotateY(0deg); } @media screen and (max-width: 600px) { .card--title { width: 50%; } .card--title p { font-size: 0.8rem; } .card--title span { font-size: 0.9rem; } } </style> </head> <body > <div class="container" id="app"> <header> <h1>Super Mario Timeline</h1> <p>Initial launch dates of games in the Super Mario series. </p> </header> <ul class="timeline"> <li class="card" v-for="(game, i) in games" :key="i"> <div class="card--title" v-if="i % 2 === 0" v-rotate:left> <p>{{ game.name }}</p> <time> <span>{{ game.month }}</span>{{ game.year }} </time> </div> <div class="card--title" v-else v-rotate:right>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0