![CSS3平移动画效果.docx_第1页](http://file.renrendoc.com/FileRoot1/2020-1/22/fda908c4-6602-450b-b37e-b83524de947e/fda908c4-6602-450b-b37e-b83524de947e1.gif)
![CSS3平移动画效果.docx_第2页](http://file.renrendoc.com/FileRoot1/2020-1/22/fda908c4-6602-450b-b37e-b83524de947e/fda908c4-6602-450b-b37e-b83524de947e2.gif)
![CSS3平移动画效果.docx_第3页](http://file.renrendoc.com/FileRoot1/2020-1/22/fda908c4-6602-450b-b37e-b83524de947e/fda908c4-6602-450b-b37e-b83524de947e3.gif)
![CSS3平移动画效果.docx_第4页](http://file.renrendoc.com/FileRoot1/2020-1/22/fda908c4-6602-450b-b37e-b83524de947e/fda908c4-6602-450b-b37e-b83524de947e4.gif)
![CSS3平移动画效果.docx_第5页](http://file.renrendoc.com/FileRoot1/2020-1/22/fda908c4-6602-450b-b37e-b83524de947e/fda908c4-6602-450b-b37e-b83524de947e5.gif)
免费预览已结束,剩余1页可下载查看
下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
CSS3平移动画效果在这篇文章中主要是讲如何通过CSS3实现平移动画效果,在开始之前先给大家介绍一下与平移动画有关的CSS3属性以及相关的属性描述。一、transition-property:是用来指定当元素其中一个属性改变时执行transition效果(例如:长度,宽度,颜色等)。二、transition-duration:是用来指定元素转换过程的持续时间(通过设置元素转换过程持续的时间来实现动态效果,否则效果会变的很生硬)。三、transition-timing-function:允许元素根据时间的推进去改变属性值的变换速率(例如:先快后慢,先慢后快,匀速变化等等)。四、transition-delay:是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果。先来三张效果图,由于是一个动态的过程,这里只发三张动态瞬间图片:图片左侧的文字还没有进入图片上的四行文字正在逐条进入图片上四行文字完成动画效果HTML5全部代码:HTML5全部代码: index 邓福如 如果有如果 前面路口停 邓大福是一只猫 Nothing On You CSS3样式代码:/*清原有的默认样式*/body,figure,figcaption,h2,h3,pmargin: 0;padding: 0;/*设置图片样式*/.test1-imgwidth: 50%;height:10%;overflow: hidden;margin-left:250px;figureposition: relative;overflow: hidden;/*使用overflow属性设置成hidden,图片超出容器的部分就会自动隐藏*/width: 100%;float: left;figcaptionposition: absolute;top:0;left: 0;.test1background-color: #2F0000;.test1 figcaption margin: 20px;/*对test1的figcaption下面的p标签进行样式设计*/.test1 figcaption pbackground-color: #FFF;color: #333;font-family: 微软雅黑;font-weight: 500;letter-spacing: 1px;margin-top: 10px;text-align: center;/*给figure下面的所有的p标签加上动画延时效果*/figure figcaption ptransition: transform 0.35s;/*将test1里面的文字内容移出页面*/.test1 figcaption ptransform: translate(-400px,0px);/*当鼠标滑过外部容器figure的时候改变p标签和h2标签的位置*/.test1:hover figcaption ptransform: 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标签
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 五年级上册英语教案-Module 4 Unit 8《Lets hae both》|教科版(广州深圳)
- 浙江省绍兴市诸暨市荣怀小学2021-2022学年一年级上学期期末语文试卷
- 冀教版三年级下册英语教案:Unit1 AgainPlease
- 专题9立体几何初步测试题
- 苏州园林测试题
- 湖南省岳阳市重点中学2024年中考语文押题试卷含解析
- 5《搭石》第二课时(教案)部编版语文五年级上册
- 一年级语文《un ün》教案
- 湖北省孝感市孝南区等五校2024年中考试题猜想语文试卷含解析
- 湖北省襄州区六校联考2024届中考五模语文试题含解析
- 川内部分地区风玫瑰图
- 新教材人教版高中物理选择性必修第三册全册导学案
- 作文-2018-2021宁波八年级下学期语文期末汇编
- 场地租赁报价表
- 体育教学改革指导纲要+高中课标测试题
- 2022年FANUC系统常见报警中文对照及解决方法
- 空调系统设计方案(办公商业游泳医院)
- 中建三局住宅工程精益建造实施指南
- 《儿科学》教学大纲
- 2021贵州特岗教师招聘考试知识点速记手册--地理版
- 体育校本课程实施方案5
评论
0/150
提交评论