我有要制作动画的文字.例如,不是在悬停,而是从白色到红色不断变化,然后再次变回白色.
这是我目前的CSS代码:
#countText{ color: #eeeeee; font-family: "League Gothic",Impact,sans-serif; line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0px 0px 6px ; font-size: 210px; }
解决方法
使用关键帧和动画属性
HTML
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Qui ad quos autem beatae nulla in.</p>
CSS
p{ -webkit-animation: color-change 1s infinite; -moz-animation: color-change 1s infinite; -o-animation: color-change 1s infinite; -ms-animation: color-change 1s infinite; animation: color-change 1s infinite; } @-webkit-keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } @-moz-keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } @-ms-keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } @-o-keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } @keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } }
原文地址:https://www.jb51.cc/css/217552.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。