利用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 相关文章推荐
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
python3.x实现发送邮件功能
2018/05/22 Python
python爬取哈尔滨天气信息
2018/07/14 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python制作简单五子棋游戏
2019/06/18 Python
详解Django配置优化方法
2019/11/18 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
python和js交互调用的方法
2020/06/23 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
正隆泰信息技术有限公司上机题
2012/06/14 面试题
行政人员岗位职责
2013/12/08 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
大型演出策划方案
2014/05/28 职场文书
文员求职信
2014/07/15 职场文书
2015年教学工作总结
2015/04/02 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
德劲DE1105机评
2022/04/05 无线电