css3中动画功能

来源：互联网发布：数字滤波算法快速滤波编辑：程序博客网时间：2024/04/29 19:12

1.transition 属性

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>transition属性</title>    <style>        .div1{            width: 200px;            height: 200px;            background-color: chartreuse;            -webkit-transition: all 1s linear 2s;            /*transition ：property duration timing-function delay            property 的三哥类型            a.none没有属性会获得过度效果            b. all 所有属性都将获得            c.用户自定义，用逗号隔开           ————————————————            duration 属性            a. 代表需要完成效果过度需要的时间            ————————————————            timing-function            动画加载的的速率            ————————————————            delay 变换时间的延迟            */        }        .div1:hover{            background-color: aqua;            width: 300px;        }    </style></head><body><h1>transition属性</h1><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div></body></html>

—————delay参数————————

——————————————————————————————————————————————————————————————

2 animation 的用法

/* 代码*/

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>animation属性</title>    <style>        div{            width: 200px;            height: 100px;            background-color: aqua;        }        /* animation 使用方法           @-webkit-keyframes 关键帧合集名称｛           创建关键帧的代码           0%-100%｛           本关键帧的样式           ｝           ｝        */        @-webkit-keyframes mycolor {            0%{                background-color: aqua;            }            10%{                background-color: chartreuse;            }            80%{                background-color: antiquewhite;            }            100%{                background-color: blueviolet;            }         }        div:hover{            -webkit-animation-name:mycolor;            -webkit-animation-duration: 5s;            -webkit-animation-timing-function: linear;            -webkit-animation-iteration-count: infinite;        }    </style></head><body><h1>animation属性</h1><div></div></body></html>

0 0