html+css+jq实现广告5秒之后自动关闭特效

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

广告时间还剩6秒

书写css代码。* { padding: 0; margin: 0; font-size: 12px; }ol, ul, li { list-style: none }img { border: none }.box { width: 564px; height: 361px; margin: 20px auto; position: relative; display: none; }.ad_time { width: 554px; height: 351px; background: #000; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; padding: 5px; position: absolute; top: 0; left: 0; color: #fff; }.ad_time span { font-weight: bold; color: #cc0; padding: 0 5px; }.close { width: 49px; height: 20px; background: url(../images/close.png) no-repeat; position: absolute; top: 0; right: 0; cursor: pointer; }.btn { width: 100px; height: 30px; background: #eee; border: 1px solid #ddd; font: normal 12px/30px '微软雅黑'; text-align: center; margin: 20px auto; cursor: pointer; }

书写并添加js代码。

代码整体结构。

查看效果。