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>