当前位置:首页 > 建站常识 > 列表

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

点击:时间:2017/1/8关键词:上海网页制作 网站优化 代码优化
一、平移动画有关的CSS3属性以及相关的属性描述1、transition-property:是用来指定当元素其中一个属性改变时执行transition效果(例如:长度,宽度,颜色等)。2、transition-duration:是用来指定元素转换过程的持续时间
<a href=http://www.021jz.com.cn/tags/shanghaiwangyezhizuo/><strong>上海网页制作</strong></a>

一、平移动画有关的CSS3属性以及相关的属性描述

1、transition-property:是用来指定当元素其中一个属性改变时执行transition效果(例如:长度,宽度,颜色等)。

2、transition-duration:是用来指定元素转换过程的持续时间(通过设置元素转换过程持续的时间来实现动态效果,否则效果会变的很生硬)。

3、transition-timing-function:允许元素根据时间的推进去改变属性值的变换速率(例如:先快后慢,先慢后快,匀速变化等等)。

4、transition-delay:是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果。

先来三张效果图,由于是一个动态的过程,这里只发三张动态瞬间图片: 

二、效果图

图片左侧的文字还没有进入

三、示例代码

<!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>
/*清原有的默认样式*/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秒以后开始向右移动进入页面*/}

预约建站
免费提供网站优化
领取关键词