今后地位:首页 > 建站常识 > 列表

操纵CSS3完成平挪动画结果示例代码

点击: 次时辰:2017/1/8关头词:上海网页建造 网站优化 代码优化
一、平挪动画有关的CSS3属性和相干的属性描写1、transition-property:是用来指定当元素此中一个属性转变时履行transition结果(比方:长度,宽度,色彩等)。2、transition-duration:是用来指定元素转换进程的延续时辰
<a href=http://3djiangyin.com/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秒今后起头向右挪动进入页面*/}

预定建站
收费供给网站优化
支付关头词