preface

Today I’m going to share some examples of native CSS or CSS+JS in action. These examples are relatively simple, but they are all likely to be encountered in real life development. I believe it will be helpful to some children’s shoes

CSS Timeline effect

Timeline is a very common effect, we can use CSS relative positioning and absolute positioning to achieve, during development we can adjust the value of each property according to the actual situation, to meet the needs.

Effect:

Code:

HTML

<div class="message_item">
    <div class="message_time">The 2020-05-13"</div>
    <sapn class="message_circle"></sapn>
</div>
<div class="message_item">
    <div class="message_time">The 2020-05-13 whom</div>
    <sapn class="message_circle"></sapn>
</div>
Copy the code

CSS

.message_item{
    height: 145px;
    width: 300px;
    padding-left: 12px;
    border-left: 1px solid # 979797;
    position: relative;
}
.message_time{
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    margin-bottom: 12px;
}
.message_circle{
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #547ABD;
    border-radius: 50%;
    left: -4px;
    top: 5px;
}
Copy the code

The CSS implements the information box style

For the implementation of information box style, we can use CSS pseudo-class and CSS3 Transform attribute to achieve.

The first kind of

HTML

<div class="box"></div>
Copy the code

CSS

.box{
    width: 200px;
    height: 80px;
    background: #E3EAF4;
    position: relative;
}
.box::after{
    content: ' ';
    height: 12px;
    width: 12px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -4px;
    left: 20px;
    position: absolute;
    background: #E3EAF4;
}
Copy the code

The direction of the information box can be changed in the pseudo class

The second,

HTML

<div class="box"></div>
Copy the code

CSS

.box{
    width: 200px;
    height: 80px;
    position: relative;
    border: 1px solid #E3EAF4;
    background-color: #ffffff;
}
.box::after{
    content: ' ';
    height: 12px;
    width: 12px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -8px;
    left: 20px;
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #E3EAF4;
    border-bottom: none;
    border-right: none;
}
Copy the code

The above two are the difference between device background color and setting border. The previous timeline and information boxes are combined to create a complete example of an information timeline.

CSS capacity ball effect

Here is a reference to the wave effect of Chokcoco big guy’s article pure CSS to achieve wave effect!

The effect

HTML

<div class="box">
    <div class="circular">
        <div class="content">
            
        </div>
        <span class="num">40%</span>
    </div>
</div>
Copy the code

CSS

.box{
    height: 500px;
    padding-top: 100px;
    padding-left: 200px;
}
.circular{
    height: 100px;
    width: 100px;
    border: 2px solid #4682B4;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
.num{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 30;
    transform: translate(50%, 50%); }.content{
    position: absolute;
    height: 30px;
    width: 100px;
    background: #4682B4;
    bottom: 0px;
}
.content::after..content::before{
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 50%;
    background-color: rgba(255, 255, 255, 7);border-radius: 40% 42% 40% 41%;
    transform: translate(50%, 100%)rotate(0);
    animation: rotate 8s linear infinite;
    z-index: 10;
}
.content::after{
    border-radius: 42% 40% 41% 40%;
    background-color: rgba(255, 255, 255, 9);transform: translate(50%, 100%)rotate(0);
    animation: rotate 8s linear -5s infinite;
    z-index: 20;
}

@keyframes rotate {
    50% {
        transform: translate(50%, 103%)rotate(180deg); 100%} {transform: translate(50%, 100%)rotate(360deg); }}Copy the code

Capacity The height of the capacity inside the sphere is the height of the.content div, the amplitude of the wave, and the speed of the wave can all be set to the value of the property. In practice, we basically only need to dynamically set the height of the. Content to achieve the display of different capacities.

Drawer navigation on the mobile end

There are a variety of mobile navigation, drawer navigation is one of the common, we use javascript and CSS combined to achieve mobile navigation drawer

Effect:

HTML

<div id="root">
    <div class="box">
        <div class="btn-box">
            <button id="btn" class="btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
        <div id="content-box" class="content-box">
            <ul class="content-ul">
                <li class="content-li active">Home page</li>
                <li class="content-li">The article</li>
                <li class="content-li">The archive</li>
            </ul>
        </div>
    </div>
</div>
Copy the code

CSS

The core of drawer navigation is to achieve the transition of navigation bar height through the transition of CSS3; Also note that although the height of the parent element changes, the layout will be affected if the child element has a fixed height or has content. So we need to set the overflow of the parent element to hidden so that the child element does not overwrite the parent element.

#root{
    width: 100%;
    height: 400px;
    margin-top: 100px;
    background: #cccccc; {} *margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.box{
    width: 400px;
    border: 1px solid #eeeeee;
    height: 100%;
    margin: 0 auto;
    background: #ffffff;
}
.btn-box{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #cccccc;
}
.btn{
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    border: none;
    background: #ffffff;
    outline: none;
}
.btn span{
    display: inline-block;
    height: 4px;
    width: 30px;
    background: #2b2b2b;
}
.content-box{
    height: 0;
    border-bottom: 1px solid #dddddd;
    background: #cccccc;
    overflow: hidden;  /* The child cannot support the parent */
    transition:height ease-out .3s;
    -webkit-transition:height ease-out .3s; /* Safari */
}
.content-li{
    padding: 5px 10px;
    margin-bottom: 20px;
    font-size: 20px;
}
.active{
    background: #ffffff;
}
Copy the code

JavaScript

let btn = document.getElementById("btn");
let nav = document.getElementById("content-box");
let contentLi = document.getElementsByClassName("content-li");

let hide = true;
let length = contentLi.length;

/** * implement navigation bar drawer */
btn.addEventListener('click'.function () {
    if (hide){
        nav.style.height = "200px";
        hide = false;
    } else {
        nav.style.height = "0";
        hide = true; }});/** * navigate to effect */
for (let i = 0; i < length; i++ ){
    contentLi[i].addEventListener('click'.function () {
        for (let j = 0; j < length; j++){
            contentLi[j].classList.remove('active');
        }
        contentLi[i].classList.add('active'); })}Copy the code

The last

If the article has deficiencies or better implementation methods, welcome to discuss ~