返回列表 回复 发帖

使用background-clip来裁剪文本

  1. <link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600,500,900,700,800" rel="stylesheet" type="text/css">
  2. <link href="http://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet" type="text/css">
  3. <h1 class="background-clip">Clip Text</h1>
复制代码
  1. @import "compass/css3";

  2. html, body {
  3.   background: #f1503f;
  4.   height: 100%;
  5. }
  6. h1 {
  7.   position: relative;
  8.   top: 50%;
  9.   -webkit-transform: translateY(-50%);
  10.   -ms-transform: translateY(-50%);
  11.   transform: translateY(-50%);
  12. }
  13. .background-clip {
  14.   background: url(http://www.w3cplus.com/sites/default/files/blogs/2015/1504/clouds.jpg);
  15.   background-repeat: repeat-x;
  16.   background-position: 0 0;
  17.   font-size: 100px;
  18.   text-transform: uppercase;
  19.   text-align: center;
  20.   font-family: 'Luckiest Guy';
  21.   color: transparent;
  22.   -webkit-font-smoothing: antialiased;
  23.   -webkit-background-clip: text;
  24.   -moz-background-clip: text;
  25.   background-clip: text;
  26.   -webkit-text-fill-color: transparent;
  27.   margin: 0;
  28.   -webkit-animation: BackgroundAnimated 15s linear infinite;
  29.   -moz-animation: BackgroundAnimated 15s linear infinite;
  30.   -ms-animation: BackgroundAnimated 15s linear infinite;
  31.   -o-animation: BackgroundAnimated 15s linear infinite;
  32.   animation: BackgroundAnimated 15s linear infinite;
  33. }

  34. @keyframes BackgroundAnimated {
  35. from {
  36.     background-position:0 0
  37. }

  38. to {
  39.     background-position:100% 0
  40. }
  41. }

  42. @-webkit-keyframes BackgroundAnimated {
  43. from {
  44.     background-position:0 0
  45. }

  46. to {
  47.     background-position:100% 0
  48. }
  49. }

  50. @-ms-keyframes BackgroundAnimated {
  51. from {
  52.     background-position:0 0
  53. }

  54. to {
  55.     background-position:100% 0
  56. }
  57. }

  58. @-moz-keyframes BackgroundAnimated {
  59. from {
  60.     background-position:0 0
  61. }

  62. to {
  63.     background-position:100% 0
  64. }
  65. }
复制代码
返回列表