zoukankan      html  css  js  c++  java
  • CSS3实现Animation动画

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <title>animations</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .div1 {
    background-color: red;
    200px;
    height: 200px;
    }
    /* 创建帧的代码 @keyframes */
    /* 实现多个属性值同时变化 */
     
    @keyframes mycolor {
    0% {
    background-color: red;
    transform: rotate(0deg);
    }
    40% {
    background-color: darkblue;
    transform: rotate(30deg);
    }
    70% {
    background-color: aqua;
    transform: rotate(-30deg);
    }
    100% {
    background-color: red;
    transform: rotate(0deg);
    }
    }
     
    .div1:hover {
    /* 指定关键帧集合的名称 */
    animation-name: mycolor;
    animation-duration: 5s;
    /* 从头到结尾以相同的速度来播放动画 */
    animation-timing-function: linear;
    /* 无限循环播放 */
    animation-iteration-count: infinite;
    /* 播放的次数 */
    /* animation-iteration-count: 5; */
    }
     
    @keyframes mycolor2 {
    0% {
    200px;
    height: 200px;
    }
    100% {
    300px;
    height: 300px;
    }
    }
     
    .div2 {
    200px;
    height: 200px;
    border: 1px solid gray;
    animation-name: mycolor2;
    animation-duration: 5s;
    animation-timing-function: ease-out;
    }
    /* 实现网页的淡入效果 */
     
    @keyframes fadein {
    0% {
    /* opacity不透明度 */
    opacity: 0;
    background-color: white;
    }
    100% {
    opacity: 1;
    background-color: white;
    }
    }
     
    body {
    animation-name: fadein;
    /* 动画执行的时间 */
    animation-duration: 5s;
    /* 以相同的速度播放动画 */
    animation-timing-function: linear;
    /* 播放的次数 */
    animation-iteration-count: 1;
    }
    </style>
    </head>

    <body>
    <P>animations可以实现更加复杂的动画效果</P>
    <p>animations and transform功能相同,改变元素的属性来实现动画效果</p>
    <div class="div1">
    示例文字
    </div>
    <div class="div2">
    第二个示例文字
    </div>
    </body>

    </html>
  • 相关阅读:
    练习题
    作业2.6-2.15 两次作业
    11.13(2)
    11.13
    11.6
    10.30
    10.15
    10.9
    9.25号作业
    9.18号
  • 原文地址:https://www.cnblogs.com/zhengao/p/7461670.html
Copyright © 2011-2022 走看看