html5 svg+css3制作图片边框运动动画效果

当前位置:主页 > Html5库 > HTML5动画 > html5 svg+css3制作图片边框运动动画效果
html5 svg+css3制作图片边框运动动画效果
分享:

    插件介绍

    一款使用html5 svg技术制作的图片边框运动动画效果,鼠标移动到图片上时,便会有几条线绕着边框运动,共有4种不同的效果。建议使用Firefox或Chrome浏览器观看。

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-19
    阅读:

简要教程

本教程将和大家一起来研究一种奇妙且有趣的边框运动效果。当你用鼠标划过类似图片的内容块时,它的边框将会很神奇的运动起来:内容块的透明度降低,它的四条边框按顺时针方向运动,效果十分奇妙。我们将使用html5 svg和CSS transitions来完成它。

我们刚接触这种效果时,并不知道该如何下手制作,但是你可以先观察一条边,比如上部的边,你会注意到,边框是从右到做减少,然后一条新的边再从右边出现运动到左边。当结合4条边来看时,效果是上部的边运动到左边,左边的边运动到下边,下边的边运动到右边,右边的边运动到上部,正好是一周。

现在,想一想如何通过svg来实现它。我们想不使用javascript来实现它,但是使用css来计算stroke-dashoffsetstroke-dasharray的值是相当困难的。所以我们决定使用另一种解决方案,使用线条并它们运动起来。

更详细的教程请参看使用HTML5 SVG和CSS3制作边框运动的动画效果

网友评论