您的位置：首页 > Web前端 > CSS

CSS动画硬件加速

2016-07-05 14:26 369 查看

http://zencode.in/14.CSS%E5%8A%A8%E7%94%BB%E7%9A%84%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96.html
http://www.html5rocks.com/zh/tutorials/speed/layers/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
.test-wrap{
font-family: Arial,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,Sans-serif;
}
.test-words{
font-size: 20px;
font-weight: bold;
}
.test-item{
float: right;
width:100px;
height:100px;
border-radius: 50%;
border-color: transparent;
box-shadow: 1px 1px 1px #999999;
-webkit-box-shadow: 1px 1px 1px #999999;
animation: loading 690ms infinite linear;
-webkit-animation: loading 690ms infinite linear;
}
/*@keyframes loading {
0%{transform: translate(0,0);}
100%{ transform: translate(-200px,0); }
}*/
@keyframes loading {
0%{transform: translate3d(0,0,0);}
100%{ transform: translate3d(-200px,0,0); }
}
</style>
</head>
<body>
<div class="test-wrap">
<div class="test-words">我是测试抖不抖的文字</div>
<div class="test-item"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航