原文地址: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%; }
原文地址:https://www.cnblogs.com/FlyingLiao/p/10264879.html
时间: 2024-10-29 16:29:59