利用H5SVG实现线性动画效果
2017-04-08 17:33
295 查看
效果图
原理
主要应用到了SVG的两个属性分别为: stroke-dasharray和stroke-dashoffset.stroke-dasharray
strokedasharray属性用于创建虚线:下面来看看例子path{ stroke: #000; fill: transparent; stroke-width: 2px; stroke-dasharray: 10; } </style> </head> <body> <svg width=500 height=500> <path d="M 100 100 L 200 100"/> </svg>
效果:
,当我们尝试增大stroke-dasharray时效果:
会发现放我们增大它的值时, 其中间的空白会变大吗,因此当我们把它设置成线长时并通过stroke-dashoffset就可以隐藏再通过CSS3就可以实现动画效果.
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> *{ margin: 0; padding: 0; } img{ border:0; } ol, ul ,li{list-style: none;} path{ stroke: #000; fill: transparent; stroke-width: 2px; stroke-dasharray: 10; /* stroke-dashoffset: 100; animation: dash 1s linear infinite alternate-reverse; */ } @keyframes dash { to { stroke-dashoffset: 0; } } </style> </head> <body> <svg width=500 height=500> <path d="M 100 100 L 200 100"/> </svg> </body> </html>
相关文章推荐
- 利用CSS Transition来实现动画效果
- Android利用ViewFlipper实现屏幕切换动画效果
- Android利用ViewFlipper实现屏幕切换动画效果
- wpf利用动画实现图形变化产生3d效果
- Android利用ViewFlipper实现屏幕切换动画效果
- 利用MFC实现动画效果
- 利用MFC实现动画效果
- 利用View自身的setAnimation来实现动画效果(Hdpfans)
- UI特效--Android利用ViewFlipper实现屏幕切换动画效果
- Android利用ViewFlipper实现屏幕切换动画效果(上)
- Android利用ViewFlipper实现屏幕切换动画效果
- 利用ViewFlipper实现View间的动画效果(平移/渐变...)
- Android利用ViewFlipper实现屏幕切换动画效果
- Android利用ViewFlipper实现屏幕切换动画效果
- 利用CSS和javascript实现Google首页的动画效果
- Android利用ViewFlipper实现屏幕切换动画效果
- 利用OpenGL实现动画效果
- Android利用ViewFlipper实现屏幕切换动画效果
- 利用MovieClip对象的rotationY属性实现翻转动画效果
- 利用 CALayer 可以实现复杂的动画效果