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

    在 前端页面中经常要加一些动效,css3的动画对一些小动效来说特别的方便。

    1.对于只有开始和结束的动画

    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
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-moz-keyframes myfirst /* Firefox */
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-o-keyframes myfirst /* Opera */
    {
    from {background:red;}
    to {background:yellow;}
    }
    </style>
    </head>
    <body>
    
    <div></div>

    2.阶段性动画

    <style> 
    div
    {
    width: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>
  • 相关阅读:
    深入JavaScript之获取cookie以及删除cookie
    js 首次进入弹窗
    jquery 点击加载更多
    express 设置允许跨域访问
    微信小程序之全局储存
    jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作)
    我也想聊聊 OAuth 2.0 —— 基本概念
    一行代码,发送邮件
    【Git使用】强制推送代码到多个远程仓库
    一秒钟生成自己的iOS客户端
  • 原文地址:https://www.cnblogs.com/tine/p/8522945.html
Copyright © 2011-2022 走看看