21纯 CSS 创作文本滑动特效的 UI 界面
原文地址：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%; }
posted on
2019-01-14 00:01
人生与戏 阅读(
...) 评论(
...)
编辑
收藏