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

建站知识 2021-07-03 08:16www.168986.cn长沙网站建设

一、平移动画有关的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>邓福如</h2>
《如果有如果》
《前面路口停》
《邓大福是一只猫》
《Nothing On You》
</figcaption>
</figure>
</body>
</html>

CSS3样式代码

复制代码

代码如下:

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

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

上一篇：利用css绘制三角形的方法及拓展下一篇：css控制文字自动换行的实现方法

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设