文字渐变css动画

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

最近在学习一些设计知识,看到为了鼓励用户与网页进行交互,可以设计一些渐变的字体来吸引用户的注意,从而使得用户在读取网页的内容以后,如果用户觉得要么解决了问题,要么获得了知识,要么啥都没有得到,需要鼓励网站的开发人员更加努力,设计出更好的网页。

不多说啦,我们来看看用到的知识:

使用的属性

background-clip 属性规定背景的绘制区域
background: linear-gradient();线性颜色背景
@keyframeskeyframes动画

 

代码例子

html内容

<div class="text">
    <h1>这是一段渐变的文字</h1>
</div>

css内容

.text{
     background: linear-gradient(90deg, rgba(131,58,180,1) 0%, 
      		rgba(253,29,29,1) 33.3%, 
      		rgba(252,176,69,1) 66.6%, 
      		rgba(131,58,180,1) 100%);
     -webkit-background-clip: text; /*截取背景区域为文字*/
     color: transparent;
     background-size: 300% 100%; /*扩大背景区域*/  
     animation: text 4s infinite linear;
}
@keyframes text{
     0%  { background-position: 0 0;}
   100% { background-position: -150% 0;}
}

最终结果

原理

使用background: linear-gradient()设置线性背景,通过-webkit-background-clip: text;只截取文字部分的背景,color: transparent;文字颜色透明,文字就会显示出来线性的背景颜色,此时background-size: 300% 100%;扩大横向背景区域。再添加动画动态的显示不同的背景区域,给人视觉上文字颜色在变化,实际上是文字透明背景透过文字在变。

 

注意:这里我没有贴出完整的html页面,而是分成两个部分,希望大家能够动手敲一下代码,这样收获会更多。

版权声明:著作权归作者所有。

相关推荐

iOS动态改变App Icon

从iOS10.3开始,苹果就支持了开发者通过编程来动态改变app的icon。这里简单介绍下如何动态改变app icon。首先要了解一下三个属性/api:var supportsAlternateIcons: Bool { get } var alternateIconName: String? { 

使用RecyclerView和LayoutAnimation给列表添加进入动画

这里讲解下使用RecyclerView和LayoutAnimation给列表添加进入动画。分为三个步骤:给列表项添加动画使用列表项的动画定义LayoutAnimationRecyclerView应用LayoutAnimation的动画使用LayoutAnimation定义动画的好处是,它是单独定义,可以应用于任何ViewGroup的子类。这里是以RecyclerView为示例。示例效果示例是一个向

[译]5分钟内学习CSS变量

CSS自定义属性(也称为变量)对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS,从而减少重复,代码更可读以及更灵活。另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中,我会给你一个关于这种新技术如何工作的速成课程。我还创建了一个免费的关于CSS变量的课程,它

如何使用CSS变量让响应式变得超级简单

本文是关于如何在2018年创建响应式网站的快速教程。如果你之前没有听说过CSS变量,它就是CSS的新增功能,它让你可以在样式里使用变量的功能,而无需进行任何设置。实质上,CSS变量允许你跳过设置样式的旧方式:h1 {   font-size: 30px; } navbar > a {   font-si

CSS设置placeholder字体样式

CSS标准里是没有直接对placeholder设置样式的选择器,这里主要是通过各个浏览器的兼容前缀来给输入框的placeholder设置字体样式。/* WebKit browsers*/  input::-webkit-input-placeholder {    color:#999;     font-s

[译]CSS变量实现酷炫的悬停效果

我最近受Grover网站上有趣悬停动画的启发。 将鼠标移动到订阅按钮上可以显示光标移动后的彩色渐变。 这个想法很简单,但效果是按钮会脱颖而出,并得到点击。我们怎样才能达到类似的效果,让我们的网站脱颖而出呢? 其实,它不像你想象的那么难!跟踪位置我们首先要获取鼠标的位置。document.querySelector('.button').onmousemove 

CSS应用苹果的San Francisco字体

优先选择苹果字体,并兼容其它平台的字体。font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,"Helvetica Neue",Arial,sans-serif;

IDEA启动tomcat,日志中文字符有乱码“淇℃伅”

新安装了IDEA,集成Tomcat。启动时,日志的中文变成了乱码:15-Mar-2020 11:15:56.143 淇℃伅 [main] org.apache.catalina.startup.VersionLoggerListener.log Server.鏈嶅姟鍣ㄧ増鏈�: Apache Tomcat/9.0.2215-Mar-2020 11:15:56.148 淇℃伅 [mai

CSS三栏布局——浮动

不使用定位,只使用浮动实现左右固定,中间宽度自适应布局实现关键:自适应部分一定要放在第一个位置,使用浮动,且宽度设置为100%,如果不设置为100%,浮动元素内容不够撑开整个宽度。左右固定部位,使用margin-left :负数,使其左右靠齐。中间自适应部分嵌套一个div,设置margin-left 和 margin-right 使其空出左右固定的宽度。代码如下:<!DOCTYPE HTML