几个CSS3妙用尝试【基于"追梦子"博文】

本文介绍了几种CSS3的实用技巧,包括动态下划线效果、使用scale和animation制作加载动画、以及利用translate进行精确布局的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在网上发现某位大神的博客,讲解了几个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的文章以及许多妙用...

    >::before和::after伪元素的用法

    >Pure CSS GUI icons

    >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%);




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值