1、首先我们创建一个简单的项目,如图所示包括html,css和img三个。
2、这里是html文件,引入css和html代码文件,如图所示。
3、这里是css文件代码,上面是div和图片显示的效果代码,后面是动画效果。
4、这里是事件,这里定义了四个时间段的状态,兼容了ie的。
5、如图所示这里是效果图,会根据时间轮播显示下一张图片 了。
首先CSS(级联样式表)一般来讲分3种: 外联样式表:CSS样式单独写在一个CSS文件中,HTML页面使用标签引入这个文件; 内联样式表:CSS样式写在HTML页面的标签内; 内嵌样式表:CSS样式直接写在HTML标签的style属性里完全可以,不过效果和ps出来的还是会有差距的。<style>
.gaguang{width:300pxtext-align:center}
.box{width: 300px
height: 100px
background: #3B4C2C
border: 4px solid white
box-shadow: 0 0 10px #333
border-radius: 10px
opacity: 0.8}
.gg{width: 400px
height: 200px
border-radius: 45%
margin-top: -265px
z-index: 1
background: white
opacity: 0.1
margin-left: -45px}
.wz{z-index:0position:absolutetop:40pxcolor:#fffwidth:300px}
</style>
<div class="gaguang">
<div class="box"></div>
<div class="wz">这里是内容,这里是内容,</div>
<div class="gg"></div>
</div>