请问css3能实现如下图的效果吗，不考虑IE

html-css028

请问css3能实现如下图的效果吗，不考虑IE,第1张

完全可以，不过效果和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>

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。

《图解CSS3核心技术与案例实战》百度网盘pdf最新全集下载:

链接: https://pan.baidu.com/s/1LnT5GNOQ9vwv9eqii5wt7g

?pwd=jumj 提取码: jumj

简介：本书是CSS3领域的标准性著作，由资深Web前端工程师根据CSS3的全新技术标准撰写。内容极为全面、丰富和翔实，由浅入深地讲解了CSS3新特性的语法、功能和使用技巧，涵盖选择器、边框、背景、文本、颜色、UI、动画、新型盒模型、媒体查询、响应式设计等各种模块；写作方式创新，有趣且易懂，用图解的方式来描述CSS3的每一个特性甚至每一个步骤都配有实战效果图；包含大量案例，实战性强，每个特性都有作者从实践中精心归纳和挑选出来的案例辅助讲解，同时还包含一个综合性的大案例。