本文介绍如何使用CSS3实现图片背景填充文字并做成动画效果。

demodownload

完整HTML代码

<html>
 
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    div {
        margin: auto;
        width: 800px;
        height: 300px;
        line-height: 300px;
        text-align: center;
        font-size: 150px;
        font-weight: bold;
        color: transparent;
        background: url(1.jpg);
        -webkit-background-clip: text;
        animation: animate 8s ease 500ms infinite;
    }
    /* 定义关键帧 */
    
    @keyframes animate {
        from {
            background-size: 50%;
        }
        to {
            background-size: 20%;
        }
    </style>
</head>
 
<body>
    <div> 卡卡网 </div>
    <div> WebKaka </div>
</body>
 
</html>

代码解释

本实例代码很少，理解起来比较容易。

HTML只有一个DIV标签。

CSS有3个属性起关键作用：

1、-webkit-background-clip: text; 该属性作用是把图片背景裁剪到文字。

2、color: transparent; 这句也很重要，文字颜色设为透明，才能使得文字显示图片背景。

3、animation 动画属性，它能让文字背景动起来。

相关文章

  • CSS3背景图片填充文字【实例演示/源码下载】
  • CSS3实现段落第一个文字放大【实例演示/源码下载】
  • 3行CSS代码实现文字镂空(动画)效果【演示/源码下载】
  • 纯CSS 6款文字动画(跳动、浮动、转动、翻转、碰撞)
  • 如何使用CSS为文本添加渐变叠加【实例】
  • css3实现的彩色渐变描边文字效果
  • 纯CSS实现文字渐变和文字扫光动画效果
  • CSS实现文字颜色渐变效果
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。