@keyframes自定义动画

来源：互联网发布：牛顿环实验测量数据编辑：程序博客网时间：2024/06/05 06:25

.div:hover{

animation:chbg 1s linear infinite(循环) / n(循环n次) / alternate(原路返回) / reverse(反向)

1.@keyframes chbg{

from{

background:green;

}

to{

background:red;

}

2.@keyframes chbg{

0%{

background:green;

}

25%{

background:red;

}

50%{

background:yellow;

}

100%{

background:blue;

}

eg:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>自定义动画</title>    <style>        div{            width:100px;            height:100px;            background:green;            margin:100px 400px;        }        div:hover{            animation: chbg 6s linear infinite ; /*infinite:循环*/            /*animation: chbg 6s linear n ;/!*n:循环n次*!/*/            /*animation: chbg 6s linear alternate;/!*alternate:原路返回*!/*/            /*animation: chbg 6s linear reverse;/!*reverse:反向*!/*/        }        @keyframes chbg {            0%{                background: green;                border-radius: 100%;            }            25%{                background: yellow;                transform: translate(400px,0);                border-radius: 50%;            }            50%{                background: blue;                transform: translate(400px, 400px);                border-radius: 10%;            }            75%{                background: deeppink;                transform: translate(0, 400px);                border-radius: 50%;            }            100%{                background: red;            }        }    </style></head><body><div></div></body></html>

阅读全文

0 0