首页 IT技术内容详情

7款漂亮的纯css字体样式

2021-12-14 52816 小付

这里写图片描述
简单粗暴,直接上马:

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <title></title>

  6. </head>

  7. <body>

  8. <h1 class="vintage1">美丽的中国语</h1>

  9. <h1 class="vintage2">美丽的中国语</h1>

  10. <h1 class="vintage3">美丽的中国语</h1>

  11. <h1 class="vintage4">美丽的中国语</h1>

  12. <h1 class="vintage5">美丽的中国语</h1>

  13. <h1 class='text-reflect-base'>美丽的中国语</h1>

  14. <div class="text">

  15. <p>美丽的中国语</p>

  16. </div>

  17. <style>

  18. body{

  19. text-align: center;

  20. }

  21. .vintage1{

  22. background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;

  23. text-shadow: 5px -5px black, 4px -4px white;

  24. font-weight: bold;

  25. -webkit-text-fill-color: transparent;

  26. -webkit-background-clip: text }

  27. .vintage2{

  28. color: transparent;

  29. -webkit-text-stroke: 1px red;

  30. letter-spacing: 0.04em;}

  31. .vintage3 {

  32. color: transparent;

  33. background-color : blue;

  34. text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;

  35. -webkit-background-clip : text;

  36. }

  37. .vintage4{

  38. color: gold;

  39. letter-spacing: 0;

  40. text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }

  41. .vintage5{

  42. font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink

  43. }

  44. .text-reflect-base{

  45. color: palegreen;

  46. -webkit-box-reflect:below 10px;

  47. }

  48. .text{

  49. width: 300px;

  50. height: 200px;

  51. position: absolute;

  52. left: 50%;

  53. margin-left: -150px;

  54. background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);

  55. -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */

  56. -webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */

  57. -webkit-background-size: 200% 100%;

  58. -webkit-animation: masked-animation 4s linear infinite;

  59. font-size: 35px;

  60. }

  61. @keyframes masked-animation {

  62. 0% {

  63. background-position: 0  0;

  64. }

  65. 100% {

  66. background-position: -100%  0;

  67. }

  68. }

  69. </style>

  70. </body>

  71. </html>


 暂无评论,快来抢沙发吧~

发布评论