Home >Web Front-end >HTML Tutorial >用CSS3实现图片动态效果_html/css_WEB-ITnose

用CSS3实现图片动态效果_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:51:372002browse

一.用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的子标签

中创建figure标签,给figure一个class="test1" 创建figcaption,用于存放图片要用的标签信息。(以下用我的工程作为例子)

        用CSS3实现图片动态效果_html/css_WEB-ITnose (图片地址:如果用DW编辑器建议直接插入图片,如果是myeclipse就得把图片放到工程目录下输入地址导入)

       

售价:¥10

       

作者

       

简介

接下来写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实现当鼠标经过实现图片的旋转等,做出更绚丽的效果。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn