前端开发效果实例_CSS 遮罩

web前端开发的实例|前端开发入门效果分享|网站前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>前端开发者css遮罩效果</title>
</head>
<style type=”text/css”>
*{
margin:0;
padding:0;
height:100%;
}
body{
background-color:black;
}
div{
text-align:center;
position:absolute;
top:200px;
left:550px;
width:800px;
height:400px;
background-image:url(https://www.rokub.com/wp-content/uploads/2018/05/a01ed07d-51e5-11e8-b986-484d7ebf651c-520×245.jpg);
background-repeat:repeat-x;
background-position:00;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation: cliptext 20slinearinfinite;
}
@-webkit-keyframescliptext{
from {
background-position:00;
}
to {
background-position:100%0;
}
}
span{
font-family:’微软雅黑’;
font-size:200px;
font-weight:500;
}
</style>
<body>
<div>
<span>
蓝天白云
</span>
</div>
</body>
</html>

前端程序开发实例|前端开发的动画实例|前端开发css文件模板

» 本文来自:前端开发者 » 《前端开发效果实例_CSS 遮罩》
» 本文链接地址:https://www.rokub.com/3754.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!