700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > CSS3动画实现背景图轮播

CSS3动画实现背景图轮播

时间:2021-02-06 08:04:28

相关推荐

CSS3动画实现背景图轮播

CSS3动画实现背景图轮播

利用css3动画切换背景图的路径;使这个动画无限循环下去,以实现背景图切换的效果。

代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0}.div{width: 100%;height:447px;background-repeat: no-repeat;background-image: url("image/1.jpg");animation:frams 5s infinite;}@keyframes frams {0%{background-image: url("image/1.jpg");background-size: 100% 100%;background-repeat: no-repeat}33%{background-image: url("image/2.jpg");background-size: 100% 100%;background-repeat: no-repeat}66%{background-image: url("image/3.jpg");background-size: 100% 100%;background-repeat: no-repeat}100%{background-image: url("image/1.jpg");background-size: 100% 100%;background-repeat: no-repeat}}</style></head><body><div class="div"></div></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。