• css 实现文字渐变以及文字颜色流动

    文字渐变需要了解以下属性：

    background-image：背景色

    background-clip：此属性规定背景的绘制区域，有四个值：

    • border-box，背景被裁剪到边框盒。
    • padding-box，背景被裁剪到内边距框。
    • content-box，背景被裁剪到内容。
    • text，表示只显示文字区域。

    -webkit-text-fill-color：文字填充色，实现文字渐变色要展示的是背景的渐变颜色，所以这里我们需要设置为transparent(   寻常的- webki t-表示的是Chrome和Safari的私有属'性，但是它却声明了所有的，除了IE浏览器))

    -webkit-text-stroke:1px black;实现镂空文字（文字边框）

    详细可参考：[CSS] 🌈在字间流淌 | 第十二期_哔哩哔哩_bilibili

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			* {
    8. 				padding: 0;
    9. 				margin: 0;
    10. 			}
    11.  
    12. 			body {
    13. 				display: flex;
    14. 				height: 100vh;
    15. 				align-items: center;
    16. 				justify-content: center;
    17. 			}
    18.  
    19. 			p {
    20. 				font-size: 4vh;
    21. 				font-weight: 600;
    22. 				background-clip: text;
    23. 				-webkit-background-clip: text;
    24. 				/*这次的这句和以往不一样*/
    25. 				/* 以往是 考虑低版本浏览器*/
    26. 				/*这次就连最新版Chrome和Safari都得 */
    27. 				/*注意是background-clip: text;需要 */
    28. 				/*如果是: content啊之 类的就没这么苛刻的*/
    29. 				-webkit-text-fill-color: transparent;
    30. 				/*这个属性的- webkit前缀也比较特殊 */
    31. 				/*寻常的- webki t-表示的是Chrome和Safari的私有属'性*/
    32. 				/*但是它却声明了所有的(除了IE浏览器)*/
    33. 				background-image:
    34. 					linear-gradient(90deg,
    35. 						rgb(255, 167, 69),
    36. 						rgb(254, 134, 159),
    37. 						rgb(239, 122, 200),
    38. 						rgb(160, 131, 237),
    39. 						rgb(67, 174, 255),
    40. 						rgb(160, 131, 237),
    41. 						rgb(239, 122, 200),
    42. 						rgb(254, 134, 159),
    43. 						rgb(255, 167, 69));
    44. 				background-size: 200%;				
    45. 			}
    46.  
    47. 			p:hover {
    48. 				animation: streamer 2s linear infinite;
    49. 			}
    50.  
    51. 			@keyframes streamer {
    52. 				0% {
    53. 					background-position: 0%;
    54. 				}
    55.  
    56. 				100% {
    57. 					background-position: 200%;
    58. 				}
    59. 			}
    60. 		style>
    61. 	head>
    62. 	<body>
    63. 		<p>何以与君识，无言泪千行p>
    64. 	body>
    65. html>
  • 相关阅读:
    GBase 8a之gbase_hdfs_protocol参数
    m=m++到底发生了什么
    热重分析（TGA）真空试验中的真空度精密控制解决方案
    typescript16-void
    TikTok心理学：短视频如何触发情感共鸣？
    【C语言】文件操作
    RocketMQ 5.0 vs 4.9.X 图解架构对比
    2022 年度优秀开源技术
    [Git][多人协作][下]详细讲解
    【BOOST C++ 线程】boost::thread库的基本使用方法总结
  • 原文地址：https://blog.csdn.net/chaseqrr/article/details/126415113