<!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. IDEA使用@Data注解，类调用get、set方法标红的解决办法

    1.在setting中,下载lombok插件,安装完成后重启idea

  2. VsCode 解决vim插件，不能使用ctrl+c的问题(目标卸载im)

    VsCode中,使用VIM插件后,ctrl+c不能用 可以通过 File -> Preference -> Settings中   vim.useCtrlKeys 选项设置为 false ...

  3. spark 机器学习 决策树 原理(一)

    1.什么是决策树 决策树(decision tree)是一个树结构(可以是二叉树或者非二叉树).决策树分为分类树和回归树两种,分类树对离散变量做决策树,回归树对连续变量做决策树. 其中每个非叶节点表示 ...

  4. KVM虚拟化之嵌套虚拟化nested

    本文测试物理机为centos6.5 物理机使用Intel-V虚拟化架构,安装qemu-kvm版本0.12 我们知道,在Intel处理器上,KVM使用Intel的vmx(virtul machine e ...

  5. 设置Django生产环境系统重启后的自动启动项

    前面,作者已经介绍了把Django部署到生产环境中的主要方法,现在我们来看一下如何设置项目开机启动. 在把Django项目部署到生产环境中时,我们前面使用安装包和源码安装了Nginx.uwsgi.re ...

  6. 白话解说TCP/IP协议三次握手和四次挥手

    白话解说TCP/IP协议三次握手和四次挥手 1.背景 和女朋友异地恋一年多,为了保持感情我提议每天晚上视频聊天一次. 从好上开始,到现在,一年多也算坚持下来了. 1.1.问题 有时候聊天的过程中,我的 ...

  7. MINST样例数据的神经网络学习

    标准的入门学习示例, 比一年前看的那书,更有感觉了. # coding: utf-8 try: import urllib.request except ImportError: raise Impo ...

  8. JavaScript 进阶问题列表

    https://github.com/lydiahallie/javascript-questions/blob/master/zh-CN/README-zh_CN.md 很考基本功

  9. spring boot学习笔记（二）创建spring boot项目

    用eclipse(需要用高版本,要不然弄不出来):new →Spring Sarter Project 用IDEA:一般默认 一般默认 入门级的先 剩下的一般默认... 一.项目至少有下面的东西,里面 ...

  10. 行为型模式(二) 命令模式（Command）

    一.动机(Motivate) 在我们的现实生活中有很多例子可以拿来说明这个模式,我们还拿吃饺子这个事情来说.我的奶奶说了,今天想吃饺子,发出了命令,然后我奶奶就去看电视去了.我们夫妻俩收到命令就开始和 ...