CSS:SVG animation

html{background-color: #28505D;}
.planePath {stroke: #D9DADA; stroke-width: .1%;stroke-width: .5%; stroke-dasharray: 1% 2%;stroke-linecap: round;fill: none;}
.fil1{fill: #D9DADA;}
.fil2{fill: #C5C6C6;}
.fil4{fill: #9D9E9E;}
.fil3{fill: #AEAFB0;}
<svg viewBox="0 0 3387 1270">
  <path id="planePath" class="planePath"
        d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179"></path>
  <g id="plane">
    <polygon class="fil1" points="-141,-10 199,0 -198,-72 -188,-61 -171,-57 -184,-57 "></polygon>
    <polygon class="fil2" points="199,0 -141,-10 -163,63 -123,9 "></polygon>
    <polygon class="fil3" points="-95,39 -113,32 -123,9 -163,63 -105,53 -108,45 -87,48 -90,45 -103,41 -94,41 "></polygon>
    <path class="fil4" d="M-87 48l-21 -3 3 8 19 -4 -1 -1zm-26 -16l18 7 -2 -1 32 -7 -29 1 11 -4 -24 -1 -16 -18 10 23zm10 9l13 4 -4 -4 -9 0z"></path>
    <polygon class="fil1" points="-83,28 -94,32 -65,31 -97,38 -86,49 -67,70 199,0 -123,9 -107,27 "></polygon>
  </g>
  <!-- Define the motion path animation -->
  <animateMotion xlink:href="#plane" dur="5s" repeatCount="indefinite" rotate="auto">
    <mpath xlink:href="#planePath"></mpath>
  </animateMotion>
</svg>
时间: 2024-08-11 08:14:09

CSS:SVG animation的相关文章

SVG系列教程:SVG简介与嵌入HTML页面的方式

地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等.感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧. 什么是SVG SVG是"Scalable Vector Graphics&qu

CSS和SVG中的剪切——clip-path属性和&lt;clipPath&gt;元素

剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内的内容将会显示,而不在这个区域内的内容不会显示.这个区域被称之为“裁剪区域”.只要在这个区域之外的任何元素都不会显示.包括元素的内容.背景.边框.文本.轮廓等,甚至还包括他的子元素. 剪切的元素可以是任何容器和图片元素. 剪切路径的概念就相当于在元素上定义了一个视窗.它决定了元素哪些部分在这个“视窗

用CSS和SVG制作饼图

饼图,即使是最简单的只有两种颜色的形式,用Web技术创建也并不简单,尽管都是一些常见的信息内容,从简单的统计到进度条指标还有计时器.通常是使用外部图像编辑器来分别为多个值创建多个图像来实现,或是使用大型的JavaScript框架来设计更复杂的图表. 尽管这个东西并不像它曾经看起来那么难以实现,但是也没有什么直接并且简单的方法.但是,现在已经有很多更好.更易于维护的方式来实现它. 基于变换的解决方案 这个方案从HTML的角度来说是最好的:它只需要一个元素,其它的都可以用伪元素.变换和CSS渐变完成

css 倒计时 svg

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" conten

那些好玩的CSS - transition transform animation - 北大青鸟教员授课技术交流会

那些好玩的CSS - transition transform animation 北大青鸟教员授课技术交流会 前言: 无意间翻到了之前做的一个PPT,就想着发出来给大家分享一下. 因为公司招了不少新员工,所以经理借着那次的授课交流会,让大家彼此学习一下授课技巧 上课方式 课堂互动等等. 我做的这个是用的极客学院的PPT风格,简单地介绍了一下CSS3里面的几个动画相关的东西,transition过渡.transform变换.animation自定义动画等等. PPT内容如下: (PS:如果需要P

[转]用CSS给SVG &lt;use&gt;的内容添加样式

来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=referral --------------------------------------------------------------------------------------------------------------------- 一篇深入探究如何给SVG<use>元素的内容添加样

CSS:你未必知道的@规则

at-rule是一个声明,为CSS提供执行或怎么表现的指令.每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么.这是一个通用的语法,尽管每个at-rule有其它语法变体. 常规规则 常规规则遵循下面的语法: @[KEYWORD] (RULE); @charset 这个规则定义了浏览器使用的字符集,如果样式表包含非ASCII characters (e.g:UTF-8).注意,被放在HTTP头部的字符集将会覆盖@charset规则 @charset "UTF

CSS3动画属性:动画(animation)

一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果.Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等. 语法 <single-animation> = <single-animation-name> ||

CSS vs. JS Animation: 哪个更快

CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点? 这篇文章将会逐点讲解基于JavaScript的DOM动画库,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的动画库高效的. jQuery 让我们先从这个事实开始:JavaScript和jQuery被