霍者博客

CSS3实现文字光影动态滑动效果

效果如下图:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3实现文字光影动态滑动效果</title>
<style>
html,body{background:#aaa;}
#demo{
width:750px;
margin:30px auto;
background:#333 -webkit-linear-gradient(-15deg,#000 5%,rgba(255,255,255,.7),rgba(255,255,255,.9),rgba(255,255,255,.7),#000 10%) no-repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:cliptext 5s linear infinite;
font-size:56px;
font-weight:bold;
text-transform:uppercase;
}
@-webkit-keyframes cliptext{
0%{background-position:left 0;}
100%{background-position:1200px 0;}
}
</style>
</head>
<body>
<div id="demo">
<p>霍者网页设计博客 www.huozheweb.com</p>
</div>
</body>
</html>

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/591.html,标题:CSS3实现文字光影动态滑动效果

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。