这篇文章主要介绍了纯CSS实现设置半个字符的样式,分别实现了水平和垂直一半、水平和垂直三分之一等效果,需要的朋友可以参考下。
在stackoverflow上看到的问题怎么给半个字符设置样式，很多大神给出了答案。我就等就来学习围观吧。
一：基本解决方案：
html:
代码如下:
<spanclass=”halfStyle”data-content=”X”>X</span>
<spanclass=”halfStyle”data-content=”Y”>Y</span>
<spanclass=”halfStyle”data-content=”Z”>Z</span>
<spanclass=”halfStyle”data-content=”A”>A</span>
css:
代码如下:
.halfStyle{
position:relative;
display:inline-block;
font-size:80px;/*oranyfontsizewillwork*/
color:black;/*ortransparent,anycolor*/
overflow:hidden;
white-space:pre;/*topreservethespacesfromcollapsing*/
}
.halfStyle:before{
display:block;
z-index:1;
position:absolute;
top:0;
left:0;
width:50%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
color:#f00;
}
效果如图：
这种方法用于任何动态文本或单个字符，并且都是自动适用的。所有你需要做的就是在目标文本上添加一个class，剩下的就解决了。
同时，保留了原文的可访问性，可以被盲人或视障人士使用的屏幕阅读器识别。
单个字符的实现：
纯CSS。所有你需要做的就是把.halfStyleclass用在每个你想要渲染一半样式字符的元素上。
对于每个包含字符的span元素，你可以添加一个data属性，比如data-content=”X”，并且在伪元素上使用content:attr(data-content)；这样，.halfStyle:beforeclass将会是动态的，你不需要为每个实例进行硬编码
以下其它效果自行测试了。。。
二：左右开弓，两边都设置样式
更改CSS:
代码如下:
.halfStyle{
position:relative;
display:inline-block;
font-size:80px;/*oranyfontsizewillwork*/
color:transparent;/*hidethebasecharacter*/
overflow:hidden;
white-space:pre;/*topreservethespacesfromcollapsing*/
}
.halfStyle:before{/*createstheleftpart*/
display:block;
z-index:1;
position:absolute;
top:0;
width:50%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
pointer-events:none;/*sothebasecharisselectablebymouse*/
color:#f00;/*fordemopurposes*/
text-shadow:2px-2px0px#af0;/*fordemopurposes*/
}
.halfStyle:after{/*createstherightpart*/
display:block;
direction:rtl;/*veryimportant,willmakethewidthtostartfromright*/
position:absolute;
z-index:2;
top:0;
left:50%;
width:50%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
pointer-events:none;/*sothebasecharisselectablebymouse*/
color:#000;/*fordemopurposes*/
text-shadow:2px2px0px#0af;/*fordemopurposes*/
}
三：设置水平一半的样式
CSS:
代码如下:
.halfStyle{
position:relative;
display:inline-block;
font-size:80px;/*oranyfontsizewillwork*/
color:transparent;/*hidethebasecharacter*/
overflow:hidden;
white-space:pre;/*topreservethespacesfromcollapsing*/
}
.halfStyle:before{/*createsthetoppart*/
display:block;
z-index:2;
position:absolute;
top:0;
height:50%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
pointer-events:none;/*sothebasecharisselectablebymouse*/
color:#f00;/*fordemopurposes*/
text-shadow:2px-2px0px#af0;/*fordemopurposes*/
}
.halfStyle:after{/*createsthebottompart*/
display:block;
position:absolute;
z-index:1;
top:0;
height:100%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
pointer-events:none;/*sothebasecharisselectablebymouse*/
color:#000;/*fordemopurposes*/
text-shadow:2px2px0px#0af;/*fordemopurposes*/
}
四：水平三分之一的样式
css:
代码如下:
.halfStyle{/*basecharandalsothebottom1/3*/
position:relative;
display:inline-block;
font-size:80px;/*oranyfontsizewillwork*/
color:transparent;
overflow:hidden;
white-space:pre;/*topreservethespacesfromcollapsing*/
color:#f0f;
text-shadow:2px2px0px#0af;/*fordemopurposes*/
}
.halfStyle:before{/*createsthetop1/3*/
display:block;
z-index:2;
position:absolute;
top:0;
height:33.33%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
pointer-events:none;/*sothebasecharisselectablebymouse*/
color:#f00;/*fordemopurposes*/
text-shadow:2px-2px0px#fa0;/*fordemopurposes*/
}
.halfStyle:after{/*createsthemiddle1/3*/
display:block;
position:absolute;
z-index:1;
top:0;
height:66.66%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
pointer-events:none;/*sothebasecharisselectablebymouse*/
color:#000;/*fordemopurposes*/
text-shadow:2px2px0px#af0;/*fordemopurposes*/
}
五：垂直三分之的样式
css:
代码如下:
.halfStyle{/*basecharandalsotheright1/3*/
position:relative;
display:inline-block;
font-size:80px;/*oranyfontsizewillwork*/
color:transparent;/*hidethebasecharacter*/
overflow:hidden;
white-space:pre;/*topreservethespacesfromcollapsing*/
color:#f0f;/*fordemopurposes*/
text-shadow:2px2px0px#0af;/*fordemopurposes*/
}
.halfStyle:before{/*createstheleft1/3*/
display:block;
z-index:2;
position:absolute;
top:0;
width:33.33%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
pointer-events:none;/*sothebasecharisselectablebymouse*/
color:#f00;/*fordemopurposes*/
text-shadow:2px-2px0px#af0;/*fordemopurposes*/
}
.halfStyle:after{/*createsthemiddle1/3*/
display:block;
z-index:1;
position:absolute;
top:0;
width:66.66%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
pointer-events:none;/*sothebasecharisselectablebymouse*/
color:#000;/*fordemopurposes*/
text-shadow:2px2px0px#af0;/*fordemopurposes*/
}
- 高二英语听力技巧
- 高二英语作文100词左右
- 高二英语作文范文2021
- 高二的英语作文范文2021
- 高二英语阅读理解怎么做
- 高二英语的学习方法建议
- 高二提升英语成绩的方法
- 高二英语该如何学习的方法
- 高二怎么提高英语成绩
- 高二英语的答题技巧
- 高二英语阅读理解解题策略
- 高二英语的复习方法
- 高二学好英语的方法
- 高二英语的学习方法和技巧
- 高二英语语法学习诀窍
- 高二英语阅读理解解题方法
- 高二英语阅读理解难题策略
- 高二英语听力提升方法
- 高二英语单词记忆方法
- 高二英语口语提升方法
- 高二英语学习指导方法
- 高二英语五步学习方法
- 高二英语阅读能力提升方法
- 高二英语提升阅读能力方法
- 高二英语怎么学的学习方法
- geo-
- geocache
- geocaching
- geocentric
- geocentrism
- geochemical
- geochemistry
- geodesic
- geodesic dome
- geodesic-dome
- 簿书
- 簿册
- 簿子
- 簿籍
- 簿记
- 籀
- 籀文
- 籁
- 籍
- 籍没
- 中国农业银行客服中心（上海）2012年招聘人员体检名单
- 中国农业银行客户服务中心（上海）2012年客服代表招聘体检通知
- 莱商银行徐州分行2012年招聘补充公告
- 兴业银行总行财务核算中心2012年招聘启事
- 中国农业发展银行云南省分行2012年招用市场化用工公告
- 以前我在建行招聘信息网上注册过信息，现在建行又招聘了？
- 中国民生银行茶业金融中心2012年招聘启事
- 广发银行总行2012年运营经理招聘启事
- 中国民生银行海洋渔业金融中心2012年诚聘英才
- 招商银行总行2012年预算管理岗位招聘信息