zoukankan      html  css  js  c++  java
  • css3常用属性之一动画示例 更改了背景颜色以及定位、阴影效果三个样式。 动画完成之后会进行正反交替执行

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    body{font-size:24px; color:#60F;}
    div{
    300px;
    height:300px;
    background:black;
    position:relative;/*由于需要进行位置改变,所以增加了position属性*/
    animation:myfirst 5s infinite alternate;/*动画捆绑,两个值,动画名称、时长,加上一个无限执行,交替执行*/
    }
    @keyframes myfirst
    {/*改变位置和背景颜色*/
    0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
    25% {background:yellow; border-radius:0px; left:400px; top:0px;}
    50% {background:blue; border-radius:90px; left:400px; top:300px;}
    75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
    100% {background:red; border-radius:20px; left:0px; top:0px;}
    }

    </style>
    </head>

    <body>
    本示例中,更改了背景颜色以及定位、阴影效果三个样式。<br />
    由于本动画在捆绑选择器时添加了一个infinite值,那么本动画将无限执行下去。<br />
    在无限执行的基础之上增加了一个alternate值,那么本动画会进行正反交替执行。
    <div></div>
    </body>
    </html>

  • 相关阅读:
    摩尔定律 四
    为什么要重载new? 四
    JS 完美识别IE FIREFOX CHROME safari
    Chrome的JS调试工具
    JetBrains WebStorm 6注册码(其实版本v4, v5, v6都通用)
    require.js 入门学习
    str_replace、preg_replace、strtr比较
    获取当前IP地址,跳转到对应城市网站。
    mysql大数据高并发处理(转)
    SESSION的安全性(转)
  • 原文地址:https://www.cnblogs.com/bhmmlxieliming/p/6516304.html
Copyright © 2011-2022 走看看