利用CSS3实现平移动画效果示例代码


Posted in HTML / CSS onOctober 12, 2016

一、平移动画有关的CSS3属性以及相关的属性描述

1、transition-property:是用来指定当元素其中一个属性改变时执行transition效果(例如:长度,宽度,颜色等)。

2、transition-duration:是用来指定元素转换过程的持续时间(通过设置元素转换过程持续的时间来实现动态效果,否则效果会变的很生硬)。

3、transition-timing-function:允许元素根据时间的推进去改变属性值的变换速率(例如:先快后慢,先慢后快,匀速变化等等)。

4、transition-delay:是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果。

先来三张效果图,由于是一个动态的过程,这里只发三张动态瞬间图片: 

二、效果图

图片左侧的文字还没有进入

利用CSS3实现平移动画效果示例代码

图片上的四行文字正在逐条进入

利用CSS3实现平移动画效果示例代码

图片上四行文字完成动画效果

利用CSS3实现平移动画效果示例代码

三、示例代码
HTML5全部代码:

复制代码
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<figure class="test1">
<img src="img/dengfuru3.jpg" class="test1-img">
<figcaption>
<h2><font color="white">邓福如</font></h2>
<p>《如果有如果》</p>
<p>《前面路口停》</p>
<p>《邓大福是一只猫》</p>
<p>《Nothing On You》</p>
</figcaption>
</figure>
</body>
</html>

CSS3样式代码:

复制代码
代码如下:

/*清原有的默认样式*/
body,figure,figcaption,h2,h3,p{
margin: 0;
padding: 0;
}</p> <p>/*设置图片样式*/
.test1-img{
width: 50%;
height:10%;
overflow: hidden;
margin-left:250px;
}</p> <p>figure{
position: relative;
overflow: hidden;/*使用overflow属性设置成hidden,图片超出容器的部分就会自动隐藏*/
width: 100%;
float: left;
}</p> <p>figcaption{
position: absolute;
top:0;
left: 0;
}</p> <p>.test1{
background-color: #2F0000;
}</p> <p>.test1 figcaption {
margin: 20px;
}</p> <p>
/*对test1的figcaption下面的p标签进行样式设计*/
.test1 figcaption p{
background-color: #FFF;
color: #333;
font-family: 微软雅黑;
font-weight: 500;
letter-spacing: 1px;
margin-top: 10px;
text-align: center;
}</p> <p>
/*给figure下面的所有的p标签加上动画延时效果*/
figure figcaption p{
transition: transform 0.35s;
}</p> <p>/*将test1里面的文字内容移出页面*/
.test1 figcaption p{
transform: translate(-400px,0px);
}</p> <p>
/*当鼠标滑过外部容器figure的时候改变p标签和h2标签的位置*/
.test1:hover figcaption p{
transform: translate(0px,0px);
}</p> <p>/*为了实现逐个出现的效果,就要单独给每一个p标签加上延时,给第一个p标签加延时,每个P标签的延时长短不同就决定了他们是先后进入页面的*/
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s;/*当鼠标放在图片上0.05秒以后开始向右移动进入页面*/
}</p> <p>/*为了实现逐个出现的效果,就要单独给每一个p标签加上延时,给第二个p标签加延时*/
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.10s;/*当鼠标放在图片上0.10秒以后开始向右移动进入页面*/
}</p> <p>/*为了实现逐个出现的效果,就要单独给每一个p标签加上延时,给第三个p标签加延时*/
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s;/*当鼠标放在图片上0.15秒以后开始向右移动进入页面*/
}</p> <p>/*为了实现逐个出现的效果,就要单独给每一个p标签加上延时,给第四个p标签加延时*/
.test1 figcaption p:nth-of-type(4){
transition-delay: 0.2s;/*当鼠标放在图片上0.2秒以后开始向右移动进入页面*/
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 #HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 #HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 #HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 #HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 #HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 #HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 #HTML / CSS
You might like
PHP 表单提交给自己
2008/07/24 PHP
php 破解防盗链图片函数
2008/12/09 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
layui table数据修改的回显方法
2019/09/04 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python使用Matplotlib画条形图
2020/03/25 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python 元组操作总结
2019/09/18 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
教学实习自我评价
2014/01/28 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
体育专业求职信
2014/07/16 职场文书
个人务虚会发言材料
2014/10/20 职场文书
广告业务员岗位职责
2015/02/13 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
听课评课活动心得体会
2016/01/15 职场文书
python爬虫selenium模块详解
2021/03/30 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技