开发文章

css3动画—实现上拉提示指针动画

今天要实现的内容如下图所示:

实现的内容如下图.gif

有了CSS3的动画属性,实现起来非常的简单。

html布局:

复制内容到剪贴板
  1. <div class="pointer">    
  2.    <p></p>    
  3. </div>    

让.pointer的div放在你想要他显示方,p放的是指针箭头图的地片,而.pointer的div是盒子,因为裹这个箭头的盒要实现向上移动的效果,所以div的高度要比箭头高度高出10px。

pointer的div.png

css样式:

复制内容到剪贴板
  1. .pointer{    
  2.     positionabsolute;    
  3.     height: 3.8rem;    
  4.     bottombottom: 3rem;    
  5.     width: 100%;    
  6. }    
  7. .pointer p{    
  8.     animation: anima-pointer 2s infinite;    
  9.     positionabsolute;    
  10.     bottombottom: 0;    
  11.     left: 50%;    
  12.     margin-left: -1.4rem;    
  13.     height: 2.8rem;    
  14.     width: 2.8rem;    
  15.     backgroundurl("../images/css-sprites.png") -63px 0;    
  16. }    
  17.     
  18. /*animation*/    
  19. @keyframes anima-pointer    
  20. {    
  21.     0%   {opacity:0;bottombottom:0}    
  22.     100%  {opacity:1;bottombottom:10px;}    
  23. }    

其中。这是我的项目中的代码,因为我对.pointer的div还需要进行定位,所以使用了position:absolute,你可以使用其他的属性除了static,让箭头p可以相对于父元素进行绝对定位。

重点看animation:
使用css动画,首先要使用 @keyframes 进行动画声明,这里声明为 anima-pointer,0%时让他在原地且不显示,然后过渡到100%不透明度为1显示且位置相对于原来位置上升了10px。
对箭头p的样式使用动画时使用animation:后边跟刚刚声明的动画和一些动画的属性即可。具体的动画属性可参考w3c官方文档,这里声明的属性是动画持续两秒,并无限次循环执行动画。

感谢 Tiramisu_C 支持 磐实编程网 原文地址:
blog.csdn.net/nongweiyilady/article/details/54645406

文章信息

发布时间:2017-01-21

作者:Tiramisu_C

发布者:aquwcw

浏览次数: