您的位置：首页 > 其它

SCC3实现文字背景动态滑动

2016-02-18 13:41 218 查看

<!DOCTYPE html>
<html>
<head>
<style>
p{
width:50%;
margin:100px auto;
line-height:50px;
font-size:50px;
text-align:center;

-webkit-background-clip: text;    /*按文字裁剪*/
-webkit-text-fill-color: transparent;    /*文字的颜色使用背景色*/

background-color:#19385c;    /*设置一个背景色*/
background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 30%, #aff0ff 50%, rgba(0, 0, 0, 0.6) 70%);        /*设置渐变的背景，按对角线渐变*/

background-blend-mode: hard-light;    /*设置背景为混合模式下的强光模式*/
background-size: 200%;

-webkit-animation: shine 4s infinite;    /*给背景添加动画改变位置*/
}

@-webkit-keyframes shine {
from {background-position: 100%;}
to {background-position: 0;}
}
</style>
</head>
<body><p>> Slide To Unlock</p></body>
</html>

本文出自：http://www.wufangbo.com/css-jie-shuo-hua-dong/

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

标签：

相关文章推荐

新的分享

章节导航