21純 CSS 創作文字滑動特效的 UI 介面
阿新 • • 發佈：2019-01-14
原文地址：https://segmentfault.com/a/1190000014842868
簡化版地址：https://scrimba.com/c/cgaZLh6
感想：笨蛋，想不出自己的東西。。。
HTML程式碼：
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div> <h1>Who Am I</h1> <p> <span class="question">Who gives you milk?</span> <span class="answer">cow</span> </p> <p> <span class="question">Who likes to eat flies？</span> <span class="answer">frog</span> </p> <p> <span class="question">Who have large claws?</span> <span class="answer">crab</span> </p> </div> </body> </html>
CSS程式碼：
html, body { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; background-color: green; color: gold; text-align: center; } p { width: 400px; height: 2.5em; font-size: 24px; border: 2px solid gold; line-height: 2.5em; border-radius: 10px; font-family: sans-serif; letter-spacing: 2px; word-spacing: 2px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); position: relative; /* 溢位隱藏 */ overflow: hidden; } p span { /* 絕對定位,使兩個span重合 */ position: absolute; /* 佔父元素全部 */ width: 100%; top: 0; left: 0; /* 使之有動畫效果 */ transition: 0.5s ease-out; } p .question, p:hover .answer { left: 0; } p:hover .question { left: 100%; } p .answer { color: whitesmoke; font-size: 1.1em; text-transform: uppercase; background: rgba(0, 0, 0, 0.1); left: -100%; }