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>

<!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>

比上面的简单

查看全文

相关阅读:
Flutter & Dart 安装在window系统
 HAWQ配置之客户端访问
 HAWQ配置之HDFS HA
HAWQ集成Yarn HA作为资源管理服务
 ambari 安装HDP3.0.1后，启动服务的问题记录
 【Clojure 基本知识】小技巧s
[转帖]Loading Data into HAWQ
【Clojure 基本知识】关于函数参数的各种高级用法
 【Clojure 基本知识】 ns宏的指令（关键字） requrie的用法
 Linux系统解析域名的先后顺序【转帖】

原文地址：https://www.cnblogs.com/shadow-wolf/p/6054618.html