用CSS3实现图片动态效果_html/css_WEB-ITnose
一.用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的子标签
(图片地址：如果用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实现当鼠标经过实现图片的旋转等，做出更绚丽的效果。
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
推荐阅读
-
用HTML5实现鼠标滚轮事件放大缩小图片的功能
-
图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
-
用CSS3打造HTML5的Logo(实现代码)
-
用纯css3和html制作泡沫对话框实现代码
-
用纯css3实现的图片放大镜特效效果非常不错
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论