html如何让字体自动变色,CSS使文字部分变色
思路
思路很简单,就是一个字写两遍,一个字只显示部分,不过不能真的把一个字写两遍。这里就需要用到CSS伪元素:before和:after,记住这个“伪元素”的“伪”字,表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符,只显示半个,而原字符显示另外一半,最后把它们拼成一个字。
CSS Code
[css].hf {
display: inline-block;
font-size: 80px;
line-height:80px;
color: #000;
position: relative;
overflow: hidden;
white-space: pre;/* 处理空格 */
}
.hf:before {
position: absolute;
left: 0;
top: 0;
color: #f00;
display: block;
width: 30%;/*如果想变色一半文字,就设置50%*/
content: attr(data-content);/* 伪元素的动态获取内容 */
overflow: hidden;
}
[/css]
HTML Code
[html] W
e
b
前
端
[/html]
html如何让字体自动变色,CSS使文字部分变色相关推荐
- html文字超链接不让变色,css不让超链接变色怎么设置?
[相关推荐:css在线手册] 链接有四个状态a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被 ...
- html 点击选择变色,css实现选中后变色并且效果不消失
我在vue项目里面.想实现以下效果: css实现选中后变色并且效果不消失. 我用了伪类.点击之后.确实会变色. 但是只是在鼠标点下去那一瞬间会变色. 当鼠标点完之后.效果就消失了. 我的代码: {{ ...
- CSS 使文字纵向排列的七种方
下面分享一下使文字纵排列的几种方法: 第一种方法:"<br>"标签 <h1> N E T T U T S </h1> 这种方法没有说服力,不推荐 ...
- web前端字体居中_css怎样使文字居中?
在CSS中,可以使用text-align属性来使文字水平居中:使用line-height属性来使单行文字垂直居中.使用vertical-align:middle +display:table-cell ...
- html中文字过长 自动隐藏,css 实现文字过长自动隐藏功能
单行 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行(兼容各个浏览器)//通过覆盖最后几个字的形式 p{ posi ...
- html字体圆点6,css设置文字溢出也可以这样
.笨办法(也是最有效的):margin负值定位法--兼容所有主流浏览器 这是一个比较短的文字. - 这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示. - HTML部分: class=&qu ...
- html/css使文字图片div在整个网页上居中(水平居中+垂直居中)transform属性配置
在使用html/css编写网页时,有时需要让一段文字或图片等在整个网页居中,即既是水平居中又是垂直居中,而单单使用 text-align:center 只是让文字在水平上居中,而无法在垂直方向上也居中 ...
- html 字前边自动加点,css实现文字越界加点点点显示,并且后面紧跟一个图标
文字越界添加...显比抖朋要插支一圈不者地示 在HTML页面上,会遇到当文字长度超出一定长度的时候,将超出的部分显示为...的情况,这个功能很好实现,很多人都可以直接写出来. 示例代码: .demo ...
- php字体闪烁,怎么纯用css代码使文字展示闪动效果?(代码示例)
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
最新文章
- 加载服务器版本信息,传奇服务器端启动加载错误的解决方法
- python官网下载步骤linux-官方下载python源码,编译linux版本的python
- 2021-02-07 接口测试工具-Postman使用详解
- Oracle之SQL分析函数
- elementui可编辑单元格_ElementUI 表格可编辑单元格
- 江西小学计算机说课稿,2019江西教师招聘面试-小学数学-说课稿
- Qt实践录:TCP网络调试助手
- 华为AP3010DN-AGN升级为胖AP
- 数据结构与算法之单链表
- c 复杂的前置后置面试题_练一练!3道经典嵌入式C 面试题,答案在文末
- ubuntu16.04中将python3设置为默认
- matlab安装软件 Matlab视频教程李大勇 MATLAB程序开发入门课程 MATLAB神经网络30个案例分析及源程序
- 135编辑器html点击图片播放音乐,135编辑器怎么给文章添加音频和视频?135编辑器给文章添加音频和视频教程...
- Android为页面添加水印
- PHP资源汇总,内容包括:库、框架、模板等
- 5、异步流(Asynchronous Flow)
- 阔别母校35年!院士,履新北大!
- 每个程序员都应该知道的GitHub Repos
- android 同根动画_[转载]Android anim动画切换效果
- 什么事aop,aop的作用是什么?aop在项目哪里使用到了
热门文章
- b 树查找时间复杂度_你心里是没点B树吗?
- MySql中关于某列中相同数值连续出现次数的统计
- JAVA取钱多线程实验_JAVA多线程----用--取钱问题2
- Python应用实战-Python爬取4000+股票数据,并用plotly绘制了树状热力图(treemap)
- ajax 页面无刷新,Ajax的页面无刷新实现详解(附代码)
- mongodb 监控权限_运维监控产品分析篇
- BurpSuite插件 -- Struts2-RCE
- jQuery应用实例2:简单动画
- 正则表达式验证问题(用户名、密码、email、身份证
- 浏览器缓存原理以及本地存储