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

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

书写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; }

代码整体结构。

查看效果。