<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <style>

        body,html{

            margin: 0;

            padding: 0;

            background-image: url("image/timg.jpg");

            background-repeat: no-repeat;

            background-size: cover;

        }

        .box{

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%,-50%);

        }

        .box h1{

            font-size: 100px;

            font-weight: 900;

            text-transform: uppercase;

            color:rgba(220, 210,154, 0.3);

            background-image: url("image/1.jpg");

            -webkit-background-clip:text;     /*background-clip 生效  颜色必须为透明状态的*/

            animation: a1 15s linear infinite;

        }

        @keyframes a1{

            100%{

                background-position: left 1000px; top: 0px;

            }

        }

    </style>

    <div class="box">

        <h1>animation</h1>

    </div>

</body>

</html>

html5+css3 background-clip 技巧的更多相关文章

  1. HTML5+CSS3整体回顾

    http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...

  2. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  3. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

  4. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  5. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

  6. 08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

  7. HTML5&CSS3练习笔记(二)

    HTML5&CSS3  练习CSS3伪选择器使用 1.first-line  格式:元素:first-line 说明:设置同一个标签下所有行内容的第一行的样式,例如: <table st ...

  8. HTML5&CSS3经典动态表格

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

    大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...

  10. Html5+css3+angularjs+jquery+webAPi 开发手机web（一）

    前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的 ...

随机推荐

  1. （三）java虚拟机内存管理和线程独占区和线程共享区

    一.内存管理 二.线程独占区之程序计数器(Program Counter Register) 程序计数器是一块较小的内存空间,它可以看做是当前线程所执行的字节码的行号指示器.在虚拟机的概念模型里,字节 ...

  2. Azure DevOps 利用rest api设置variable group

    我们在Azure DevOps中设置参数的时候,可以使用build,release各自的variables,但是各自的变量不能共用.此时我们需要使用variable group,它允许跨Build和R ...

  3. 入行IT的选择决定了日后走的路的长度和领域的深度

    前段时间和发小聊天时,他说了一句话我觉得很值得思考,送给大家:机遇大于努力,选择大于机遇. 一年前我毅然辞去了之前的工作,只身来到北京,正式成为了北漂的一员.对于我们现在的大环境下,其实北漂已经和以前 ...

  4. 移动架构-json解析框架

    JSON在现在数据传输中占据着重要地位,相比于xml,其解析和构成都要简单很多,第三方的解析框架也不胜枚举,这里之所以要自定义一个json解析框架,一方面是更好的了解json解析过程,另一方面是有时候 ...

  5. 项目中easyui-tooltip提示消息运用

    easyui datagrid tooltip 对数据增加: {field:'roomCode',title:'房间名称',width:100 ,formatter: function (value, ...

  6. Asp.Net Core文件上传

    文件上传功能在实际开发中经常使用,在 .Net Core中,文件上传接收类型不再使用 HttpPostedFile 或 HttpFileCollection来接收,而是使用 IFormFile 或 I ...

  7. php-fpm，cgi，fast-cgi，nginx，php.ini，php-fpm.conf，nginx.conf

    php-fpm.conf 是PHP-FPM特有的配置文件. php.ini 是所以php模式中必须的配置文件. 两者的区别是,php-fpm.conf 是PHP-FPM进程管理器的配置文件,php.i ...

  8. Selenium绕过登录的实现

    1.使用命令行启动Chrome:Mac:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome -remote-debugging ...

  9. 解读PHP面试-高并发解决方案类考察点

    整理自慕课网360大牛全面解读PHP面试 ,购买链接:https://coding.imooc.com/class/133.html 1.高并发和大流量解决方法 真题回顾 PHP如何解决高并发大流量问 ...

  10. 前端开发 — HTML

    HTML HTML 超文本标记语言 HTML特征: 对换行和空格不敏感 空白折叠 1.1 HTML标签 标签也称为标记. 标签的种类: 1.双闭合标签 2.单闭合标签 1.1.1 head标签 met ...