怎样实现banner自动播放html,纯CSS3实现banner图片自动轮播效果方式总结
自動輪播：
實現切換圖片，圖片循環播放；鼠標懸停某張圖片， 則暫停切換。css
方法一、opacity控制透明度實現輪播效果
依照需求咱們選擇用CSS3的animation動畫進行實現；transition動畫須要觸發才能啟動，html
因此咱們選擇自動觸發的animation屬性；動畫
思路就是：將三個圖片進行絕對定位重疊以后，將三個圖片的動畫放在一條時間軸上，分別在不一樣時間點控制透明度，在樣式代碼中的細節code
寫的很好理解了，在不用DOM的狀況下是一種辦法。orm
html:htm
css:圖片
.banner{
height: 378px;
width: 100%;
position: relative;
img{
width:100%;
height: 378px;
position: absolute;
top: 0;
}
&__pics1{
opacity: 1;
animation:pics1 5s linear 0s infinite normal both running;
}
@keyframes pics1 {
// 0%{opacity: 1;}
// 33%{opacity: 1;}
// 33.3%{opacity: 0;}
// 66.6%{opacity: 0;}
// 100%{opacity: 1;}
from{
opacity: 1;
}
32%{
opacity: 1;
}
33%{
opacity: 0;
}
to{
opacity: 0;
}
}
&__pics2{
opacity: 0;
animation:pics2 5s linear 0s infinite normal both running;
}
@keyframes pics2 {
// 0%{opacity: 0;}
// 33.3%{opacity: 1;}
// 63.6%{opacity: 1;}
// 66.6%{opacity: 0;}
// 100%{opacity: 0;}
from{
opacity: 0;
}
30%{
opacity: 0;
}
31%{
opacity: 1;
}
60%{
opacity: 1;
}
61%{
opacity: 0;
}
to{
opacity: 0;
}
}
&__pics3{
opacity: 0;
animation:pics3 5s linear 0s infinite normal both running;
}
@keyframes pics3 {
// 0%{opacity: 0;}
// 33.3%{opacity: 0;}
// 66.6%{opacity: 1;}
// 96.6%{opacity: 1;}
// 100%{opacity: 0;}
from{
opacity: 0;
}
60%{
opacity: 0;
}
61%{
opacity: 1;
}
to{
opacity: 1;
}
}
// &:hover{
// &__pics1, &__pics2, &__pics3{
// cursor: pointer;
// animation-play-state: paused;
// }
// }
}
.banner:hover img{
animation-play-state: paused;
cursor: pointer;
}
方法二、left定位控制向左實現輪播效果
.banner{
height: 378px;
width: 1900px;
margin: 0 auto;
overflow: hidden;
position: relative;
img{
width:100%;
height: 378px;
position: absolute;
top: 0;
}
&__pics1{
animation:pics1 15s linear 0s infinite normal both running;
}
@keyframes pics1 {
from{
left: 2000px;;
}
2%{
left: 0;
}
31%{
left: 0;
}
33%{
left: -2000px;
}
to{
left: -2000px;
}
}
&__pics2{
animation:pics2 15s linear 0s infinite normal both running;
}
@keyframes pics2 {
from{
left: 2000px;
}
31%{
left: 2000px;
}
33%{
left: 0;
}
64%{
left: 0;
}
66%{
left: -2000px;
}
to{
opacity: -2000px;
}
}
&__pics3{
animation:pics3 15s linear 0s infinite normal both running;
}
@keyframes pics3 {
from{
left: 2000px;
}
64%{
left: 2000px;
}
66%{
left: 0;
}
98%{
left: 0;
}
to{
left: -2000px;
}
}
}
.banner:hover img{
animation-play-state: paused;
cursor: pointer;
}
總結
以上是生活随笔為你收集整理的怎样实现banner自动播放html,纯CSS3实现banner图片自动轮播效果方式总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vs android 压缩,Androi
- 下一篇： CSS样式表的规划与组织