如果你想要让你的网站更加动态,一个不错的方法就是让文字动起来。CSS提供了多种方式来实现这个目的,接下来我们就来学习一下。/* 让文字循环滚动 */ @keyframes marquee { 0% {
如果你想要让你的网站更加动态,一个不错的方法就是让文字动起来。CSS提供了多种方式来实现这个目的,接下来我们就来学习一下。
/* 让文字循环滚动 */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } marquee { display: inline-block; white-space: nowrap; animation: marquee 10s linear infinite; } /* 让文字在hover时动起来 */ .hover-animate { transition: all 0.2s ease-in-out; } .hover-animate:hover { transform: translateX(10px); } /* 让文字跳动 */ .jump-animate { animation: jump 1s infinite; } @keyframes jump { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /* 让文字旋转 */ .rotate-animate { animation: rotate 2s linear infinite; display: inline-block; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
以上是让文字动起来的常用css代码,使用起来非常简单。试着给你的网站添加一些动态效果,能够更好地吸引用户的注意力。
粉丝
0
关注
0
收藏
0