CSS3 transition to achieve underline example code

This article introduces the sample code of CSS3 transition to achieve underline, which is shared with you as follows:

Take a look at our demo here

Understanding transition

This is a new style added in CSS3 that can achieve animation transition. Often used when adding some effect to transition from one style to another.

The transition property

1. transition: A shorthand property used to set four transition properties in one property.
2. transition-property: Specifies the name of the CSS property to which the transition is applied.
3. transition-duration: Defines how long the transition effect takes. The default is 0.
4. transition-timing-function: Specifies the timing curve of the transition effect. The default is "ease".
   1. linear: Specifies a transition effect that starts and ends at the same speed (equivalent to cubic-bezier(0,0,1,1))
   2. ease: Specifies a transition effect that starts slowly, then speeds up, and then ends slowly (cubic-bezier(0.25,0.1,0.25,1))
   3. ease-in: Specifies a transition effect that starts slowly (equal to cubic-bezier(0.42,0,1,1))
   4. ease-out: Specifies a transition effect that ends slowly (equal to cubic-bezier(0,0,0.58,1))
   5. ease-in-out: Specifies a transition effect that starts and ends slowly (equal to cubic-bezier(0.42,0,0.58,1))
   6. cubic-bezier(n,n,n,n): Define your own values ​​in the cubic-bezier function. Possible values ​​are numbers between 0 and 1.
5. transition-delay: Specifies when the transition effect begins. The default is 0.

transition: width 1s linear 2s; /*Abbreviated example*/

/*Equivalent to the following*/
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

Transform attributes

• translate() moves the element from its current position according to the given left (X-axis) and top (Y-axis) positions.
• rotate() Rotates an element clockwise by a given number of degrees. Negative values ​​are allowed, which rotate the element counterclockwise.
• scale() increases or decreases the size of the element, depending on the width (x-axis) and height (y-axis) parameters:
• skew() contains two parameter values, which represent the tilt angles of the X-axis and Y-axis respectively. If the second parameter is empty, the default value is 0. A negative parameter indicates tilting in the opposite direction.
• matrix() The matrix method has six parameters, including rotation, scaling, translation, and skewing capabilities.

Achieve the effect we need

Of course, I will just post the code here, and there are comments in the code for easy understanding.

/*css code*/

h2{
    position: relative;
    padding: 15px;
    text-align: center;    
}
button{
    width: 100px;
    height: 40px;
    border-radius: 15px;
    border: none;
    background: #188FF7;
    color: #fff;
    outline: none;
    cursor: pointer;
    font-weight: bold;
}
button:hover{
    background: #188EA7;
}
.container{
    width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    
}
.line{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transition: transform .5s;
    background: #188EA7;
    color: #188EA7;
    transform: scaleX(0);
    z-index: 1111;            
}

@keyframes changeColor1{
    from{
        color: #000;
    }
    to{
        color: #188EA7;
    }
}
@keyframes changeColor2{
    from{                
        color: #188EA7;
    }
    to{
        color: #000;
    }
}
<!--html code-->

<div class="container">
    <h2 id="title">
        Baidu Front-end Academy<i class="line" id="line"></i>
    </h2>
    <button id="change">Change</button>
</div>
//js part of the code (function () {
    let btn = document.getElementById('change');
    let h2 = document.getElementById('title');
    let line = document.getElementById('line');
    let count = 0;
    btn.onclick = function () {
        if(count%2===0){
            line.style.transform = "scaleX(1)";
            h2.style.animation = "changeColor1 1s";
            h2.style.color = "#188EA7";
            count++;
        }else{
            line.style.transform = "scaleX(0)";
            h2.style.animation = "changeColor2 1s";
            h2.style.color = "#000";
            count++;
        }
        
    }
})();

Summarize

So far we have fully presented this effect, and we have also learned the transition and tranform properties in CSS3. Of course, some HTML and CSS basics are required to complete this animation.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.