你的位置:首页 > 网页设计

[网页设计]在CSS动画中使用motion


本文章向码农们介绍motion-path在css动画中的使用实例分析,需要的码农可以参考一下。

使用motion path,作者可以让图像物体按照指定的路径运动。谷歌浏览器积极的要实现这个CSS特征,我想主要motion-path是SVG动画里独特的亮点,而谷歌浏览器已经决定放弃SVG SMIL,所以,实现了CSS中的motion-path,也就能很好的说服哪些喜欢SVG动画的用户了。

CSS里的motion-path预防是这样的:

motion-path: path('M100,250 C 100,50 400,50 400,250');

下面是三个在CSS里使用motion-path的实例演示。

注意:目前只有谷歌浏览器实现了这个功能,请使用最新版的谷歌浏览器观看。

<h1>CSS Motion Path 动画演示</h1> <p><strong>注意:</strong>目前只有谷歌浏览器实现了这个功能,请使用最新版的谷歌浏览器观看。</p> <div class="canvas"> <div class="square square1 path">方块1</div> <div class="square square2 path">方块2</div>  <svg width="580" height="400" viewBox="0 0 580 400">   <path stroke="#FF2D1A" d="m232.771103,329.79953c-102.829727,-78.900574 -139.598976,-128.812088 -139.897499,-189.912598c-0.270775,-55.699638 45.11657,-109.459106 92.15345,-109.14909c23.485428,0.155491 73.868423,20.65649 91.709885,37.317997c8.990051,8.395851 13.248871,7.567986 33.261871,-6.467178c54.464142,-38.195642 107.654175,-38.997543 142.101776,-2.141006c55.054443,58.903046 45.031464,129.243813 -28.812988,202.207039c-39.259857,38.791107 -124.994751,107.608795 -134.060852,107.608795c-2.761017,0 -28.16275,-17.759216 -56.455643,-39.463959l0,0z" stroke-width="1.5" fill="#fff" />   <path stroke="#181c21" class="path plane" d="m38.056561,4.386863c-0.586136,0 -1.107681,0.240613 -1.547703,0.677117c-0.43961,0.436077 -0.803249,1.060985 -1.105896,1.841453c-0.60508,1.560679 -0.977318,3.753087 -1.180946,6.378638c-0.203182,2.620523 -0.23745,5.671947 -0.153076,8.938395c-7.240604,2.970366 -21.925862,9.103491 -23.10556,10.472843c-1.570616,1.823208 -1.063179,3.912663 -0.430244,5.299751l24.142197,-4.913754c0.510326,6.4035 1.235912,12.745731 1.868229,17.715393c-2.360985,0.690937 -6.76815,2.055286 -7.677814,2.901402c-1.253193,1.165512 -1.253193,4.929501 -1.253193,4.929501l9.88092,-0.80365c0.232769,1.622536 0.378304,2.569187 0.378304,2.569187l0.014431,0.085464l0.077927,0l0.181957,0l0.077995,0l0.014435,-0.085464c0,0 0.145256,-0.946732 0.378227,-2.569187l9.883835,0.80365c0,0 0,-3.763988 -1.253193,-4.929501c-0.91,-0.846428 -5.320366,-2.213829 -7.680691,-2.904591c0.631054,-4.954422 1.355366,-11.272388 1.865307,-17.655201l23.859238,4.85675c0.632927,-1.387089 1.143303,-3.476543 -0.427315,-5.299751c-1.165123,-1.352394 -15.495529,-7.349104 -22.825523,-10.358953c0.087616,-3.308828 0.055405,-6.40176 -0.150143,-9.052284l0,-0.00631c-0.20372,-2.622749 -0.576351,-4.812962 -1.180988,-6.372328c-0.30254,-0.780253 -0.663174,-1.405215 -1.103001,-1.841453c-0.440044,-0.436505 -0.961491,-0.677117 -1.547714,-0.677117l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="2" fill="#05111c" />  </svg> </div>

 

<!-- Port of animateMotion example http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement --><svg width="5cm" height="3cm" viewBox="0 0 500 300"   ="http://www.w3.org/2000/svg" version="1.1"   ="http://www.w3.org/1999/xlink" > <rect x="1" y="1" width="498" height="298"    fill="none" stroke="blue" stroke-width="2" /> <path id="path1" d="M100,250 C 100,50 400,50 400,250"    fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <!-- Here is a triangle which will be moved about the motion path.    It is defined with an upright orientation with the base of    the triangle centered horizontally just above the origin. --> <path id="triangle" d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"    fill="yellow" stroke="red" stroke-width="7.06" >    </path> </svg>

 

<svg ="http://www.w3.org/2000/svg" width="700" height="450" viewBox="500 150 1400 900"><rect x="595" y="423" width="610" height="377" fill="blue"/><polygon points="506,423 900,190 1294,423" fill="yellow"/><polygon points="993,245 993,190 1086,190 1086,300" fill="red"/><path d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /><path id="first" d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20   A10,10 0 0,1 30,0   M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"  transform="translate(0,0)" fill="green" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /><path id="second" d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20   A10,10 0 0,0 30,0   M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"  transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /></svg>

原文地址:http://www.manongjc.com/article/660.html

相关阅读:

SVG里的几个动画元素的用法介绍

原生javascript实现的一个简单动画

JavaFX Animation动画之地球升起

JavaFX Animation之路径动画实例

纯css写的手风琴切换实例