利用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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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代码
2007/03/03 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php实现对象克隆的方法
2015/06/20 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
python的多重继承的理解
2017/08/06 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Python中SQLite如何使用
2020/05/27 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
若干个Java基础面试题
2015/05/19 面试题
农民工创业典型事迹
2014/01/25 职场文书
总经理司机职责
2014/02/02 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
无故旷工检讨书
2015/08/15 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python