html+css3实现Banner图片透明方式旋转

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代艨位雅剖码。<div class="teachers_banner"媪青怍牙> <div class="container clearfix teachers_b"> <div class="slide" id="slide"> <ul> <li> <img src="images/teacher01.jpg" /> </li> <li> <img src="images/teacher02.jpg" /> </li> <li> <img src="images/teacher03.jpg" /> </li> <li> <img src="images/teacher04.jpg" /> </li> <li> <img src="images/teacher05.jpg" /> </li> <li> <img src="images/teacher06.jpg" /> </li> </ul> <div class="arrow"> <div class="prev"><</div> <div class="next">></div> </div> </div> </div></div>

4、书写css代码。.teachers_banner { width: 100%; height: 575px; background: url(../images/teachers_banner.jpg) no-repeat center top; background-size: cover; position: relative; overflow: hidden; }.teachers_b { position: relative; margin-top: 130px; }#slide { margin: 0 auto; width: 760px; height: 330px; position: relative; }#slide li { position: absolute; width: 760px; display: -box; display: -flex; display: flex; align-items: flex-start; -box-align: flex-start; -align-items: flex-start; background: #fff; overflow: hidden; box-shadow: 0 0 20px #1d374d; }#slide li img { width: 100%; height: 100%; }.slide_left { }.slide_right { padding: 40px; -box-flex: 1; -flex: 1; flex: 1; min-width: 0; }.slide_right h3 { font: 400 30px/18px "Microsoft Yahei"; color: #222222; }.slide_right h3 span { display: inline-block; margin-left: 10px; font: 400 14px/36px "Microsoft Yahei"; color: #555555; }.slide_right p { padding: 20px 0 30px; color: #555555; font: 400 14px/24px "Microsoft Yahei"; border-bottom: 1px solid #dbdbdb; }.slide_right dl { padding-top: 30px; }.slide_right dd { float: left; width: 33.3%; color: #777; font: 400 12px/24px "Microsoft Yahei"; }.slide_right dd h3 { color: #ff9000; margin-bottom: 20px; }.arrow .prev, .arrow .next { position: absolute; width: 64px; top: 38%; z-index: 9; font: 700 96px 'simsun'; opacity: 0.3; color: #fff; cursor: pointer; }.arrow .prev { left: -220px; }.arrow .next { right: -220px; }.arrow .prev:hover, .arrow .next:hover { color: #00a0e9; opacity: .7; }

5、代码整体结构。

6、查看效果。