一篇文章教会你使用html+css3制作炫酷效果

【一、项目背景】

在浏览一些网站的时候，经常会看到很多的炫酷的效果去装饰页面，使它看起来更高端大气一些。比如，艺龙就采用了图片上加载文字，点击图片使把对应的图片放大，使用户清晰，直观的看到内容。这种效果该怎么做呢？

今天教大家用简单的html+css3结合制作艺龙的页面效果。

【二、项目准备】

1、图片：新建img文件，准备自己喜欢的五张图，保存在文件夹。

2、软件：Dreamweaver

【三、项目目标】

运行时：图片显示缩略图。文字显示在上面。

点击时：把对应的图片显示并放大，点击文字有详细的介绍。

【四、项目实现】

1、创建div 存放图片和文件，添加class属性。

<body>
<div  class="show">
<div class="wap"><div class="box" ><img src="data:images/img1.jpg"><span class='ba'></div><div class="box"><img src="data:images/img2.jpg"><span class='ba'></span></div><div class="box"><img src="data:images/img3.jpg"><span class='ba'></span></div><div class="box"><img src="data:images/img4.jpg"><span class='ba'></span></div><div class="box"><img src="data:images/img5.jpg"><span class='ba'></span></div></div>
</div>
</body>

2、添加文字。

<span class='ba'>功夫熊猫</span>
<span class='ba'>飞屋环游记</span>
<span class='ba'>汽车总动员</span>
<span class='ba'>玩具总动员</span>
<span class='ba'>机器人</span>

3、添加CSS样式

1）设置body的背景颜色为灰色。

body{background: #ccc;}

2）设置box的宽，边框，边框阴影，加载动画过渡效果。

.box{float: left;width: 160px;transition: all 0.5s;border: 1px solid #fff; #边框box-shadow: -5px 0px 10px 0px #000; #阴影position: relative;}

3）添加外层div 样式。添加overflow属性，防止内容溢出。

.wap{width: 999999999px;overflow: hidden;}.show{width: 800px;height: 320px;overflow: hidden;margin: 200px auto;box-shadow: 5px 5px 10px 4px #000;}

4、文字样式。

设置高，宽，行高设置跟高一样，文字才能居中显示。设置文字背景颜色，大小。

.ba{width: 640px;height: 50px;line-height: 50px;color: #fff;background: rgba(0,0,0,0.5);bottom: 0;left: 0;position: absolute;text-indent: 2em;    }

5、添加鼠标移上去的效果样式。

 .ba:hover{    height: 320px;transition: all 0.5s;}.show:hover .box{width: 40px;}.show .box:hover{width: 640px;}

6、添加详细介绍文字。（text文件自取）。

【五、效果展示】

1、点击F12运行到浏览器。

2、点击图片放大。

3、点击文字，详细介绍。

【六、总结】

1、本项目，就鼠标点击事件遇到的一些难点进行了分析及提供解决方案。

2、html+css也可以做出网站页面的效果，在上面显示图片标题的地方不能用绝对定位，于是用的relative定位，这个地方是布局的核心部分，否则无法将文字放在图片之上。

3、按照操作步骤，自己尝试去做。自己实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

4、需要本文源码的小伙伴，后台回复“炫酷效果”四个字，即可获取。

看完本文有收获？请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

一篇文章教会你使用html+css3制作炫酷效果相关推荐

html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果
[一.项目背景] 在浏览一些网站的时候,经常会看到很多的炫酷的效果去装饰页面,使它看起来更高端大气一些.比如,艺龙就采用了图片上加载文字,点击图片使把对应的图片放大,使用户清晰,直观的看到内容.这种效 ...
一篇文章教会你使用html+css3制作GIF图
简介:一篇文章教会你使用html+css3制作GIF图 [一.项目背景] 生活中经常会见到很多gif图,那么gif图到底是什么?GIF是一种位图.简单来说就是通过每一张张静图,通过控制它的关键帧,从而 ...
纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
html设置发光字体制作,CSS3制作炫酷的自定义发光文字
CSS3制作炫酷的自定义发光文字 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px ...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...
一篇文章教会你使用Python网络爬虫下载酷狗音乐
[一.项目背景] 现在的听歌软件动不动就是各种付费,要下载软件才能听,当你下载了之后,你会惊奇的发现这首歌还收费,这就让一向喜欢白嫖的小编感到很伤心了.于是,小编冥思苦想,终于让我发现了其中的奥秘,一 ...
css3制作炫酷动画相册
1. 特别说明:本段代码未作兼容处理,仅在高版本谷歌浏览器中起作用哟: 2.这里我使用的是网络图片,想制作属于自己相册的小伙伴们,可以新建img文件夹,在css样式中,将背景土拍你路径替换为自己的图片 ...
css3制作炫酷导航栏效果转
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
html选择弹出列表实例,CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
下拉菜单先直接来看效果是怎样: 当鼠标移到选单之后,下方会展开并有其它说明内容,我这边是把展开的部份加上图片内容,让它有其它不同的变化.因为这样的动作就像人家庙会时会有舞狮从嘴里丢下贺联一样,所以我才 ...
css3 制作炫酷的发光文字动画
布局: <body><h2><span style="--i:1;">H</span><span style="-- ...

一篇文章教会你使用html+css3制作炫酷效果

一篇文章教会你使用html+css3制作炫酷效果相关推荐

最新文章

热门文章