<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

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

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

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

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

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

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

        <div class="text">

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

        </div>

<style>

body{

    text-align: center;

}

.vintage1{

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

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

font-weight: bold;

-webkit-text-fill-color: transparent;

-webkit-background-clip: text }

.vintage2{

color: transparent;

-webkit-text-stroke: 1px red;

letter-spacing: 0.04em;}

.vintage3 {

color: transparent;

background-color : blue;

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

-webkit-background-clip : text;

}

.vintage4{

color: gold;

letter-spacing: 0;

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 }

.vintage5{

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

}

.text-reflect-base{

    color: palegreen;

    -webkit-box-reflect:below 10px;

}

.text{

    width: 300px;

    height: 200px;

    position: absolute;

    left: 50%;

    margin-left: -150px;

    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: 35px;

}

@keyframes masked-animation {

    0% {

        background-position: 0  0;

    }

    100% {

        background-position: -100%  0;

    }

}

        </style>

    </body>

</html>

7中漂亮的纯css字体的更多相关文章

  1. 进阶篇之纯css+字体实现五角星（半颗星）评分

    1.前言 之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体+css实现! ...

  2. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

  3. 一款纯css实现的漂亮导航

    今天给大家分享一款纯css实现的漂亮导航.之前为大家分享过jquery实现的个人中心导航菜单,今天这款也是适合放在个人中心.还带来图标,效果不错.一起看下效果图: 在线预览   源码下载 实现的代码. ...

  4. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  6. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  7. CSS 魔法系列：纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. CSS 魔法系列：纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  9. CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. Redis之RDB和AOF持久化介绍

    什么是数据库状态 redis是一个键值对的数据库服务器,服务器中通常包含中任意个非空的数据库,而每个数据库又可以包含任意个键值对,为了方便起见,我们将服务器中的非空数据库以及他们的键值对统称为数据库状 ...

  2. 如何在 WPF 中获取所有已经显式赋过值的依赖项属性

    原文:如何在 WPF 中获取所有已经显式赋过值的依赖项属性 获取 WPF 的依赖项属性的值时,会依照优先级去各个级别获取.这样,无论你什么时候去获取依赖项属性,都至少是有一个有效值的.有什么方法可以获 ...

  3. treeMultiselect 去掉勾选项

    场景描述:弹窗,显示树形结构,节点层次可变(可只有一级节点,也可是多级节点),限制只能选择一个节点! 1.修改jquery.tree-multiselect.min.js 文件 2.前台页面 参考代码 ...

  4. mtd设备操作、jffs2

    安装mtd相关命令 手动安装mtd-utils,根据系统自行选择 mtd交叉编译:https://blog.csdn.net/zhangxuechao_/article/details/5212442 ...

  5. 笔谈runloop（一）

    关于runloop熟悉而又陌生,熟悉的是在iOS开发的过程中线程的执行就跟runloop扯上关系了,陌生的是runloop到底是个什么东西.去公司面试的时候,很多公司的面试人员会问这个问题.runlo ...

  6. SpringBoot+SpringCloud+vue+Element开发项目——搭建开发环境

    1.新建一个项目

  7. Discuz!数据库操作DB类和C::t类介绍

    类定义文件 DB类: 文件\source\class\class_core.php class DB extends discuz_database {} discuz_database类定义 文件\ ...

  8. Altium designer 如何将2D PCB转换成3D

    点击键盘数字键的3,即可,2键可以切换回2D效果,但是如果要看元器件的3D效果,那么元器件封装必须带有3D模型才行! 先按3切换到三维界面,然后按住shift不放,按鼠标右键调整视图角度.

  9. 使用Cloudera Manager部署HUE

    使用Cloudera Manager部署HUE 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   一.添加HUE服务 1>.进入CM服务安装向导 2>.选择需要安装的h ...

  10. 基于Java+Selenium的WebUI自动化测试框架（十一）-----读取Excel文件（POI）（1）

    上一篇说了利用JXL的jar包来读取Excel的代码.在Java中,还可以用另外一种jar包来读取Excel的内容,那就是Apache的POI. 这里和之前一样,需要导入POI的jar包,建议导入这三 ...