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、查看效果。