HTML/CSS[24天] background-clip实现文字遮罩效果

0

[24天] background-clip实现文字遮罩效果

阅读:31 时间:2022年06月09日

前言这真是一个屌炸天的新属性,可以发挥想像实现各种镂空效果。目前还没有被所有浏览器支持,Chrome需要添加-webkit-前辍。开胃小菜全文颜色渐变代码超简单:<!DOCTYPE html> <html lang="e...

前言

这真是一个屌炸天的新属性,可以发挥想像实现各种镂空效果。目前还没有被所有浏览器支持,Chrome需要添加-webkit-前辍。

开胃小菜全文颜色渐变

微信截图_20220610153619.jpg

代码超简单:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text {
      color: transparent;
      background: linear-gradient(45deg, red, blue);
      background-size: 100% 100%;
      -webkit-background-clip: text;
    }
  </style>
</head>
<body>
<div class="text">
  <h3>滕王阁序</h3>
  <p>豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,高朋满座。腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路出名区;童子何知,躬逢胜饯。(豫章故郡 一作:南昌故郡;青霜 一作:清霜)</p>
  <p>时维九月,序属三秋。潦水尽而寒潭清,烟光凝而暮山紫。俨骖騑于上路,访风景于崇阿。临帝子之长洲,得天人之旧馆。层峦耸翠,上出重霄;飞阁流丹,下临无地。鹤汀凫渚,穷岛屿之萦回;桂殿兰宫,即冈峦之体势。(天人 一作:仙人;层峦 一作:层台;即冈 一作:列冈;飞阁流丹 一作:飞阁翔丹)</p>
  <p>披绣闼,俯雕甍,山原旷其盈视,川泽纡其骇瞩。闾阎扑地,钟鸣鼎食之家;舸舰弥津,青雀黄龙之舳。云销雨霁,彩彻区明。落霞与孤鹜齐飞,秋水共长天一色。渔舟唱晚,响穷彭蠡之滨,雁阵惊寒,声断衡阳之浦。(轴 通:舳;迷津 一作:弥津;云销雨霁,彩彻区明 一作:虹销雨霁,彩彻云衢)</p>
  <p>遥襟甫畅,逸兴遄飞。爽籁发而清风生,纤歌凝而白云遏。睢园绿竹,气凌彭泽之樽;邺水朱华,光照临川之笔。四美具,二难并。穷睇眄于中天,极娱游于暇日。天高地迥,觉宇宙之无穷;兴尽悲来,识盈虚之有数。望长安于日下,目吴会于云间。地势极而南溟深,天柱高而北辰远。关山难越,谁悲失路之人;萍水相逢,尽是他乡之客。怀帝阍而不见,奉宣室以何年?(遥襟甫畅 一作:遥吟俯畅)</p>
  <p>嗟乎!时运不齐,命途多舛。冯唐易老,李广难封。屈贾谊于长沙,非无圣主;窜梁鸿于海曲,岂乏明时?所赖君子见机,达人知命。老当益壮,宁移白首之心?穷且益坚,不坠青云之志。酌贪泉而觉爽,处涸辙以犹欢。北海虽赊,扶摇可接;东隅已逝,桑榆非晚。孟尝高洁,空余报国之情;阮籍猖狂,岂效穷途之哭!(见机 一作:安贫;以犹欢 一作:而相欢)</p>
  <p>勃,三尺微命,一介书生。无路请缨,等终军之弱冠;有怀投笔,慕宗悫之长风。舍簪笏于百龄,奉晨昏于万里。非谢家之宝树,接孟氏之芳邻。他日趋庭,叨陪鲤对;今兹捧袂,喜托龙门。杨意不逢,抚凌云而自惜;钟期既遇,奏流水以何惭?</p>
  <p>呜呼!胜地不常,盛筵难再;兰亭已矣,梓泽丘墟。临别赠言,幸承恩于伟饯;登高作赋,是所望于群公。敢竭鄙怀,恭疏短引;一言均赋,四韵俱成。请洒潘江,各倾陆海云尔。<br>  滕王高阁临江渚,佩玉鸣鸾罢歌舞。<br>  画栋朝飞南浦云,珠帘暮卷西山雨。<br>  闲云潭影日悠悠,物换星移几度秋。<br>  阁中帝子今何在?槛外长江空自流。</p>
</div>
</body>
</html>

彩虹灯文字效果:

chrome-capture (11).gif

只是在上例上加了背景渐变动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes linears{
      0%{
        background-position: -100% 0;
      }
      100%{
        background-position: 100% 0;
      }
    }
    .text {
      color: transparent;
      background-image: linear-gradient(90deg, red, blue, red);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      animation: linears 2s linear infinite;
      display: inline-block;
    }
  </style>
</head>
<body>
<p class="text">落霞与孤鹜齐飞,秋水共长天一色。</p>
</body>
</html>

继续深入,用一张GIF图片做为背景怎么样?

文字中的图片

chrome-capture (13).gif

是不是很神奇?仍然是那几行css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text {
      color: transparent;
      background: url(./1.gif) center top no-repeat;
      background-size: cover auto;
      -webkit-background-clip: text;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="text">
    <h3>滕王阁序</h3>
    <p>豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,高朋满座。腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路出名区;童子何知,躬逢胜饯。(豫章故郡 一作:南昌故郡;青霜 一作:清霜)</p>
    <p>时维九月,序属三秋。潦水尽而寒潭清,烟光凝而暮山紫。俨骖騑于上路,访风景于崇阿。临帝子之长洲,得天人之旧馆。层峦耸翠,上出重霄;飞阁流丹,下临无地。鹤汀凫渚,穷岛屿之萦回;桂殿兰宫,即冈峦之体势。(天人 一作:仙人;层峦 一作:层台;即冈 一作:列冈;飞阁流丹 一作:飞阁翔丹)</p>
    <p>披绣闼,俯雕甍,山原旷其盈视,川泽纡其骇瞩。闾阎扑地,钟鸣鼎食之家;舸舰弥津,青雀黄龙之舳。云销雨霁,彩彻区明。落霞与孤鹜齐飞,秋水共长天一色。渔舟唱晚,响穷彭蠡之滨,雁阵惊寒,声断衡阳之浦。(轴 通:舳;迷津 一作:弥津;云销雨霁,彩彻区明 一作:虹销雨霁,彩彻云衢)</p>
    <p>遥襟甫畅,逸兴遄飞。爽籁发而清风生,纤歌凝而白云遏。睢园绿竹,气凌彭泽之樽;邺水朱华,光照临川之笔。四美具,二难并。穷睇眄于中天,极娱游于暇日。天高地迥,觉宇宙之无穷;兴尽悲来,识盈虚之有数。望长安于日下,目吴会于云间。地势极而南溟深,天柱高而北辰远。关山难越,谁悲失路之人;萍水相逢,尽是他乡之客。怀帝阍而不见,奉宣室以何年?(遥襟甫畅 一作:遥吟俯畅)</p>
    <p>嗟乎!时运不齐,命途多舛。冯唐易老,李广难封。屈贾谊于长沙,非无圣主;窜梁鸿于海曲,岂乏明时?所赖君子见机,达人知命。老当益壮,宁移白首之心?穷且益坚,不坠青云之志。酌贪泉而觉爽,处涸辙以犹欢。北海虽赊,扶摇可接;东隅已逝,桑榆非晚。孟尝高洁,空余报国之情;阮籍猖狂,岂效穷途之哭!(见机 一作:安贫;以犹欢 一作:而相欢)</p>
    <p>勃,三尺微命,一介书生。无路请缨,等终军之弱冠;有怀投笔,慕宗悫之长风。舍簪笏于百龄,奉晨昏于万里。非谢家之宝树,接孟氏之芳邻。他日趋庭,叨陪鲤对;今兹捧袂,喜托龙门。杨意不逢,抚凌云而自惜;钟期既遇,奏流水以何惭?</p>
    <p>呜呼!胜地不常,盛筵难再;兰亭已矣,梓泽丘墟。临别赠言,幸承恩于伟饯;登高作赋,是所望于群公。敢竭鄙怀,恭疏短引;一言均赋,四韵俱成。请洒潘江,各倾陆海云尔。<br>  滕王高阁临江渚,佩玉鸣鸾罢歌舞。<br>  画栋朝飞南浦云,珠帘暮卷西山雨。<br>  闲云潭影日悠悠,物换星移几度秋。<br>  阁中帝子今何在?槛外长江空自流。</p>
  </div>
</body>
</html>

还可以结合filter做出更多神奇的效果,自行想像吧。



发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^