在网上发现某位大神的博客,讲解了几个CSS妙用,以下逐一尝试
原文链接:CSS3妙用-追梦子
------------------------------------------------------------------------------------------------------
1.
HTML:
<a href="javascript:;">我有下划线噢</a>
CSS:
a{
text-decoration:none;
position:relative;
padding-bottom:5px;
}
a::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:100%;
height:2px;
background-color:red;
transform:scaleX(0);
transition:all .5s;
}
a:hover::after{
transform:scaleX(1);
}
效果叙述:鼠标移到链接上之后,会从文字底部中点向两边展开一条下划线
1)代码中给标签添加了relative定位值,但是我不知道这句的作用...
2)内联元素(如a)可以直接加padding以及margin,但似乎只在横向有作用...
内联元素特点:
2).1 和其他元素都在一行上;
2).2 元素的高度、宽度及顶部和底部边距不可设置;
2).3 元素的宽度就是它包含的文字或图片的宽度,不可改变。
3)伪类::after
:after 选择器在被选元素的内容后面插入内容。
请使用 content 属性来指定要插入的内容。也可加图片,但不知能否加入div之类的元素
又发现详细介绍:after和:before的文章以及许多妙用...
>multiple-backgrounds-and-borders-with-css2
(好大的世界...一篇一篇解决...)
此处的红色下划线其实是空标签的背景,如果没有top和bottom定位,红色会出现在其后上方位置(因为没有高度)
4)scalex横向变化 其值为0时可以隐形
5)复习transition
----------------------------------------------------------------------------------------------------------
2.
效果:
HTML:
<a href="#a" id="a">我有下划线噢</a>
<a href="#b" id="b">我有下划线噢</a>
<a href="#c" id="c">我有下划线噢</a>
CSS:
a{
text-decoration:none;
position:relative;
padding:10px;
border:1px solid #ccc;
}
a::after{
content:'';
position:absolute;
left:10px;
bottom:3px;
width:calc(100% - 20px);
height:1px;
background-color:red;
transform:scaleX(0);
transition:all .5s;
}
a:target::after{
transform:scaleX(1);
}
和案例1差不多,只不过发现了一个新的表达方式calc()。不过貌似兼容性不太好。
--------------------------------------------------------------------------------------------
3.
scaleY的妙用
案例1、配合animation制作loading
效果:
HTML:
<div id="box">
<i></i>
<i></i>
<i></i>
<i></i>
</div>
CSS:
#box{
position:relative;
}
#box>i{
position:absolute;
top:0;
width:4px;
height:35px;
background-color:#0bac84;
border-radius:5px;
}
#box>i:nth-of-type(1){
left:0px;
animation:loading 1s ease-in .1s infinite;
}
#box>i:nth-of-type(2){
left:8px;
animation:loading 1s ease-in .3s infinite;
}
#box>i:nth-of-type(3){
left:16px;
animation:loading 1s ease-in .6s infinite;
}
#box>i:nth-of-type(4){
left:24px;
animation:loading 1s ease-in .3s infinite;
}
@keyframes loading{
0%{
transform:scaleY(1);
}
50%{
transform:scaleY(0.5);
}
100%{
transform:scaleY(1);
}
}
这个效果太酷了。重点在于这一句
animation:loading 1s ease-in .3s infinite;
名字 持续时间 动画方式 延迟时间 次数
以及后代选择器,我在看源代码前尝试着自己写,使用的是:nth-child后又换成odd even均不起作用。
----------------------------------------------------------------------------------------------------------------------------------------------
4.
效果:
HTML:
<div id="box">
translate
</div>
CSS:
#box{
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
/*margin-left:-50px;
margin-top:-50px;*/
transform:translate(-50%,-50%);
background-color:red;
}
我认为translate是根据元素的宽度和高度来计算的。也就是说如果写100%的话,实际上就是100px而我写了-50%就是它的一半所以和margin-left:-50px;效果是一样的。
transform:translate(-50%,-50%);