上波图先
WechatIMG3.jpeg
怎么样四不四很炫酷的撒!
老规矩! 直接上码!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
#clipped-title1 {
background: url(girl.jpg) no-repeat center center;
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
#clipped-title2 {
background: url(girl.jpg)no-repeat top center;
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
cursor: pointer;
}
#clipped-title1 h1 {
font-size: 200px;
font-family: Anton, sans-serif;
text-align: center;
-webkit-transition: text-shadow 1s ease;
text-shadow: 0 0 1px rgba(0,0,0,.1);
margin: 0;
padding: 0;
}
#clipped-title2 h1 {
font-size: 110px;
font-family: Pacifico, sans-serif;
text-align: center;
-webkit-transition: text-shadow 1s ease;
text-shadow: 0 0 1px rgba(0,0,0,.1);
margin-top: -75px;
padding: 0;
}
</style>
</head>
<body>
<div id="clipped-title1">
<h1>THE LION</h1>
< /div>
<div id="clipped-title2">
<h1>King of the Jungle</h1>
</div>
</body>
</html>
