利用CSS3实现平移动画效果示例代码
发布时间：2016-10-12 14:58:49 作者：同Young不同样 
我要评论
我要评论这篇文章主要给大家讲如何通过CSS3实现平移动画效果，在开始之前先给大家介绍一下与平移动画有关的CSS3属性以及相关的属性描述，而后通过示例代码给大家介绍了实现的方法，相信对大家的理解和学习很有帮助，有需要的朋友们一起来看看吧。
一、平移动画有关的CSS3属性以及相关的属性描述
1、transition-property：是用来指定当元素其中一个属性改变时执行transition效果（例如：长度，宽度，颜色等）。
2、transition-duration：是用来指定元素转换过程的持续时间（通过设置元素转换过程持续的时间来实现动态效果，否则效果会变的很生硬）。
3、transition-timing-function：允许元素根据时间的推进去改变属性值的变换速率（例如：先快后慢，先慢后快，匀速变化等等）。
4、transition-delay：是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果。
先来三张效果图，由于是一个动态的过程，这里只发三张动态瞬间图片：
二、效果图
图片左侧的文字还没有进入
图片上的四行文字正在逐条进入
图片上四行文字完成动画效果
三、示例代码
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秒以后开始向右移动进入页面*/
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
本代码是一款使用CSS3和少量js代码制作的炫酷六边形菜单动画特效。在鼠标滑过时带有高光动画效果，当点击菜单后，各个菜单项沿六边形的各条边向外弹出2016-10-08- 拥有一个属于自己的小风车，就这么简单，这篇文章主要介绍了纯DOM+CSS3实现一个小风车具体代码，感兴趣的小伙伴们可以参考一下2016-09-27
- 这篇文章给大家分享了一个利用CSS3实现复选框的动画特效，实现后的效果非常不错，有兴趣的下面来一起看看吧。2016-09-27
- 这篇文章给大家分享了一个利用CSS3实现单选框动画特效，效果非常的好，有兴趣的下面来一起看看吧。2016-09-26
CSS3中动画属性transform、transition和animation属性的区别
最近在项目中用到了CSS3中的动画属性。无奈对于css3几个新加的属性不太熟悉，常常容易搞混。所以从网站研究了点资料，总结一下，方便有需要的朋友们可以参考学习。2016-09-25
这是一款css3基于animation实现旋转的摩天轮动画特效源码，该特效实现了摩天轮顺时针旋转的动画效果，且动画过渡自然，流畅逼真。没有使用任何JS元素2016-09-21
这是一款使用纯CSS3制作的炫酷3D星空动画特效。以飞船向前快速移动为视角，所有的星星都快速的变大并向后移动2016-09-20
这是一款基于jQuery+css3实现的大眼睛萌蛋动画特效源码，动画呈现出小人挥手的动态效果，鼠标滑过动画小人的眼睛和嘴巴可出现小人眯眼和开口大笑的动画变换，动画过度效果2016-09-18- 这篇文章主要为大家详细分析了CSS3 3D制作实战案例分析，更好的巩固CSS3 3D的知识，理解3D的制作和实现原理,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-18
- 这篇文章给大家演示如何只利用CSS3就能实现飞机起飞的动画，实现后的效果很赞，有需要的朋友可以参考借鉴。2016-09-17
最新评论