CSS3中提供了丰富的动画效果,其中文字弹出效果可以为网站增加一些趣味性和交互性。下面我们来看一些常用的CSS3文字弹出动画效果。
/* 文字从上方弹出 */ @keyframes slideInUp { from { transform: translateY(-100%); } to { transform: translateY(0); } } .slideInUp { animation-name: slideInUp; animation-duration: 1s; animation-fill-mode: both; } /* 文字从下方弹出 */ @keyframes slideInDown { from { transform: translateY(100%); } to { transform: translateY(0); } } .slideInDown { animation-name: slideInDown; animation-duration: 1s; animation-fill-mode: both; } /* 文字从左侧弹出 */ @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } .slideInLeft { animation-name: slideInLeft; animation-duration: 1s; animation-fill-mode: both; } /* 文字从右侧弹出 */ @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .slideInRight { animation-name: slideInRight; animation-duration: 1s; animation-fill-mode: both; } /* 文字浮现效果 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: both; }
以上为常用的文字弹出动画效果,在使用时需要定义相应的class,然后添加到元素中即可。使用CSS3动画效果可以为网站增添一些活力,提升用户体验。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。