大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS3中怎么实现平移动画效果

这期内容当中小编将会给大家带来有关CSS3中怎么实现平移动画效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

在天全等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站制作、成都做网站 网站设计制作按需定制开发,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站,成都外贸网站建设公司,天全网站建设费用合理。

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

1、transition-property:是用来指定当元素其中一个属性改变时执行transition效果(例如:长度,宽度,颜色等)。
2、transition-duration:是用来指定元素转换过程的持续时间(通过设置元素转换过程持续的时间来实现动态效果,否则效果会变的很生硬)。
3、transition-timing-function:允许元素根据时间的推进去改变属性值的变换速率(例如:先快后慢,先慢后快,匀速变化等等)。
4、transition-delay:是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果。

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

二、效果图

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

CSS3中怎么实现平移动画效果

图片上的四行文字正在逐条进入

CSS3中怎么实现平移动画效果

图片上四行文字完成动画效果

CSS3中怎么实现平移动画效果

三、示例代码
HTML5全部代码:

代码如下:





   
   index
   


   


       
       

           

邓福如


           

《如果有如果》


           

《前面路口停》


           

《邓大福是一只猫》


           

《Nothing On You》


       

   


CSS3样式代码:

代码如下:


/*清原有的默认样式*/
body,figure,figcaption,h3,h4,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;
   top:0;
   left: 0;
}

.test1{
   background-color: #2F0000;
}

.test1 figcaption {
   margin: 20px;
}


/*对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;
}


/*给figure下面的所有的p标签加上动画延时效果*/
figure figcaption p{
   transition: transform 0.35s;
}

/*将test1里面的文字内容移出页面*/
.test1 figcaption p{
   transform: translate(-400px,0px);
}


/*当鼠标滑过外部容器figure的时候改变p标签和h3标签的位置*/
.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秒以后开始向右移动进入页面*/
}

上述就是小编为大家分享的CSS3中怎么实现平移动画效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


网站题目:CSS3中怎么实现平移动画效果
当前URL:http://dzwzjz.com/article/pdgdpi.html
在线咨询
服务热线
服务热线:028-86922220
TOP