资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

查看其它板块

网页前端制作之animation和transition实现页面交互效果

来源:奇创灵动网站建设公司 | 2022.01.25        浏览:

  

页面的制作中,经常使用到animation和transition实现页面交互动画效果,达到页面最佳的视觉效果,不但可以使页面更加生动,还可以提升用户的界面体验,从而增加网站的浏览量。
浏览器的兼容性,IE10、Firefox 还有 Opera 均支持 animation 属性,Safari 和 Chrome 是支持替代的 -webkit-animation 属性,但是IE9 以及更早的版本不支持 animation 属性。transition现代浏览器基本上都支持,但是IE10以下的版本不支持。
animation 和 transition 的用法
animation:
animation-name : 设置动画的名称;animation-duration:设置动画完成的时间animation-timing-function:设置动画的速度曲线类型;animation-delay:设置动画延迟时间; animation-interation-count:设置动画播放的次数;animation-direction: 设置是否轮流反向播放动画; animation-play-state:设置动画正在播放还是暂停;animation-fill-mode:设置动画播放之前或之后,动画效果是什么状态的;
transition:
transition- property:设置过渡效果的属性名称;transition- duration:设置过渡效果的时间,这个时间是必须要设置的,否则时间为0,动画就不会播放了;
transition- timing-function:设置速度效果的速度曲线类型;transition-delay 设定过渡效果的延迟时间;
用transition做过渡的效果,用法很灵活,能轻松实现的效果多重多样。如用Transition 实现的hover效果:


如下图所示:

网页前端制作之animation和transition实现页面交互效果(图1)


Html:

<div class = "btn"> <a href=" "> 查看所有产品 </a> </div>
Css:

网页前端制作之animation和transition实现页面交互效果(图2)



关于loading的用animation做的动画效果:
如下图1所示:
 

网页前端制作之animation和transition实现页面交互效果(图3)

Html:
<div class="load_box" > <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div >
Css:

网页前端制作之animation和transition实现页面交互效果(图4)


如下图2所示:
 

网页前端制作之animation和transition实现页面交互效果(图5)


Html
<div class="loading">
<div class="circle">
     <div class="sp sp1">
     <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div>
     </div>
     <div class="sp sp2">
     <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div>
     </div>
     <div class="sp sp3">
     <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div>
     </div>
    </div>
</div>   
Css:
 

网页前端制作之animation和transition实现页面交互效果(图6)


十二年 建站经验

多一份参考,总有益处

联系我们,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

全国统一服务热线:135-1726-8178 / 24小时接听服务