SVG应用：SVG制作广告

Ubuntu正在使用SVG制作广告。下面的示例是常规广告之一，我们可以在广告部分的不同网站中看到。

<!DOCTYPE html>
<html lang="en">
	<head>
        <meta charset="utf-8">
        <title>SVG应用：SVG制作广告 | web176教程网</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&amp;subset=latin,cyrillic,latin-ext,vietnamese,greek,greek-ext,cyrillic-ext' rel='stylesheet' type='text/css'>
        <style type="text/css">
            @-webkit-keyframes ubuntu-scene-fade-in{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }

        @-webkit-keyframes ubuntu-scene-fade-out{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }

        @-webkit-keyframes ubuntu-scene-hidden{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }

        @-webkit-keyframes ubuntu-scene-visible{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 1;
            }
        }

        @keyframes ubuntu-scene-fade-in{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }

        @keyframes ubuntu-scene-fade-out{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }

        @keyframes ubuntu-scene-hidden{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }

        @keyframes ubuntu-scene-visible{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 1;
            }
        }

        /*! normalize.css v3.0.1 | MIT License | git.io/normalize */

        /**
        * 1. Set default font family to sans-serif.
        * 2. Prevent iOS text size adjust after orientation change, without disabling
        *    user zoom.
        */

        html {
        font-family: 'Roboto', sans-serif; /* 1 */
        -ms-text-size-adjust: 100%; /* 2 */
        -webkit-text-size-adjust: 100%; /* 2 */
        }

        /**
        * Remove default margin.
        */

        body {
        margin: 0;
        }

        /* HTML5 display definitions
        ========================================================================== */

        /**
        * Correct `block` display not defined for any HTML5 element in IE 8/9.
        * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
        * Correct `block` display not defined for `main` in IE 11.
        */

        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        main,
        nav,
        section,
        summary {
        display: block;
        }

        /**
        * 1. Correct `inline-block` display not defined in IE 8/9.
        * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
        */

        audio,
        canvas,
        progress,
        video {
        display: inline-block; /* 1 */
        vertical-align: baseline; /* 2 */
        }

        /**
        * Prevent modern browsers from displaying `audio` without controls.
        * Remove excess height in iOS 5 devices.
        */

        audio:not([controls]) {
        display: none;
        height: 0;
        }

        /**
        * Address `[hidden]` styling not present in IE 8/9/10.
        * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
        */

        [hidden],
        template {
        display: none;
        }

        /* Links
        ========================================================================== */

        /**
        * Remove the gray background color from active links in IE 10.
        */

        a {
        background: transparent;
        }

        /**
        * Improve readability when focused and also mouse hovered in all browsers.
        */

        a:active,
        a:hover {
        outline: 0;
        }

        /* Text-level semantics
        ========================================================================== */

        /**
        * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
        */

        abbr[title] {
        border-bottom: 1px dotted;
        }

        /**
        * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
        */

        b,
        strong {
        font-weight: bold;
        }

        /**
        * Address styling not present in Safari and Chrome.
        */

        dfn {
        font-style: italic;
        }

        /**
        * Address variable `h1` font-size and margin within `section` and `article`
        * contexts in Firefox 4+, Safari, and Chrome.
        */

        h1 {
        font-size: 2em;
        margin: 0.67em 0;
        }

        /**
        * Address styling not present in IE 8/9.
        */

        mark {
        background: #ff0;
        color: #000;
        }

        /**
        * Address inconsistent and variable font size in all browsers.
        */

        small {
        font-size: 80%;
        }

        /**
        * Prevent `sub` and `sup` affecting `line-height` in all browsers.
        */

        sub,
        sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
        }

        sup {
        top: -0.5em;
        }

        sub {
        bottom: -0.25em;
        }

        /* Embedded content
        ========================================================================== */

        /**
        * Remove border when inside `a` element in IE 8/9/10.
        */

        img {
        border: 0;
        }

        /**
        * Correct overflow not hidden in IE 9/10/11.
        */

        svg:not(:root) {
        overflow: hidden;
        }

        /* Grouping content
        ========================================================================== */

        /**
        * Address margin not present in IE 8/9 and Safari.
        */

        figure {
        margin: 1em 40px;
        }

        /**
        * Address differences between Firefox and other browsers.
        */

        hr {
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
        }

        /**
        * Contain overflow in all browsers.
        */

        pre {
        overflow: auto;
        }

        /**
        * Address odd `em`-unit font size rendering in all browsers.
        */

        code,
        kbd,
        pre,
        samp {
        font-family: monospace, monospace;
        font-size: 1em;
        }

        /* Forms
        ========================================================================== */

        /**
        * Known limitation: by default, Chrome and Safari on OS X allow very limited
        * styling of `select`, unless a `border` property is set.
        */

        /**
        * 1. Correct color not being inherited.
        *    Known issue: affects color of disabled elements.
        * 2. Correct font properties not being inherited.
        * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
        */

        button,
        input,
        optgroup,
        select,
        textarea {
        color: inherit; /* 1 */
        font: inherit; /* 2 */
        margin: 0; /* 3 */
        }

        /**
        * Address `overflow` set to `hidden` in IE 8/9/10/11.
        */

        button {
        overflow: visible;
        }

        /**
        * Address inconsistent `text-transform` inheritance for `button` and `select`.
        * All other form control elements do not inherit `text-transform` values.
        * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
        * Correct `select` style inheritance in Firefox.
        */

        button,
        select {
        text-transform: none;
        }

        /**
        * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
        *    and `video` controls.
        * 2. Correct inability to style clickable `input` types in iOS.
        * 3. Improve usability and consistency of cursor style between image-type
        *    `input` and others.
        */

        button,
        html input[type="button"], /* 1 */
        input[type="reset"],
        input[type="submit"] {
        -webkit-appearance: button; /* 2 */
        cursor: pointer; /* 3 */
        }

        /**
        * Re-set default cursor for disabled elements.
        */

        button[disabled],
        html input[disabled] {
        cursor: default;
        }

        /**
        * Remove inner padding and border in Firefox 4+.
        */

        button::-moz-focus-inner,
        input::-moz-focus-inner {
        border: 0;
        padding: 0;
        }

        /**
        * Address Firefox 4+ setting `line-height` on `input` using `!important` in
        * the UA stylesheet.
        */

        input {
        line-height: normal;
        }

        /**
        * It's recommended that you don't attempt to style these elements.
        * Firefox's implementation doesn't respect box-sizing, padding, or width.
        *
        * 1. Address box sizing set to `content-box` in IE 8/9/10.
        * 2. Remove excess padding in IE 8/9/10.
        */

        input[type="checkbox"],
        input[type="radio"] {
        box-sizing: border-box; /* 1 */
        padding: 0; /* 2 */
        }

        /**
        * Fix the cursor style for Chrome's increment/decrement buttons. For certain
        * `font-size` values of the `input`, it causes the cursor style of the
        * decrement button to change from `default` to `text`.
        */

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
        height: auto;
        }

        /**
        * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
        * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
        *    (include `-moz` to future-proof).
        */

        input[type="search"] {
        -webkit-appearance: textfield; /* 1 */
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box; /* 2 */
        box-sizing: content-box;
        }

        /**
        * Remove inner padding and search cancel button in Safari and Chrome on OS X.
        * Safari (but not Chrome) clips the cancel button when the search input has
        * padding (and `textfield` appearance).
        */

        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        }

        /**
        * Define consistent border, margin, and padding.
        */

        fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
        }

        /**
        * 1. Correct `color` not being inherited in IE 8/9/10/11.
        * 2. Remove padding so people aren't caught out if they zero out fieldsets.
        */

        legend {
        border: 0; /* 1 */
        padding: 0; /* 2 */
        }

        /**
        * Remove default vertical scrollbar in IE 8/9/10/11.
        */

        textarea {
        overflow: auto;
        }

        /**
        * Don't inherit the `font-weight` (applied by a rule above).
        * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
        */

        optgroup {
        font-weight: bold;
        }

        /* Tables
        ========================================================================== */

        /**
        * Remove most spacing between table cells.
        */

        table {
        border-collapse: collapse;
        border-spacing: 0;
        }

        td,
        th {
        padding: 0;
        }

        body {
            background: #eee;
            color: #222;
        }

        a{
            color: #222;
        }

        a:hover{
            color: #C55129;
        }

        .container {
            text-align: center;
        }

        .video{
            border: 1px solid #ccc;
            width: 570px;
            height: 460px;
            margin: 20px auto;
            background: #857F96;
            position: relative;
            overflow: hidden;
        }

        .background-shading{
            width: 100%;
            height: 140%;
            z-index: 1;
            background: #a29bbd; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover,  #a29bbd 0%, #a29bbd 10%, #948ea9 30%, #847c93 59%, #686373 80%, #494650 100%); /* FF3.6+ */
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a29bbd), color-stop(10%,#a29bbd), color-stop(30%,#948ea9), color-stop(59%,#847c93), color-stop(80%,#686373), color-stop(100%,#494650)); /* Chrome,Safari4+ */
            background: -webkit-radial-gradient(center, ellipse cover,  #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* Chrome10+,Safari5.1+ */
            background: -o-radial-gradient(center, ellipse cover,  #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* Opera 12+ */
            background: -ms-radial-gradient(center, ellipse cover,  #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* IE10+ */
            background: radial-gradient(ellipse at center,  #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29bbd', endColorstr='#494650',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        }

        #ubuntu-symbol{
            z-index: 2;
            overflow: visible;
        }

        .composition,
        .background-shading,
        #ubuntu-symbol,
        .question-1,
        .question-2,
        .ubuntu-url,
        .credits,
        .counter-container,
        #ubuntu-logo{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .composition{
            width: 100%;
            height: 100%;
            z-index: 3;
            background-color: #fff;
            -webkit-animation-name: ubuntu-scene-visible, ubuntu-scene-fade-out, ubuntu-scene-hidden, ubuntu-scene-fade-in;
            -webkit-animation-delay: 0, 3s, 3.5s, 13.25s;
            -webkit-animation-duration: 3s, 0.5s, 10.25s, 0s;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: 1;
            animation-name: ubuntu-scene-visible, ubuntu-scene-fade-out, ubuntu-scene-hidden, ubuntu-scene-fade-in;
            animation-delay: 0s, 3s, 3.5s, 13.25s;
            animation-duration: 3s, 0.5s, 10.25s, 0s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
        }

        .question-1,
        .question-2,
        .ubuntu-url,
        .credits,
        .counter-container,
        #ubuntu-logo{
            opacity: 0;
        }

        .question-1,
        .question-2,
        .ubuntu-url,
        .credits,
        .counter-container{
            font-size: 36pt;
            color: #C55129;
            font-weight: normal;
            padding: 0;
            margin: 0;
        }

        .question-1{
            -webkit-animation-delay: 0s, 1s, 2.8s;
            -webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-duration: 1s, 1.8s, 0.25s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 0s, 1s, 2.8s;
            animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            animation-timing-function: ease-in-out;
            animation-duration: 1s, 1.8s, 0.25s;
            animation-iteration-count: 1;
        }
        .question-2{
            -webkit-animation-delay: 13.5s;
            -webkit-animation-name: ubuntu-scene-visible;
            -webkit-animation-duration: 1.75s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 13.5s;
            animation-name: ubuntu-scene-visible;
            animation-duration: 1.75s;
            animation-iteration-count: 1;
        }

        #ubuntu-logo{
            -webkit-transform: translate(-35%, -50%);
            transform: translate(-35%, -50%);
            -webkit-animation-delay: 15.5s, 15.5s, 20.25s;
            -webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-duration: 0s, 4.75s, 0.25s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 15.5s, 15.5s, 20.25s;
            animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            animation-timing-function: ease-in-out;
            animation-duration: 0s, 4.75s, 0.25s;
            animation-iteration-count: 1;
        }

        .ubuntu-url{
            -webkit-transform: translate(-55%, 70%);
            transform: translate(-55%, 70%);
            font-size: 27.25pt;
            -webkit-animation-delay: 17s, 17.25s, 20.25s;
            -webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-duration: 0.25s, 3s, 0.25s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 17s, 17.25s, 20.25s;
            animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            animation-timing-function: ease-in-out;
            animation-duration: 0.25s, 3s, 0.25s;
            animation-iteration-count: 1;
        }

        .credits span{
            font-size: 37.5pt;
        }
        .credits{
            -webkit-animation-delay: 20.5s, 21s, 27.5s;
            -webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            -webkit-animation-duration: 0.5s, 6.5s, 1s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 20.5s, 21s, 27.5s;
            animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            animation-duration: 0.5s, 6.5s, 1s;
            animation-iteration-count: 1;
        }

        .counter-container{
            -webkit-animation-delay: 3.7s, 3.05s, 15.05s;
            -webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-duration: 0.05s, 12s, 0s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 3.7s, 3.05s, 15.05s;
            animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            animation-timing-function: ease-in-out;
            animation-duration: 0.05s, 12s, 0s;
            animation-iteration-count: 1;
            top: 85%;
            font-size: 18pt;
            z-index: 2;
            color: #fff;
        }
        </style>
	</head>
	<body>
		<div class="container">
			<div class="video">
			
				<div class="background-shading"></div>
				<div class="composition">
					<h2 class="question-1">How fast does your PC boot?</h2>
					<h2 class="question-2">Ready to work?</h2>
					<h2 class="credits"><span>Created by Ubuntu</span> <br></h2>
					<svg id="ubuntu-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" width="758px" height="171px" viewBox="-0.424 -0.244 758 171" preserveAspectRatio = "xMidYMid meet">
					<g transform="translate(50,0) scale(0.6)">
					<circle fill="#DD4814" cx="712.027" cy="45.326" r="45.326"/>
					<path fill="#FFFFFF" d="M681.207,39.273c-3.344,0-6.053,2.709-6.053,6.053c0,3.342,2.709,6.051,6.053,6.051
						  c3.342,0,6.051-2.709,6.051-6.051C687.257,41.982,684.548,39.273,681.207,39.273z M724.414,66.777
						  c-2.895,1.672-3.887,5.371-2.215,8.264c1.67,2.895,5.369,3.887,8.264,2.215c2.895-1.67,3.887-5.369,2.215-8.264
						  C731.007,66.1,727.306,65.107,724.414,66.777z M694.351,45.326c0-5.98,2.971-11.264,7.516-14.463l-4.424-7.41
						  c-5.295,3.539-9.234,8.947-10.871,15.281c1.91,1.559,3.133,3.932,3.133,6.592c0,2.658-1.223,5.031-3.133,6.59
						  c1.635,6.336,5.574,11.744,10.871,15.283l4.424-7.412C697.322,56.59,694.351,51.307,694.351,45.326z M712.027,27.648
						  c9.234,0,16.811,7.08,17.605,16.109l8.623-0.127c-0.424-6.666-3.336-12.65-7.811-17.051c-2.301,0.869-4.959,0.736-7.256-0.588
						  c-2.301-1.328-3.744-3.568-4.139-6c-2.236-0.617-4.59-0.955-7.023-0.955c-4.184,0-8.139,0.982-11.65,2.721l4.205,7.535
						  C706.843,28.24,709.367,27.648,712.027,27.648z M712.027,63.002c-2.66,0-5.184-0.592-7.445-1.645l-4.205,7.535
						  c3.512,1.74,7.467,2.723,11.65,2.723c2.434,0,4.787-0.338,7.023-0.957c0.395-2.432,1.838-4.67,4.139-6
						  c2.299-1.326,4.955-1.457,7.256-0.588c4.475-4.4,7.387-10.385,7.811-17.051l-8.625-0.127
						  C728.837,55.924,721.261,63.002,712.027,63.002z M724.412,23.871c2.895,1.672,6.594,0.682,8.264-2.213
						  c1.672-2.895,0.682-6.594-2.213-8.266c-2.895-1.67-6.594-0.678-8.266,2.217C720.527,18.502,721.519,22.201,724.412,23.871z"/>
					<path d="M90.651,164.257c-4.606,1.153-10.684,2.375-18.238,3.669c-7.555,1.296-16.296,1.942-26.225,1.942
						  c-8.633,0-15.901-1.261-21.799-3.775c-5.902-2.516-10.65-6.079-14.245-10.685c-3.599-4.604-6.188-10.037-7.77-16.296
						  C0.789,132.853,0,125.914,0,118.285V55.262h20.073v58.706c0,13.672,2.158,23.456,6.476,29.354
						  c4.316,5.902,11.581,8.851,21.799,8.851c2.158,0,4.387-0.072,6.691-0.218c2.3-0.141,4.458-0.323,6.475-0.539
						  c2.013-0.216,3.848-0.431,5.504-0.646c1.652-0.216,2.839-0.465,3.561-0.755V55.262h20.073V164.257z"/>
					<path d="M139.644,60.225c2.445-1.581,6.151-3.237,11.115-4.963c4.964-1.728,10.684-2.59,17.159-2.59
						  c8.057,0,15.216,1.438,21.476,4.315c6.259,2.88,11.547,6.907,15.863,12.088c4.317,5.18,7.588,11.368,9.821,18.562
						  c2.229,7.196,3.346,15.107,3.346,23.74c0,9.066-1.333,17.235-3.993,24.5c-2.664,7.266-6.441,13.417-11.332,18.452
						  c-4.894,5.039-10.792,8.923-17.698,11.656c-6.907,2.731-14.677,4.1-23.311,4.1c-9.355,0-17.627-0.646-24.821-1.942
						  c-7.196-1.295-13.095-2.589-17.698-3.885V3.459l20.073-3.452V60.225z M139.644,150.013c2.013,0.576,4.856,1.115,8.526,1.617
						  c3.669,0.506,8.235,0.757,13.705,0.757c10.792,0,19.425-3.562,25.9-10.684c6.475-7.124,9.713-17.231,9.713-30.327
						  c0-5.751-0.577-11.148-1.727-16.187c-1.153-5.035-3.021-9.388-5.611-13.057c-2.59-3.67-5.936-6.547-10.037-8.635
						  c-4.101-2.084-9.032-3.129-14.785-3.129c-5.47,0-10.505,0.938-15.108,2.806c-4.607,1.872-8.131,3.815-10.576,5.827V150.013z"/>
					<path d="M330.44,164.257c-4.607,1.153-10.684,2.375-18.238,3.669c-7.555,1.296-16.295,1.942-26.224,1.942
						  c-8.634,0-15.901-1.261-21.8-3.775c-5.902-2.516-10.65-6.079-14.245-10.685c-3.599-4.604-6.188-10.037-7.77-16.296
						  c-1.585-6.26-2.375-13.199-2.375-20.828V55.262h20.073v58.706c0,13.672,2.158,23.456,6.475,29.354
						  c4.316,5.902,11.581,8.851,21.799,8.851c2.158,0,4.388-0.072,6.691-0.218c2.3-0.141,4.458-0.323,6.475-0.539
						  c2.013-0.216,3.848-0.431,5.504-0.646c1.652-0.216,2.84-0.465,3.561-0.755V55.262h20.073V164.257z"/>
					<path d="M359.359,58.499c4.604-1.151,10.717-2.375,18.347-3.671c7.625-1.294,16.402-1.941,26.33-1.941
						  c8.922,0,16.33,1.261,22.232,3.776c5.898,2.52,10.609,6.043,14.137,10.576c3.523,4.533,6.006,9.967,7.447,16.296
						  c1.436,6.333,2.158,13.312,2.158,20.937v63.023h-20.074v-58.708c0-6.905-0.469-12.803-1.402-17.697
						  c-0.938-4.89-2.48-8.849-4.641-11.87c-2.158-3.023-5.037-5.216-8.633-6.584c-3.6-1.367-8.061-2.051-13.381-2.051
						  c-2.16,0-4.393,0.074-6.691,0.216c-2.304,0.145-4.499,0.325-6.583,0.541c-2.089,0.215-3.96,0.469-5.611,0.755
						  c-1.656,0.29-2.844,0.506-3.562,0.646v94.751h-20.073V58.499z"/>
					<path d="M496.413,55.262h42.52v16.835h-42.52v51.799c0,5.611,0.43,10.253,1.295,13.921c0.863,3.671,2.158,6.549,3.885,8.634
						  c1.727,2.088,3.885,3.562,6.475,4.425c2.59,0.863,5.611,1.296,9.064,1.296c6.186,0,11.08-0.682,14.678-2.051
						  c3.594-1.366,6.043-2.337,7.338-2.913l4.316,16.403c-2.016,1.008-5.578,2.304-10.684,3.884c-5.109,1.582-10.898,2.374-17.375,2.374
						  c-7.627,0-13.92-0.97-18.885-2.913s-8.957-4.856-11.979-8.741c-3.021-3.886-5.146-8.668-6.367-14.354
						  c-1.225-5.682-1.836-12.264-1.836-19.748V23.965l20.074-3.453V55.262z"/>
					<path d="M648.143,164.257c-4.607,1.153-10.686,2.375-18.238,3.669c-7.555,1.296-16.295,1.942-26.225,1.942
						  c-8.633,0-15.9-1.261-21.799-3.775c-5.902-2.516-10.65-6.079-14.246-10.685c-3.598-4.604-6.188-10.037-7.77-16.296
						  c-1.586-6.26-2.375-13.199-2.375-20.828V55.262h20.074v58.706c0,13.672,2.158,23.456,6.475,29.354
						  c4.316,5.902,11.58,8.851,21.799,8.851c2.158,0,4.387-0.072,6.691-0.218c2.299-0.141,4.459-0.323,6.475-0.539
						  c2.014-0.216,3.848-0.431,5.504-0.646c1.652-0.216,2.84-0.465,3.561-0.755V55.262h20.074V164.257z"/>
					</g>
					</svg>
				</div>
				<h4 class="counter-container">00:<span id="counter">00</span></h4>
				<svg id="ubuntu-symbol" version="1.1" xmlns="http://www.w3.org/2000/svg" width="350px" height="350px" viewBox="-0.866 -0.866 285 285" preserveAspectRatio = "xMidYMid meet">
				<defs>
				<filter id="dropshadow" x="-100%" y="-100%" width="280%" height="280%">
					<!-- stdDeviation is how much to blur -->
					<feGaussianBlur in="SourceGraphic" stdDeviation="20">
						<!--Shadow animation-->
						<animate
							attributeType="XML"
							attributeName="stdDeviation"
							calcMode="spline"
							additive="sum"
							values ="0 ; 20; 0"
							keyTimes="0 ; 0.5 ; 1"
							keySplines="0.4 0 0.5 1 ; 0.5 0 0.35 1"
							begin="3.25s"
							dur="10s" />
					</feGaussianBlur>
				</filter>
				<filter id="gaussianblur" x="-100%" y="-100%" width="280%" height="280%">
					<!-- stdDeviation is how much to blur -->
					<feGaussianBlur in="SourceGraphic" stdDeviation="0">
						<!--Blur animation-->
						<animate
							attributeType="XML"
							attributeName="stdDeviation"
							additive="sum"
							calcMode="spline"
							values ="0 ; 30; 0"
							keyTimes="0 ; 0.5 ; 1"
							keySplines="0.4 0 0.5 1 ; 0.5 0 0.35 1"
							begin="3.25s"
							dur="10s" />
					</feGaussianBlur>
				</filter>
				</defs>
				<g id="ubuntu-symbol-group">
				<!--Rotation animation-->
				<animateTransform
					attributeName="transform"
					attributeType="XML"
					calcMode="spline"
					begin="3.25s"
					type="rotate"
					values ="0 142 142 ; 14400 142 142"
					keyTimes="0 ; 1"
					keySplines="0.4 0 0.4 1"
					dur="10s" />
				<!--Translation animation-->
				<animateTransform
					attributeName="transform"
					attributeType="XML"
					calcMode="spline"
					additive="sum"
					begin="3.25s"
					type="translate"
					values ="0 0 ; 50 50 ; 0 0"
					keyTimes="0 ; 0.5 ; 1"
					keySplines="0.4 0 0.5 1 ; 0.5 0 0.25 1"
					dur="10s" />
				<!--Scaling animation-->
				<animateTransform
					attributeName="transform"
					attributeType="XML"
					additive="sum"
					calcMode="spline"
					values ="1 ; 0.65; 1"
					keyTimes="0 ; 0.5 ; 1"
					keySplines="0.4 0 0.5 1 ; 0.5 0 0.25 1"
					begin="3.25s"
					type="scale"
					dur="10s" />
				<path id="ubuntu-symbol-circle-shadow" filter="url(#dropshadow)" fill="#0F1116" d="M283.465,141.734c0,78.273-63.457,141.73-141.734,141.73S0,220.008,0,141.734C0,63.455,63.453,0,141.73,0 S283.465,63.455,283.465,141.734z"/>
				<path id="ubuntu-symbol-circle" filter="url(#gaussianblur)" fill="#DCC6E5" d="M283.465,141.734c0,78.273-63.457,141.73-141.734,141.73S0,220.008,0,141.734C0,63.455,63.453,0,141.73,0 S283.465,63.455,283.465,141.734z"/>
				<path id="ubuntu-symbol-circle-elements-inside" transform="translate(3,3) scale(0.98)" filter="url(#gaussianblur)" fill="#E1BECF" d="M45.356,122.812c-10.453,0-18.923,8.47-18.923,18.923c0,10.449,8.47,18.92,18.923,18.92
					  c10.449,0,18.92-8.471,18.92-18.92C64.276,131.281,55.806,122.812,45.356,122.812z M180.463,208.814
					  c-9.051,5.225-12.149,16.793-6.926,25.84c5.226,9.051,16.793,12.151,25.844,6.926c9.048-5.224,12.148-16.792,6.923-25.842
					  C201.08,206.691,189.511,203.59,180.463,208.814z M86.458,141.732c0-18.701,9.293-35.219,23.504-45.221L96.128,73.338
					  c-16.56,11.064-28.878,27.978-33.995,47.788c5.977,4.872,9.796,12.291,9.796,20.608c0,8.315-3.819,15.734-9.797,20.605
					  c5.116,19.812,17.435,36.726,33.995,47.789l13.835-23.175C95.751,176.953,86.458,160.436,86.458,141.732z M141.733,86.457
					  c28.877,0,52.564,22.141,55.047,50.373l26.968-0.394c-1.327-20.844-10.432-39.562-24.425-53.319
					  c-7.194,2.718-15.505,2.306-22.688-1.842c-7.192-4.152-11.705-11.156-12.941-18.757c-6.992-1.935-14.351-2.99-21.96-2.99
					  c-13.086,0-25.449,3.072-36.431,8.512l13.146,23.56C125.526,88.307,133.412,86.457,141.733,86.457z M141.733,197.008
					  c-8.322,0-16.207-1.85-23.285-5.143L105.3,215.427c10.983,5.438,23.347,8.511,36.433,8.511c7.609,0,14.968-1.055,21.961-2.99
					  c1.236-7.601,5.75-14.605,12.943-18.76c7.183-4.146,15.494-4.558,22.688-1.839c13.992-13.758,23.097-32.476,24.422-53.32
					  l-26.968-0.394C194.298,174.871,170.61,197.008,141.733,197.008z M180.46,74.649c9.05,5.227,20.619,2.126,25.842-6.921
					  c5.226-9.051,2.128-20.619-6.923-25.845c-9.049-5.224-20.617-2.124-25.843,6.927C168.312,57.857,171.412,69.426,180.46,74.649z"/>
				<path id="ubuntu-symbol-circle-elements" filter="url(#gaussianblur)" fill="#13161F" d="M45.356,122.812c-10.453,0-18.923,8.47-18.923,18.923c0,10.449,8.47,18.92,18.923,18.92
					  c10.449,0,18.92-8.471,18.92-18.92C64.276,131.281,55.806,122.812,45.356,122.812z M180.463,208.814
					  c-9.051,5.225-12.149,16.793-6.926,25.84c5.226,9.051,16.793,12.151,25.844,6.926c9.048-5.224,12.148-16.792,6.923-25.842
					  C201.08,206.691,189.511,203.59,180.463,208.814z M86.458,141.732c0-18.701,9.293-35.219,23.504-45.221L96.128,73.338
					  c-16.56,11.064-28.878,27.978-33.995,47.788c5.977,4.872,9.796,12.291,9.796,20.608c0,8.315-3.819,15.734-9.797,20.605
					  c5.116,19.812,17.435,36.726,33.995,47.789l13.835-23.175C95.751,176.953,86.458,160.436,86.458,141.732z M141.733,86.457
					  c28.877,0,52.564,22.141,55.047,50.373l26.968-0.394c-1.327-20.844-10.432-39.562-24.425-53.319
					  c-7.194,2.718-15.505,2.306-22.688-1.842c-7.192-4.152-11.705-11.156-12.941-18.757c-6.992-1.935-14.351-2.99-21.96-2.99
					  c-13.086,0-25.449,3.072-36.431,8.512l13.146,23.56C125.526,88.307,133.412,86.457,141.733,86.457z M141.733,197.008
					  c-8.322,0-16.207-1.85-23.285-5.143L105.3,215.427c10.983,5.438,23.347,8.511,36.433,8.511c7.609,0,14.968-1.055,21.961-2.99
					  c1.236-7.601,5.75-14.605,12.943-18.76c7.183-4.146,15.494-4.558,22.688-1.839c13.992-13.758,23.097-32.476,24.422-53.32
					  l-26.968-0.394C194.298,174.871,170.61,197.008,141.733,197.008z M180.46,74.649c9.05,5.227,20.619,2.126,25.842-6.921
					  c5.226-9.051,2.128-20.619-6.923-25.845c-9.049-5.224-20.617-2.124-25.843,6.927C168.312,57.857,171.412,69.426,180.46,74.649z"/>
				</g>
				</svg>
			</div>
			<p><button onclick="javascript:history.go(0)">Reload</button></p>
		
		</div>
		<!--Include jQuery-->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script>

				jQuery('.counter-container').ready(function() {
					// Get counter text value
					counterVal = jQuery('#counter').text();

					// Start counting after 2900ms
					setTimeout(countIt, 2900);
				});

				function countIt() {
					// Increment counter every 1000ms
					countItInterval = setInterval(incrementIt, 1000);
				}

				function incrementIt() {

					// Increment counter
					counterVal++;

					// Check if counter larger than 10 and stop if true
					if (counterVal >= 10) {
						clearInterval(countItInterval);
					}

					// Add zero in front of single number values
					if (counterVal < 10) {
						counterVal = '0' + counterVal;
					}

					// Print counter value in console
					console.log(counterVal);

					// Refresh counter value
					jQuery('#counter').text(counterVal);
				}

		</script>
	</body>
</html>

HTML
​x
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>SVG应用：SVG制作广告 | web176教程网</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&amp;subset=latin,cyrillic,latin-ext,vietnamese,greek,greek-ext,cyrillic-ext' rel='stylesheet' type='text/css'>
        <style type="text/css">
            @-webkit-keyframes ubuntu-scene-fade-in{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }
​
        @-webkit-keyframes ubuntu-scene-fade-out{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
​
        @-webkit-keyframes ubuntu-scene-hidden{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
​
        @-webkit-keyframes ubuntu-scene-visible{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 1;
            }
        }
​
        @keyframes ubuntu-scene-fade-in{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }
​
        @keyframes ubuntu-scene-fade-out{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
​
        @keyframes ubuntu-scene-hidden{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
​
        @keyframes ubuntu-scene-visible{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 1;
            }
        }
​
        /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
​
        /**
        * 1. Set default font family to sans-serif.
        * 2. Prevent iOS text size adjust after orientation change, without disabling
        *    user zoom.
        */
​
        html {
        font-family: 'Roboto', sans-serif; /* 1 */
        -ms-text-size-adjust: 100%; /* 2 */
        -webkit-text-size-adjust: 100%; /* 2 */
        }
​
        /**
        * Remove default margin.
        */
​
        body {
        margin: 0;
        }
​
        /* HTML5 display definitions
        ========================================================================== */
​
        /**
        * Correct `block` display not defined for any HTML5 element in IE 8/9.
        * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
        * Correct `block` display not defined for `main` in IE 11.
        */
​
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        main,
        nav,
        section,
        summary {
        display: block;
        }
​
        /**
        * 1. Correct `inline-block` display not defined in IE 8/9.
        * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
        */
​
        audio,
        canvas,
        progress,
        video {
        display: inline-block; /* 1 */
        vertical-align: baseline; /* 2 */
        }
​
        /**
        * Prevent modern browsers from displaying `audio` without controls.
        * Remove excess height in iOS 5 devices.
        */
​
        audio:not([controls]) {
        display: none;
        height: 0;
        }
​
        /**
        * Address `[hidden]` styling not present in IE 8/9/10.
        * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
        */
​
        [hidden],
        template {
        display: none;
        }
​
        /* Links
        ========================================================================== */
​
        /**
        * Remove the gray background color from active links in IE 10.
        */
​
        a {
        background: transparent;
        }
​
        /**
        * Improve readability when focused and also mouse hovered in all browsers.
        */
​
        a:active,
        a:hover {
        outline: 0;
        }
​
        /* Text-level semantics
        ========================================================================== */
​
        /**
        * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
        */
​
        abbr[title] {
        border-bottom: 1px dotted;
        }
​
        /**
        * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
        */
​
        b,
        strong {
        font-weight: bold;
        }
​
        /**
        * Address styling not present in Safari and Chrome.
        */
​
        dfn {
        font-style: italic;
        }
​
        /**
        * Address variable `h1` font-size and margin within `section` and `article`
        * contexts in Firefox 4+, Safari, and Chrome.
        */
​
        h1 {
        font-size: 2em;
        margin: 0.67em 0;
        }
​
        /**
        * Address styling not present in IE 8/9.
        */
​
        mark {
        background: #ff0;
        color: #000;
        }
​
        /**
        * Address inconsistent and variable font size in all browsers.
        */
​
        small {
        font-size: 80%;
        }
​
        /**
        * Prevent `sub` and `sup` affecting `line-height` in all browsers.
        */
​
        sub,
        sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
        }
​
        sup {
        top: -0.5em;
        }
​
        sub {
        bottom: -0.25em;
        }
​
        /* Embedded content
        ========================================================================== */
​
        /**
        * Remove border when inside `a` element in IE 8/9/10.
        */
​
        img {
        border: 0;
        }
​
        /**
        * Correct overflow not hidden in IE 9/10/11.
        */
​
        svg:not(:root) {
        overflow: hidden;
        }
​
        /* Grouping content
        ========================================================================== */
​
        /**
        * Address margin not present in IE 8/9 and Safari.
        */
​
        figure {
        margin: 1em 40px;
        }
​
        /**
        * Address differences between Firefox and other browsers.
        */
​
        hr {
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
        }
​
        /**
        * Contain overflow in all browsers.
        */
​
        pre {
        overflow: auto;
        }
​
        /**
        * Address odd `em`-unit font size rendering in all browsers.
        */
​
        code,
        kbd,
        pre,
        samp {
        font-family: monospace, monospace;
        font-size: 1em;
        }
​
        /* Forms
        ========================================================================== */
​
        /**
        * Known limitation: by default, Chrome and Safari on OS X allow very limited
        * styling of `select`, unless a `border` property is set.
        */
​
        /**
        * 1. Correct color not being inherited.
        *    Known issue: affects color of disabled elements.
        * 2. Correct font properties not being inherited.
        * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
        */
​
        button,
        input,
        optgroup,
        select,
        textarea {
        color: inherit; /* 1 */
        font: inherit; /* 2 */
        margin: 0; /* 3 */
        }
​
        /**
        * Address `overflow` set to `hidden` in IE 8/9/10/11.
        */
​
        button {
        overflow: visible;
        }
​
        /**
        * Address inconsistent `text-transform` inheritance for `button` and `select`.
        * All other form control elements do not inherit `text-transform` values.
        * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
        * Correct `select` style inheritance in Firefox.
        */
​
        button,
        select {
        text-transform: none;
        }
​
        /**
        * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
        *    and `video` controls.
        * 2. Correct inability to style clickable `input` types in iOS.
        * 3. Improve usability and consistency of cursor style between image-type
        *    `input` and others.
        */
​
        button,
        html input[type="button"], /* 1 */
        input[type="reset"],
        input[type="submit"] {
        -webkit-appearance: button; /* 2 */
        cursor: pointer; /* 3 */
        }
​
        /**
        * Re-set default cursor for disabled elements.
        */
​
        button[disabled],
        html input[disabled] {
        cursor: default;
        }
​
        /**
        * Remove inner padding and border in Firefox 4+.
        */
​
        button::-moz-focus-inner,
        input::-moz-focus-inner {
        border: 0;
        padding: 0;
        }
​
        /**
        * Address Firefox 4+ setting `line-height` on `input` using `!important` in
        * the UA stylesheet.
        */
​
        input {
        line-height: normal;
        }
​
        /**
        * It's recommended that you don't attempt to style these elements.
        * Firefox's implementation doesn't respect box-sizing, padding, or width.
        *
        * 1. Address box sizing set to `content-box` in IE 8/9/10.
        * 2. Remove excess padding in IE 8/9/10.
        */
​
        input[type="checkbox"],
        input[type="radio"] {
        box-sizing: border-box; /* 1 */
        padding: 0; /* 2 */
        }
​
        /**
        * Fix the cursor style for Chrome's increment/decrement buttons. For certain
        * `font-size` values of the `input`, it causes the cursor style of the
        * decrement button to change from `default` to `text`.
        */
​
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
        height: auto;
        }
​
        /**
        * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
        * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
        *    (include `-moz` to future-proof).
        */
​
        input[type="search"] {
        -webkit-appearance: textfield; /* 1 */
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box; /* 2 */
        box-sizing: content-box;
        }
​
        /**
        * Remove inner padding and search cancel button in Safari and Chrome on OS X.
        * Safari (but not Chrome) clips the cancel button when the search input has
        * padding (and `textfield` appearance).
        */
​
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        }
​
        /**
        * Define consistent border, margin, and padding.
        */
​
        fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
        }
​
        /**
        * 1. Correct `color` not being inherited in IE 8/9/10/11.
        * 2. Remove padding so people aren't caught out if they zero out fieldsets.
        */
​
        legend {
        border: 0; /* 1 */
        padding: 0; /* 2 */
        }
​
        /**
        * Remove default vertical scrollbar in IE 8/9/10/11.
        */
​
        textarea {
        overflow: auto;
        }
​
        /**
        * Don't inherit the `font-weight` (applied by a rule above).
        * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
        */
​
        optgroup {
        font-weight: bold;
        }
​
        /* Tables
        ========================================================================== */
​
        /**
        * Remove most spacing between table cells.
        */
​
        table {
        border-collapse: collapse;
        border-spacing: 0;
        }
​
        td,
        th {
        padding: 0;
        }
​
        body {
            background: #eee;
            color: #222;
        }
​
        a{
            color: #222;
        }
​
        a:hover{
            color: #C55129;
        }
​
        .container {
            text-align: center;
        }
​
        .video{
            border: 1px solid #ccc;
            width: 570px;
            height: 460px;
            margin: 20px auto;
            background: #857F96;
            position: relative;
            overflow: hidden;
        }
​
        .background-shading{
            width: 100%;
            height: 140%;
            z-index: 1;
            background: #a29bbd; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover,  #a29bbd 0%, #a29bbd 10%, #948ea9 30%, #847c93 59%, #686373 80%, #494650 100%); /* FF3.6+ */
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a29bbd), color-stop(10%,#a29bbd), color-stop(30%,#948ea9), color-stop(59%,#847c93), color-stop(80%,#686373), color-stop(100%,#494650)); /* Chrome,Safari4+ */
            background: -webkit-radial-gradient(center, ellipse cover,  #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* Chrome10+,Safari5.1+ */
            background: -o-radial-gradient(center, ellipse cover,  #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* Opera 12+ */
            background: -ms-radial-gradient(center, ellipse cover,  #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* IE10+ */
            background: radial-gradient(ellipse at center,  #a29bbd 0%,#a29bbd 10%,#948ea9 30%,#847c93 59%,#686373 80%,#494650 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29bbd', endColorstr='#494650',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        }
​
        #ubuntu-symbol{
            z-index: 2;
            overflow: visible;
        }
​
        .composition,
        .background-shading,
        #ubuntu-symbol,
        .question-1,
        .question-2,
        .ubuntu-url,
        .credits,
        .counter-container,
        #ubuntu-logo{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
​
        .composition{
            width: 100%;
            height: 100%;
            z-index: 3;
            background-color: #fff;
            -webkit-animation-name: ubuntu-scene-visible, ubuntu-scene-fade-out, ubuntu-scene-hidden, ubuntu-scene-fade-in;
            -webkit-animation-delay: 0, 3s, 3.5s, 13.25s;
            -webkit-animation-duration: 3s, 0.5s, 10.25s, 0s;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: 1;
            animation-name: ubuntu-scene-visible, ubuntu-scene-fade-out, ubuntu-scene-hidden, ubuntu-scene-fade-in;
            animation-delay: 0s, 3s, 3.5s, 13.25s;
            animation-duration: 3s, 0.5s, 10.25s, 0s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
        }
​
        .question-1,
        .question-2,
        .ubuntu-url,
        .credits,
        .counter-container,
        #ubuntu-logo{
            opacity: 0;
        }
​
        .question-1,
        .question-2,
        .ubuntu-url,
        .credits,
        .counter-container{
            font-size: 36pt;
            color: #C55129;
            font-weight: normal;
            padding: 0;
            margin: 0;
        }
​
        .question-1{
            -webkit-animation-delay: 0s, 1s, 2.8s;
            -webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-duration: 1s, 1.8s, 0.25s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 0s, 1s, 2.8s;
            animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            animation-timing-function: ease-in-out;
            animation-duration: 1s, 1.8s, 0.25s;
            animation-iteration-count: 1;
        }
        .question-2{
            -webkit-animation-delay: 13.5s;
            -webkit-animation-name: ubuntu-scene-visible;
            -webkit-animation-duration: 1.75s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 13.5s;
            animation-name: ubuntu-scene-visible;
            animation-duration: 1.75s;
            animation-iteration-count: 1;
        }
​
        #ubuntu-logo{
            -webkit-transform: translate(-35%, -50%);
            transform: translate(-35%, -50%);
            -webkit-animation-delay: 15.5s, 15.5s, 20.25s;
            -webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-duration: 0s, 4.75s, 0.25s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 15.5s, 15.5s, 20.25s;
            animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            animation-timing-function: ease-in-out;
            animation-duration: 0s, 4.75s, 0.25s;
            animation-iteration-count: 1;
        }
​
        .ubuntu-url{
            -webkit-transform: translate(-55%, 70%);
            transform: translate(-55%, 70%);
            font-size: 27.25pt;
            -webkit-animation-delay: 17s, 17.25s, 20.25s;
            -webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-duration: 0.25s, 3s, 0.25s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 17s, 17.25s, 20.25s;
            animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            animation-timing-function: ease-in-out;
            animation-duration: 0.25s, 3s, 0.25s;
            animation-iteration-count: 1;
        }
​
        .credits span{
            font-size: 37.5pt;
        }
        .credits{
            -webkit-animation-delay: 20.5s, 21s, 27.5s;
            -webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            -webkit-animation-duration: 0.5s, 6.5s, 1s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 20.5s, 21s, 27.5s;
            animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            animation-duration: 0.5s, 6.5s, 1s;
            animation-iteration-count: 1;
        }
​
        .counter-container{
            -webkit-animation-delay: 3.7s, 3.05s, 15.05s;
            -webkit-animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-duration: 0.05s, 12s, 0s;
            -webkit-animation-iteration-count: 1;
            animation-delay: 3.7s, 3.05s, 15.05s;
            animation-name: ubuntu-scene-fade-in, ubuntu-scene-visible, ubuntu-scene-fade-out;
            animation-timing-function: ease-in-out;
            animation-duration: 0.05s, 12s, 0s;
            animation-iteration-count: 1;
            top: 85%;
            font-size: 18pt;
            z-index: 2;
            color: #fff;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="video">
            
                <div class="background-shading"></div>
                <div class="composition">
                    <h2 class="question-1">How fast does your PC boot?</h2>
                    <h2 class="question-2">Ready to work?</h2>
                    <h2 class="credits"><span>Created by Ubuntu</span> <br></h2>
                    <svg id="ubuntu-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" width="758px" height="171px" viewBox="-0.424 -0.244 758 171" preserveAspectRatio = "xMidYMid meet">
                    <g transform="translate(50,0) scale(0.6)">
                    <circle fill="#DD4814" cx="712.027" cy="45.326" r="45.326"/>
                    <path fill="#FFFFFF" d="M681.207,39.273c-3.344,0-6.053,2.709-6.053,6.053c0,3.342,2.709,6.051,6.053,6.051
                          c3.342,0,6.051-2.709,6.051-6.051C687.257,41.982,684.548,39.273,681.207,39.273z M724.414,66.777
                          c-2.895,1.672-3.887,5.371-2.215,8.264c1.67,2.895,5.369,3.887,8.264,2.215c2.895-1.67,3.887-5.369,2.215-8.264
                          C731.007,66.1,727.306,65.107,724.414,66.777z M694.351,45.326c0-5.98,2.971-11.264,7.516-14.463l-4.424-7.41
                          c-5.295,3.539-9.234,8.947-10.871,15.281c1.91,1.559,3.133,3.932,3.133,6.592c0,2.658-1.223,5.031-3.133,6.59
                          c1.635,6.336,5.574,11.744,10.871,15.283l4.424-7.412C697.322,56.59,694.351,51.307,694.351,45.326z M712.027,27.648
                          c9.234,0,16.811,7.08,17.605,16.109l8.623-0.127c-0.424-6.666-3.336-12.65-7.811-17.051c-2.301,0.869-4.959,0.736-7.256-0.588
                          c-2.301-1.328-3.744-3.568-4.139-6c-2.236-0.617-4.59-0.955-7.023-0.955c-4.184,0-8.139,0.982-11.65,2.721l4.205,7.535
                          C706.843,28.24,709.367,27.648,712.027,27.648z M712.027,63.002c-2.66,0-5.184-0.592-7.445-1.645l-4.205,7.535
                          c3.512,1.74,7.467,2.723,11.65,2.723c2.434,0,4.787-0.338,7.023-0.957c0.395-2.432,1.838-4.67,4.139-6
                          c2.299-1.326,4.955-1.457,7.256-0.588c4.475-4.4,7.387-10.385,7.811-17.051l-8.625-0.127
                          C728.837,55.924,721.261,63.002,712.027,63.002z M724.412,23.871c2.895,1.672,6.594,0.682,8.264-2.213
                          c1.672-2.895,0.682-6.594-2.213-8.266c-2.895-1.67-6.594-0.678-8.266,2.217C720.527,18.502,721.519,22.201,724.412,23.871z"/>
                    <path d="M90.651,164.257c-4.606,1.153-10.684,2.375-18.238,3.669c-7.555,1.296-16.296,1.942-26.225,1.942
                          c-8.633,0-15.901-1.261-21.799-3.775c-5.902-2.516-10.65-6.079-14.245-10.685c-3.599-4.604-6.188-10.037-7.77-16.296
                          C0.789,132.853,0,125.914,0,118.285V55.262h20.073v58.706c0,13.672,2.158,23.456,6.476,29.354
                          c4.316,5.902,11.581,8.851,21.799,8.851c2.158,0,4.387-0.072,6.691-0.218c2.3-0.141,4.458-0.323,6.475-0.539
                          c2.013-0.216,3.848-0.431,5.504-0.646c1.652-0.216,2.839-0.465,3.561-0.755V55.262h20.073V164.257z"/>
                    <path d="M139.644,60.225c2.445-1.581,6.151-3.237,11.115-4.963c4.964-1.728,10.684-2.59,17.159-2.59
                          c8.057,0,15.216,1.438,21.476,4.315c6.259,2.88,11.547,6.907,15.863,12.088c4.317,5.18,7.588,11.368,9.821,18.562
                          c2.229,7.196,3.346,15.107,3.346,23.74c0,9.066-1.333,17.235-3.993,24.5c-2.664,7.266-6.441,13.417-11.332,18.452
                          c-4.894,5.039-10.792,8.923-17.698,11.656c-6.907,2.731-14.677,4.1-23.311,4.1c-9.355,0-17.627-0.646-24.821-1.942
                          c-7.196-1.295-13.095-2.589-17.698-3.885V3.459l20.073-3.452V60.225z M139.644,150.013c2.013,0.576,4.856,1.115,8.526,1.617
                          c3.669,0.506,8.235,0.757,13.705,0.757c10.792,0,19.425-3.562,25.9-10.684c6.475-7.124,9.713-17.231,9.713-30.327
                          c0-5.751-0.577-11.148-1.727-16.187c-1.153-5.035-3.021-9.388-5.611-13.057c-2.59-3.67-5.936-6.547-10.037-8.635
                          c-4.101-2.084-9.032-3.129-14.785-3.129c-5.47,0-10.505,0.938-15.108,2.806c-4.607,1.872-8.131,3.815-10.576,5.827V150.013z"/>
                    <path d="M330.44,164.257c-4.607,1.153-10.684,2.375-18.238,3.669c-7.555,1.296-16.295,1.942-26.224,1.942
                          c-8.634,0-15.901-1.261-21.8-3.775c-5.902-2.516-10.65-6.079-14.245-10.685c-3.599-4.604-6.188-10.037-7.77-16.296
                          c-1.585-6.26-2.375-13.199-2.375-20.828V55.262h20.073v58.706c0,13.672,2.158,23.456,6.475,29.354
                          c4.316,5.902,11.581,8.851,21.799,8.851c2.158,0,4.388-0.072,6.691-0.218c2.3-0.141,4.458-0.323,6.475-0.539
                          c2.013-0.216,3.848-0.431,5.504-0.646c1.652-0.216,2.84-0.465,3.561-0.755V55.262h20.073V164.257z"/>
                    <path d="M359.359,58.499c4.604-1.151,10.717-2.375,18.347-3.671c7.625-1.294,16.402-1.941,26.33-1.941
                          c8.922,0,16.33,1.261,22.232,3.776c5.898,2.52,10.609,6.043,14.137,10.576c3.523,4.533,6.006,9.967,7.447,16.296
                          c1.436,6.333,2.158,13.312,2.158,20.937v63.023h-20.074v-58.708c0-6.905-0.469-12.803-1.402-17.697
                          c-0.938-4.89-2.48-8.849-4.641-11.87c-2.158-3.023-5.037-5.216-8.633-6.584c-3.6-1.367-8.061-2.051-13.381-2.051
                          c-2.16,0-4.393,0.074-6.691,0.216c-2.304,0.145-4.499,0.325-6.583,0.541c-2.089,0.215-3.96,0.469-5.611,0.755
                          c-1.656,0.29-2.844,0.506-3.562,0.646v94.751h-20.073V58.499z"/>
                    <path d="M496.413,55.262h42.52v16.835h-42.52v51.799c0,5.611,0.43,10.253,1.295,13.921c0.863,3.671,2.158,6.549,3.885,8.634
                          c1.727,2.088,3.885,3.562,6.475,4.425c2.59,0.863,5.611,1.296,9.064,1.296c6.186,0,11.08-0.682,14.678-2.051
                          c3.594-1.366,6.043-2.337,7.338-2.913l4.316,16.403c-2.016,1.008-5.578,2.304-10.684,3.884c-5.109,1.582-10.898,2.374-17.375,2.374
                          c-7.627,0-13.92-0.97-18.885-2.913s-8.957-4.856-11.979-8.741c-3.021-3.886-5.146-8.668-6.367-14.354
                          c-1.225-5.682-1.836-12.264-1.836-19.748V23.965l20.074-3.453V55.262z"/>
                    <path d="M648.143,164.257c-4.607,1.153-10.686,2.375-18.238,3.669c-7.555,1.296-16.295,1.942-26.225,1.942
                          c-8.633,0-15.9-1.261-21.799-3.775c-5.902-2.516-10.65-6.079-14.246-10.685c-3.598-4.604-6.188-10.037-7.77-16.296
                          c-1.586-6.26-2.375-13.199-2.375-20.828V55.262h20.074v58.706c0,13.672,2.158,23.456,6.475,29.354
                          c4.316,5.902,11.58,8.851,21.799,8.851c2.158,0,4.387-0.072,6.691-0.218c2.299-0.141,4.459-0.323,6.475-0.539
                          c2.014-0.216,3.848-0.431,5.504-0.646c1.652-0.216,2.84-0.465,3.561-0.755V55.262h20.074V164.257z"/>
                    </g>
                    </svg>
                </div>
                <h4 class="counter-container">00:<span id="counter">00</span></h4>
                <svg id="ubuntu-symbol" version="1.1" xmlns="http://www.w3.org/2000/svg" width="350px" height="350px" viewBox="-0.866 -0.866 285 285" preserveAspectRatio = "xMidYMid meet">
                <defs>
                <filter id="dropshadow" x="-100%" y="-100%" width="280%" height="280%">
                    <!-- stdDeviation is how much to blur -->
                    <feGaussianBlur in="SourceGraphic" stdDeviation="20">
                        <!--Shadow animation-->
                        <animate
                            attributeType="XML"
                            attributeName="stdDeviation"
                            calcMode="spline"
                            additive="sum"
                            values ="0 ; 20; 0"
                            keyTimes="0 ; 0.5 ; 1"
                            keySplines="0.4 0 0.5 1 ; 0.5 0 0.35 1"
                            begin="3.25s"
                            dur="10s" />
                    </feGaussianBlur>
                </filter>
                <filter id="gaussianblur" x="-100%" y="-100%" width="280%" height="280%">
                    <!-- stdDeviation is how much to blur -->
                    <feGaussianBlur in="SourceGraphic" stdDeviation="0">
                        <!--Blur animation-->
                        <animate
                            attributeType="XML"
                            attributeName="stdDeviation"
                            additive="sum"
                            calcMode="spline"
                            values ="0 ; 30; 0"
                            keyTimes="0 ; 0.5 ; 1"
                            keySplines="0.4 0 0.5 1 ; 0.5 0 0.35 1"
                            begin="3.25s"
                            dur="10s" />
                    </feGaussianBlur>
                </filter>
                </defs>
                <g id="ubuntu-symbol-group">
                <!--Rotation animation-->
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    calcMode="spline"
                    begin="3.25s"
                    type="rotate"
                    values ="0 142 142 ; 14400 142 142"
                    keyTimes="0 ; 1"
                    keySplines="0.4 0 0.4 1"
                    dur="10s" />
                <!--Translation animation-->
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    calcMode="spline"
                    additive="sum"
                    begin="3.25s"
                    type="translate"
                    values ="0 0 ; 50 50 ; 0 0"
                    keyTimes="0 ; 0.5 ; 1"
                    keySplines="0.4 0 0.5 1 ; 0.5 0 0.25 1"
                    dur="10s" />
                <!--Scaling animation-->
                <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    additive="sum"
                    calcMode="spline"
                    values ="1 ; 0.65; 1"
                    keyTimes="0 ; 0.5 ; 1"
                    keySplines="0.4 0 0.5 1 ; 0.5 0 0.25 1"
                    begin="3.25s"
                    type="scale"
                    dur="10s" />
                <path id="ubuntu-symbol-circle-shadow" filter="url(#dropshadow)" fill="#0F1116" d="M283.465,141.734c0,78.273-63.457,141.73-141.734,141.73S0,220.008,0,141.734C0,63.455,63.453,0,141.73,0 S283.465,63.455,283.465,141.734z"/>
                <path id="ubuntu-symbol-circle" filter="url(#gaussianblur)" fill="#DCC6E5" d="M283.465,141.734c0,78.273-63.457,141.73-141.734,141.73S0,220.008,0,141.734C0,63.455,63.453,0,141.73,0 S283.465,63.455,283.465,141.734z"/>
                <path id="ubuntu-symbol-circle-elements-inside" transform="translate(3,3) scale(0.98)" filter="url(#gaussianblur)" fill="#E1BECF" d="M45.356,122.812c-10.453,0-18.923,8.47-18.923,18.923c0,10.449,8.47,18.92,18.923,18.92
                      c10.449,0,18.92-8.471,18.92-18.92C64.276,131.281,55.806,122.812,45.356,122.812z M180.463,208.814
                      c-9.051,5.225-12.149,16.793-6.926,25.84c5.226,9.051,16.793,12.151,25.844,6.926c9.048-5.224,12.148-16.792,6.923-25.842
                      C201.08,206.691,189.511,203.59,180.463,208.814z M86.458,141.732c0-18.701,9.293-35.219,23.504-45.221L96.128,73.338
                      c-16.56,11.064-28.878,27.978-33.995,47.788c5.977,4.872,9.796,12.291,9.796,20.608c0,8.315-3.819,15.734-9.797,20.605
                      c5.116,19.812,17.435,36.726,33.995,47.789l13.835-23.175C95.751,176.953,86.458,160.436,86.458,141.732z M141.733,86.457
                      c28.877,0,52.564,22.141,55.047,50.373l26.968-0.394c-1.327-20.844-10.432-39.562-24.425-53.319
                      c-7.194,2.718-15.505,2.306-22.688-1.842c-7.192-4.152-11.705-11.156-12.941-18.757c-6.992-1.935-14.351-2.99-21.96-2.99
                      c-13.086,0-25.449,3.072-36.431,8.512l13.146,23.56C125.526,88.307,133.412,86.457,141.733,86.457z M141.733,197.008
                      c-8.322,0-16.207-1.85-23.285-5.143L105.3,215.427c10.983,5.438,23.347,8.511,36.433,8.511c7.609,0,14.968-1.055,21.961-2.99
                      c1.236-7.601,5.75-14.605,12.943-18.76c7.183-4.146,15.494-4.558,22.688-1.839c13.992-13.758,23.097-32.476,24.422-53.32
                      l-26.968-0.394C194.298,174.871,170.61,197.008,141.733,197.008z M180.46,74.649c9.05,5.227,20.619,2.126,25.842-6.921
                      c5.226-9.051,2.128-20.619-6.923-25.845c-9.049-5.224-20.617-2.124-25.843,6.927C168.312,57.857,171.412,69.426,180.46,74.649z"/>
                <path id="ubuntu-symbol-circle-elements" filter="url(#gaussianblur)" fill="#13161F" d="M45.356,122.812c-10.453,0-18.923,8.47-18.923,18.923c0,10.449,8.47,18.92,18.923,18.92
                      c10.449,0,18.92-8.471,18.92-18.92C64.276,131.281,55.806,122.812,45.356,122.812z M180.463,208.814
                      c-9.051,5.225-12.149,16.793-6.926,25.84c5.226,9.051,16.793,12.151,25.844,6.926c9.048-5.224,12.148-16.792,6.923-25.842
                      C201.08,206.691,189.511,203.59,180.463,208.814z M86.458,141.732c0-18.701,9.293-35.219,23.504-45.221L96.128,73.338
                      c-16.56,11.064-28.878,27.978-33.995,47.788c5.977,4.872,9.796,12.291,9.796,20.608c0,8.315-3.819,15.734-9.797,20.605
                      c5.116,19.812,17.435,36.726,33.995,47.789l13.835-23.175C95.751,176.953,86.458,160.436,86.458,141.732z M141.733,86.457
                      c28.877,0,52.564,22.141,55.047,50.373l26.968-0.394c-1.327-20.844-10.432-39.562-24.425-53.319
                      c-7.194,2.718-15.505,2.306-22.688-1.842c-7.192-4.152-11.705-11.156-12.941-18.757c-6.992-1.935-14.351-2.99-21.96-2.99
                      c-13.086,0-25.449,3.072-36.431,8.512l13.146,23.56C125.526,88.307,133.412,86.457,141.733,86.457z M141.733,197.008
                      c-8.322,0-16.207-1.85-23.285-5.143L105.3,215.427c10.983,5.438,23.347,8.511,36.433,8.511c7.609,0,14.968-1.055,21.961-2.99
                      c1.236-7.601,5.75-14.605,12.943-18.76c7.183-4.146,15.494-4.558,22.688-1.839c13.992-13.758,23.097-32.476,24.422-53.32
                      l-26.968-0.394C194.298,174.871,170.61,197.008,141.733,197.008z M180.46,74.649c9.05,5.227,20.619,2.126,25.842-6.921
                      c5.226-9.051,2.128-20.619-6.923-25.845c-9.049-5.224-20.617-2.124-25.843,6.927C168.312,57.857,171.412,69.426,180.46,74.649z"/>
                </g>
                </svg>
            </div>
            <p><button onclick="javascript:history.go(0)">Reload</button></p>
        
        </div>
        <!--Include jQuery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
​
                jQuery('.counter-container').ready(function() {
                    // Get counter text value
                    counterVal = jQuery('#counter').text();
​
                    // Start counting after 2900ms
                    setTimeout(countIt, 2900);
                });
​
                function countIt() {
                    // Increment counter every 1000ms
                    countItInterval = setInterval(incrementIt, 1000);
                }
​
                function incrementIt() {
​
                    // Increment counter
                    counterVal++;
​
                    // Check if counter larger than 10 and stop if true
                    if (counterVal >= 10) {
                        clearInterval(countItInterval);
                    }
​
                    // Add zero in front of single number values
                    if (counterVal < 10) {
                        counterVal = '0' + counterVal;
                    }
​
                    // Print counter value in console
                    console.log(counterVal);
​
                    // Refresh counter value
                    jQuery('#counter').text(counterVal);
                }
​
        </script>
    </body>
</html>

阅读剩余 97%

作者：terry，如若转载，请注明出处：https://www.web176.com/svgtag/1455.html

SVG应用：SVG制作广告

相关推荐

发表回复

分享到: