HTML5----CSS显示半个字符

CSS显示半个字符的基本思路：

就是一个字写两遍，分别显示一半。这里就须要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置同样的字符，仅仅显示半个，而原字符显示另外一半，最后把它们拼成一个字。

效果图：

CSS:

<style type="text/css">
.halfStyle {position:relative;display:inline-block;font-size:100px; /*  不论什么宽度都能够 */color: black; /* 不论什么颜色，或透明 */overflow:hidden;white-space: pre; /* 处理空格 */font-family:Microsoft YaHei;font-weight:bold;
}
.halfStyle:before {display:block;z-index:1;position:absolute;top:0;left:0;width: 50%;content: attr(data-content); /* 伪元素的动态获取内容 */overflow:hidden;color: #f00;
}
</style>

HTML:

<span class="halfStyle" data-content="到">到</span>
<span class="halfStyle" data-content="此">此</span>
<span class="halfStyle" data-content="一">一</span>
<span class="halfStyle" data-content="游">游</span>

HTML5----CSS显示半个字符相关推荐

网站服务器的极简制作与搭建（HTML5+CSS+javascript+NodeJS）
本文致力于使得较有经验的程序员能够在一天之内了解网站搭建制作的基本知识,尽快制作出可以展示用的demo. 具体地,笔者为了完成大作业,需要搭建一个搜索引擎的网站,仅仅作为展示的demo,并不对原创性 ...
HTML5 CSS学习笔记
最新前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程_哔哩哔哩_bilibili 代码地址:HTML5+CSS: 用于学习.练习前端的相关知识. 目录 HTML 1.html ...
HTML5+CSS——Day1
HTML5+CSS--Day1 HTML5概述 1.什么是HTML 2.HTML5是什么常用前端开发工具介绍 VS Code安装 web基础概述网站的构成页面的构成 B/S和C/S 常见互联网名 ...
html框架有什么作用,使用HTML5+CSS+JS框架有那些好处
使用HTML5+CSS+JS框架有那些好处 2017-12-08 相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架.CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么 ...
web网页设计实例作业 HTML5+CSS大作业——简单的个人图片网站(6页)
HTML5+CSS大作业--简单的个人图片网站(6页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
视频教程-HTML + CSS零基础经典教程系列-HTML5/CSS
HTML + CSS零基础经典教程系列全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node.JS.PHP.Ja ...
打地鼠小游戏（HTML5+CSS+JS）
打地鼠小游戏(HTML5+CSS+JS) 文章目录打地鼠小游戏(HTML5+CSS+JS) 预设有两个文件(htlm和css)加一个文件夹(放图片) 设置基本界面 (1)背景图 (2)开始按钮 (3 ...
学生网页设计与制作成品 HTML5+CSS大作业——黑色主题个人博客(5页) 网页设计期末作业个人主页
HTML5+CSS大作业--黑色主题个人博客(5页) 网页设计期末作业个人主页常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. ...
视频教程-HTML5进阶提升与案例开发视频课程-HTML5/CSS
HTML5进阶提升与案例开发视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3.jQuery ...

HTML5----CSS显示半个字符

HTML5----CSS显示半个字符相关推荐

最新文章

热门文章