标签：char viewport center htm translate anr infinite head color
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html{ font-size: 14px; } #app{ background:#fff000; height:300px; width:600px; text-align: center; line-height: 300px; } #app:hover{ /*animation 关键帧动画 必须有执行时间alternate 表示反向动画*/ animation:my 2s ease infinite alternate; border:3px red solid; }
/*也可以简单的from{} to{}*/ @keyframes my { 0%{ font-size: 4rem; background:red; opacity: 1; /*矩阵函数的参数必须有单位 除了scale*/ transform:translate(0px,40px) rotate(0deg) scale(1) } 50%{ font-size: 0.5rem; opacity: .5; background:orangered; transform:translate(50px,40px) rotate(0deg) scale(0.5) } 100%{ font-size: 1rem; opacity:0; background:indianred; transform:translate(100px,40px) rotate(360deg) scale(0.3) } } </style> </head> <body> <div id="app"> Hi 你好 </div> </body> </html>
标签：char viewport center htm translate anr infinite head color
原文地址：http://www.cnblogs.com/xuezizhenchengxuyuan/p/6957722.html
