zoukankan      html  css  js  c++  java
  • css3动画知识点

    杨龙飞

    杨龙飞

    杨龙飞

    杨龙飞

    杨龙飞

    杨龙飞

    <!DOCTYPE html>
    <html>
    <head>
    <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 中无效。</p>

    </body>
    </html>

    无限循环动画

    .content .light{position:absolute;right:0px;background:white;-webkit-animation: twinkling1 1s infinite ease-in-out;animation: twinkling1 1s infinite ease-in-out;box-sizing:border-box;border:3px solid white;}
    @keyframes twinkling1 {
    100% {20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
    }
    @-moz-keyframes twinkling1 /* Firefox */
    {
    100% {20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
    }

    @-webkit-keyframes twinkling1 /* Safari 和 Chrome */
    {
    100% {20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
    }

    @-o-keyframes twinkling1 /* Opera */
    {
    100% {20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
    }
    学而不思则罔,思而不结则殆,结而不看,一事无成
  • 相关阅读:
    为了实现一个函数 clone ,可以对 JavaScript 中 5 种主要的数据类型 (包括 Number、 St「ing 、 Object、 A「「ay、 Boolean )进行值(深)复制。
    说说你对语义化的理解
    vue 根据字符串的长度控制显示的字数超出显示省略号
    加密号码将中间四位改为*
    前端项目部署错误:npm ERR! notarget No matching version found for event-stream@3.3.6
    npm报错:A complete log of this run can be fund in:........
    nrm插件的安装插件和使用
    Vue过渡搭配Velocity.js动画的基本使用
    Asp.Net Core&钉钉开发系列
    KnockoutJS知识规整目录
  • 原文地址:https://www.cnblogs.com/windseek/p/6410265.html
Copyright © 2011-2022 走看看