利用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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 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清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Python pip使用超时问题解决方案
2020/08/03 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
群众路线教育实践活动心得体会
2014/03/07 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python