欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

操作CSS3实现平移动画结果示例代码

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

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

  1、transition-property:是用来指定当元素个中一个属性改变时执行transition结果(譬喻:长度,宽度,颜色等)。
  2、transition-duration:是用来指定元素转换进程的一连时刻(通过配置元素转换进程一连的时刻来实现动态结果,不然结果会变的很生硬)。
  3、transition-timing-function:应承元素按照时刻的推进去改变属性值的调动速度(譬喻:先快后慢,先慢后快,匀速变革等等)。
  4、transition-delay:是用来指定一个动画开始执行的时刻,也就是说当改变元素属性值后多长时刻开始执行transition结果。

先来三张结果图,因为是一个动态的进程,这里只发三张动态刹时图片: 

二、结果图

图片左侧的笔墨还没有进入

操纵CSS3实现平移动画功效示例代码

图片上的四行笔墨正在逐条进入

操纵CSS3实现平移动画功效示例代码

图片上四行笔墨完成动画结果

操纵CSS3实现平移动画功效示例代码

三、示例代码
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秒往后开始向右移动进入页面*/
}

总结

以上就是这篇文章的所有内容了,但愿本文的内容对各人的进修可能事变能带来必然的辅佐,假若有疑问各人可以留言交换。

本文地址:http://itbyc.com/web/css3/13177.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1