You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.5 KiB
43 lines
1.5 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<style>
|
|
div{
|
|
width: 200px;
|
|
height: 200px;
|
|
/*animation代表引入动画样式，mydh为自定义动画名，duration为动画持续时间； timing-function为动画播放速率（可取值为 ease逐渐变慢； linear匀速； ease-in加速； ease-out减速； ease-in-out先加速后减速） */
|
|
/* delay表示延时执行时间； iteration-count为循环次数，infinite代表无限次执行 */
|
|
animation: mydh 2s linear 0s infinite;
|
|
}
|
|
div:hover{
|
|
/* 控制播放状态，running表示播放，paused代表暂停 */
|
|
animation-play-state: paused;
|
|
background-color: orange;
|
|
}
|
|
/*
|
|
使用 @keyframes创建动画，后跟自定义的动画名；下面的百分比可自定义添加对动画进度进行控制 */
|
|
@keyframes mydh {
|
|
0%{
|
|
/* 表示透明度。范围为0——1 */
|
|
opacity: 0.1;
|
|
background-color: brown;
|
|
}
|
|
50%{
|
|
opacity: 0.5;
|
|
background-color: green;
|
|
}
|
|
100%{
|
|
opacity: 1;
|
|
background-color: blue;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div></div>
|
|
</body>
|
|
</html>
|