前言
今天主要讲讲用纯css制作精美的半边文字和鼠标移上去显示tip的效果!
知识点回顾
关于伪类及伪元素,我前面文章已经经过。 content除了上面的用法之外,还可以如下写:
content: attr(data-haorooms);
获取哪个属性。 我们就是利用这个知识点。
纯css制作精美鼠标移上去显示tips效果
看如下案例:
src="http://sandbox.runjs.cn/show/n5n4flr9" allowfullscreen="allowfullscreen">html代码如下:
<div class="haorooms">
<span data-haorooms="haorooms鼠标效果tips-纯css">haorooms测试</span>
</div>
css代码如下:
.haorooms{margin-top:30px}
span{
position: relative;
display: inline-block;
}
span:hover{
cursor: pointer;
}
span:hover:before{
content: attr(data-haorooms);
background-color: #2085c5;
border-radius:3px;
color: #fff;
padding: 10px;
position: absolute;
left: 100%;
top: -70%;
margin-left: 8px;
white-space: pre;
}
span:hover:after{
content: "";
position: absolute;
width: 0;
height: 0;
border-right: 8px solid #2085c5;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
当然,用纯css写tips,还有其他办法!例如我右侧微信公众号的hover,可以把tips先隐藏起来,然后hover让其显示出来,也可以!这个只是介绍一种方法!
制作半边文字
效果如下:
src="http://sandbox.runjs.cn/show/znzkeqez" allowfullscreen="allowfullscreen">html代码:
<span class="haorooms" data-content="前">前</span>
<span class="haorooms" data-content="端">端</span>
<span class="haorooms" data-content="博">博</span>
<span class="haorooms" data-content="客">客</span>
css代码:
.haorooms {
position:relative;
display:inline-block;
font-size:80px; /* 任何宽度都可以 */
color: black; /* 任何颜色,或透明 */
overflow:hidden;
white-space: pre; /* 处理空格 */
}
.haorooms:before {
display:block;
z-index:1;
position:absolute;
top:0;
left:0;
width: 50%;
content: attr(data-content); /* 伪元素的动态获取内容 */
overflow:hidden;
color: #f00;
}
今天就暂时写到这里,假如你还有其他的实现方式,或者更简单的实现方式!欢迎留言交流!