一.用CSS3的好处
1.使用简单,易于学习
2.性能相对优化
二.学习前需要了解的知识
html5基本语法
css3基本用法
三.页面效果展示
如图片所示(这里以网上书城系统为例),当鼠标滑过书本(中间书)时,书的图片放大,并且会从左边滑过标签显示书目的价格,简介,作者等信息。当鼠标移开就恢复原状。(如图,左右两边的为初始状态,中间的为鼠标滑过的状态)
四.主要内容
1.掌握figure以及figcaption的基本用法
2.熟练掌握transform的基本属性及其用法
3.通过transition和transform配合制作简单的动画
五.属性及其代码介绍
(1)figure和figcaption(HTML)
figure标签:用于规定独立的内容,好比一个容器,用来存放图像,图表,照片等
figcaption标签:和figure一起使用,主要是用来定义figure标签的标题。
(2)transform和transition(CSS属性)
transform:用于元素的变形处理(例如:放大,缩小,旋转等)原理:通过改变元素的位置参数来实现元素的变形。
transition:用于元素过渡动画处理。(通过参数设置控制动画时间,延迟等)
HTML页面:
HTML的基本部署在此不多讲。
如果想要使得页面分布合理些可以建立table标签,将页面分为几个模块,每个模块存放一个元素(这里以书本代替)在此直接编写figure代码。
在table的子标签<tr>中创建figure标签,给figure一个class="test1" 创建figcaption,用于存放图片要用的标签信息。(以下用我的工程作为例子)
<figure class="test1">
<img src="你图片的地址" width="?",height="?"> (图片地址:如果用DW编辑器建议直接插入图片,如果是myeclipse就得把图片放到工程目录下输入地址导入)
<figcaption>
<p>售价:¥10</p>
<p>作者</p>
<p>简介</p>
</figcaption>
</figure>
接下来写CSS 重点!
建立公共类
(以上属性根据我的页面来设置,可以参照,根据实际情况更改)
对P标签进行设置,通过transform来实现P标签的动画(P标签从屏幕的左边-180px的位置开始移入(-代表左))
此代码代表:hover鼠标经过实现动画。(标签移动到0px处,及由-180px到0px)
标签从-180px滑到0px的时间延迟
接下来最后一步,实现图片的放大还原,给img设置属性,当hover时,调用transform:scale(1.5,1.5),表示图片的长宽扩大1.5倍。(根据实际调整)
六.总结
通过此篇教程,可以学习到用单纯的CSS3实现图片的放大缩小,标签的移动。如果用JS去实现也可以,但是代码量更大,设置更复杂。用此种方法更为简便。同时还可以更改transform属性,放大缩小是通过scale来实现,也可以用rotate实现当鼠标经过实现图片的旋转等,做出更绚丽的效果。