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.
|
|
<!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>
|
