原文地址：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%;}21纯 CSS 创作文本滑动特效的 UI 界面
原文地址：https://www.cnblogs.com/FlyingLiao/p/10264879.html