以下是今天练习的最终效果：
HTML:
<!DOCTYPE html><html><head><meta charset=”UTF-8″><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>【每日一练】187—CSS实现文字轮播滚动效果</title><link rel=”stylesheet” href=”https://unpkg.com/ress/dist/ress.min.css”><link rel=”stylesheet” href=”CSS/style.css”></head><body><section><div class=”container”><p>欢迎关注,web前端开发</p><div class=”animation”><div class=”first”><p class=”blink”>一个互联网技术公众号</p></div><div class=”second”><p class=”blink”>一个前端技术学习平台</p></div><div class=”third”><p class=”blink”>官方网站：www.webqdkf.com</p></div></div></div></section></body></html>
CSS:
@charset “UTF-8”;body{background-color: #82A8D9;font-family: ‘Montserrat’, sans-serif;font-size: 2rem;font-weight: 300;}li{list-style: none;}.container{margin: 150px auto;display: flex;align-items: center;justify-content: center;}.animation{height: 50px;overflow: hidden;margin-left: 1rem;}.first p,.second p,.third p{display: inline-block;margin-bottom: 2.8rem;padding: 0.25rem 0.75rem;height: 2.8rem;background-color: rgb(255, 255, 255, 0.15);}.first{animation: text-animation 10s infinite;}@keyframes text-animation{0%{margin-top: 0;}10%{margin-top: 0;}20%{margin-top: -5.6rem;}30%{margin-top: -5.6rem;}40%{margin-top: -11.2rem;}60%{margin-top: -11.2rem;}70%{margin-top: -5.6rem;}80%{margin-top: -5.6rem;}90%{margin-top: 0;}100%{margin-top: 0;}}.blink{animation: blink 0.8s infinite;}@keyframes blink{0%{border-right: 1.5px solid rgba(0, 0, 0, 1);}40%{border-right: 1.5px solid rgba(0, 0, 0, 1);}50%{border-right: 1.5px solid rgba(0, 0, 0, 0);}100%{border-right: 1.5px solid rgba(0, 0, 0, 0);}}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
