/* -webkit-background-clip:text */
/* 利用此属性实现安卓开机效果 */
<style>
body{ background: #000 }
#box{
width: 420px;
height: 200px;
border: 2px solid salmon;
text-align: center;
line-height: 200px;
font-size: 60px;
color: rgba(255,255,255,0.2);/* 使用rgba调色 */
background:-webkit-linear-gradient(-15deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 140px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 210px ) no-repeat -200px 0;
-webkit-background-clip:text;/* webkit自己属性 */
transition:3s;
}
#box:hover{
background-position: 420px 0;
}
</style>
</head>
<body>
<div id="box">悠闲自在开机了</div>
<script src="../our.js"></script>
<script>
var box = $('#box');
var num = 0;
for(var i=0; i<421;i++){
box.style.backgroundPosition = i+'px';
}
</script>
</body>
扫一扫
2522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
