学习lulu之——tips 提示

今天做了一个活动，里面有一个效果是这样的：

 

要求就是不论星星的大小怎么变化，可摘提示两个字始终在星星的正上方，并且，可摘两个字的内容是不论有多少始终会呆在星星的正上方，学习了lulu的方法之后记下来。

 

一：拆分可见。气泡框是由一个椭圆包着字的形状和一个小三角组成的，由此我可以想到用伪类元素before和after来实现画这个小气泡。

二：先用before元素画出文字包含的部分，在这里我们可以通过attr()方法来取到气泡的内容，并且内容的填写之用在html模版上面写,对的，不仅仅js有attr()方法，css也有这个方法。css里面基本用法如下：

[title=W3School]
{
border:5px solid blue;
}

<img title="W3School" src="/i/w3school_logo_white.gif" />

 

这里的用法是将文案直接写在html上，然后通过css的atrr()方法来取到它的属性值。如下：

<span class=""  tableindex="0" role="tooltip" data-title="可摘" aria-lable="可摘">
</span>

然后css:

.star-box .star[data-title]:before {
    content: attr(data-title);
    top: -28px;
    max-width: 250px;
    padding: 1px 5px;
    border-radius: 15px;
    background-color: #fff;
    text-align: left;
    color: #723d28;
    font-size: 12px;
    font-style: normal;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

其中.star[data-title] 用的也是css的属性选择器的方法：a [target=_blank] { }

使用transform ： translateX(-50%)  是使元素像x轴的负方向移动它本身宽度的50%;  外加绝对定位，并且相对它的父元素像左移动50%的距离。（这个50%就是它父元素的宽的50%）；

这样就是实现一个元素相对另一元素（不论这个元素的宽度怎么变换），这个元素始终都能相对另一个元素垂直居中对其。

after伪元素来画三角形再来温习一遍：

基本的三角形的画法：

.ui-tips[data-title]::after {
    content: '';
    width: 0;
    height: 0;
    overflow: hidden;
    border: 6px solid transparent;
    border-top-color: #373c42;
    top: -12px;
}

分析以上代码，研究一下border到底是怎样一种拼接方式：

 

发现：width和height是指中心矩形的宽和高，每个边的border是梯形无缝拼接的，而不是矩形拼接的。

以此内推，如果只有一个border-top:80px solid top 是不是就可以画出一边的矩形了，测试代码和效果如下：

 

答案是令人失望的。

那看看其他的边呢？

 

这样 我们可以想到这样一种解释，哪条边框不定义，那么这条边框就表现为矩形，如果其他边框定义，那么它就表现为梯形。（摘抄）

为了测试这句话：

发现因为没有定义border-right和border-bottom 所以改粉色矩形的的下边框和右框为矩形，而定义了边框的左边框和上边框为梯形！

（转）同理：梯形在上边为0 的时候即为三角形，所以只要中间的矩形边宽高为0的时候就能得到三角形：

通过设置其他边的border的背景为transparent实现一个或者2个或者3个三角形！

如果不定义某些边的border，不定义的border就会表现为矩形。

 

 

 

以上就是我今天通过lulu的一个小小tips提示框学到的知识。

转载于:https://www.cnblogs.com/popeyesailorman/p/7128126.html