本帖最後由 rainbow 於 2018-8-27 21:27 編輯
流光字
(此代码只在Chrome浏览器上才能显示流光效果)
- <p align="center"><span class="text">流光字</span></p>
- <style type="text/css">
- .text{
- width: 300px;
- height: 100px;
- position: relative;
- 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%);
- -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
- -webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */
- -webkit-background-size: 200% 100%;
- -webkit-animation: masked-animation 4s linear infinite;
- font-size: 60px;letter-spacing:20px;font-weight:bold;font-family:Microsoft YaHei;
- }
- @keyframes masked-animation {
- 0% {
- background-position: 0 0;
- }
- 100% {
- background-position: -100% 0;
- }
- </style>
複製代碼
|