zoukankan      html  css  js  c++  java
  • css3 动画

    颜色渐变

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style> 
    div
    {
        100px;
        height:100px;
        background:red;
        animation:myfirst 5s;
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
    }
    
    @keyframes myfirst
    {
        from {background:red;}
        to {background:yellow;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        from {background:red;}
        to {background:yellow;}
    }
    </style>
    </head>
    <body>
    
    <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    
    <div></div>
    
    </body>
    </html>
    View Code
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style> 
    div
    {
        100px;
        height:100px;
        background:red;
        animation:myfirst 5s;
        -moz-animation:myfirst 5s; /* Firefox */
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
        -o-animation:myfirst 5s; /* Opera */
    }
    
    @keyframes myfirst
    {
        0%   {background:red;}
        25%  {background:yellow;}
        50%  {background:blue;}
        100% {background:green;}
    }
    
    @-moz-keyframes myfirst /* Firefox */
    {
        0%   {background:red;}
        25%  {background:yellow;}
        50%  {background:blue;}
        100% {background:green;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        0%   {background:red;}
        25%  {background:yellow;}
        50%  {background:blue;}
        100% {background:green;}
    }
    
    @-o-keyframes myfirst /* Opera */
    {
        0%   {background:red;}
        25%  {background:yellow;}
        50%  {background:blue;}
        100% {background:green;}
    }
    </style>
    </head>
    <body>
    
    <div></div>
    
    <p><b>注释:</b>当动画完成时,会变回初始的样式。</p>
    
    
    <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    
    </body>
    </html>
    View Code
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style> 
    div
    {
        100px;
        height:100px;
        background:red;
        position:relative;
        animation:myfirst 5s;
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
    }
    
    @keyframes myfirst
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    </style>
    </head>
    <body>
    
    <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    
    <div></div>
    
    </body>
    </html>
    改变背景和位置

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title>
    <style> 
    div
    {
        100px;
        height:100px;
        background:red;
        position:relative;
        animation-name:myfirst;
        animation-duration:5s;
        animation-timing-function:linear;
        animation-delay:2s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-play-state:running;
        /* Safari and Chrome: */
        -webkit-animation-name:myfirst;
        -webkit-animation-duration:5s;
        -webkit-animation-timing-function:linear;
        -webkit-animation-delay:2s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-direction:alternate;
        -webkit-animation-play-state:running;
    }
    
    @keyframes myfirst
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    </style>
    </head>
    <body>
    
    <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    
    <div></div>
    
    </body>
    </html>
    1
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title>
    <style> 
    div
    {
        100px;
        height:100px;
        background:red;
        position:relative;
        animation:myfirst 5s linear 2s infinite alternate;
        /* Firefox: */
        -moz-animation:myfirst 5s linear 2s infinite alternate;
        /* Safari and Chrome: */
        -webkit-animation:myfirst 5s linear 2s infinite alternate;
        /* Opera: */
        -o-animation:myfirst 5s linear 2s infinite alternate;
    }
    
    @keyframes myfirst
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    
    @-moz-keyframes myfirst /* Firefox */
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    
    @-o-keyframes myfirst /* Opera */
    {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    </style>
    </head>
    <body>
    
    <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    
    <div></div>
    
    </body>
    </html>
    比上面的简单
  • 相关阅读:
    Mono 4.0 Mac上运行asp.net mvc 5.2.3
    ASP.NET SignalR 高可用设计
    .NET Fringe 定义未来
    微软“.Net社区虚拟大会”dotnetConf2015 第二天 无处不在的Xamarin
    微软“.Net社区虚拟大会”dotnetConf2015:关键词:.NET 创新、开源、跨平台
    Mono产品生命周期
    Paket 介绍
    谷歌发布的首款基于HTTP/2和protobuf的RPC框架:GRPC
    Visual Studio 2015 CTP6 发布
    皮裤原理和运营微信公众号dotNET跨平台
  • 原文地址:https://www.cnblogs.com/shadow-wolf/p/6054618.html
Copyright © 2011-2022 走看看