I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.

Lesson Objective for today

According to yesterday’s plan, today’s side needs to start from the actual practice, this morning in the draft design to find a template, today is mainly to achieve the effect of the H5 invitation, learn CSS animation, come on, small and ！！！！



New project


The main project directory structure is as follows:

. / ├ ─ ─ CSS │ ├ ─ ─ reset. CSS │ ├ ─ ─ tool. The CSS │ ├ ─ ─ layout. The CSS │ ├ ─ ─ index. The CSS ├ ─ ─ images │ ├ ─ ─ edging. PNG │ ├ ─ ─ PNG │ ├─ Mountain.png ├─ index.htmlCopy the code

index.html


      

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">

  <title>Small and learning front end</title>

  <meta name="keywords" content="Small and young and learning.">

  <meta name="description" content="Small and nice description test ~~~~~~">

  <meta name="author" content="Small and small.">

  <link rel="stylesheet" href="css/index.css">

</head>

<body>

  <div class="main">

    <div class="page page01">



    </div>

    <div class="page page02">

      

    </div>

  </div>

</body>

</html>

Copy the code

Page infrastructure implementation

Put text on it

Mainly divided into the first page and the second page, respectively placed the first page of the explanation text, and the second page of the content of the fill in, today will not achieve the music effect ~~~~


Core Knowledge points

  • br
  • label
  • input
  • button

Set the overall page size

body{

  font-size: 14px;

}

.contanier{

  max-width: 500px;

  margin: 0 auto;

  height: 100%;

  padding: 2rem;

  box-sizing: border-box;

}

.page{

  width: 100%;

  height: 100vh;

  box-sizing: border-box;

}

.page01{

  background-color: rgb(255, 230, 193);

}

.page02{

  background-color: rgb(23, 38, 101);

}

Copy the code

Core Knowledge points

  • vh
  • box-sizing
  • max-width

Set the first page display effect

.font-red{

  color: rgb(234, 40, 69);

}

.bg-red{

  background-color: rgb(234, 40, 69);

}

.font-bolder{

  font-weight: bolder;

}

.page01{

  background-image: url('.. /images/mountain.png');

  background-size: 100vw 30vh;

  background-repeat: no-repeat;

  background-position: bottom;

}

.page01 .contanier{

  background-image: url('.. /images/edging.png');

  background-size: 90vw 60vh;

  background-repeat: no-repeat;

  background-position: center 8vh;

}

.page01 .title{

  font-size: 13vw;

  font-style: normal;

  font-weight: bold;

  text-decoration: none;

  line-height: 2;

  padding-top: 10vh;

  background-image: url('.. /images/flying-saucer.png');

  background-size:  25vw 25vw;

  background-repeat: no-repeat;

  background-position: right 10vw;

  letter-spacing: 0.4 em;

}

.page01 .sub-title{

  text-transform: uppercase;

  font-size: 1.7 vw;

  font-style: normal;

  font-weight: bold;

  text-decoration: none;

  margin-bottom: 5vh;

}

.page01 .content.sub{

  padding: 2vh 0;

  border-top: 1px solid #FF3028;

  border-bottom: 1px solid #FF3028;

}

.page01 .content span{

  padding-top: 0.5 em;

  display: inline-block;

}

.page01 .content{

  margin: 1em 0;

  line-height: 1.5;

  font-size: 1vw;

}

.page01 .address{

  font-size: 3.5 vw;

  font-weight: bolder;

  line-height: 1.5;

  margin-top: 8vh;

}



Copy the code

Core Knowledge points

  • Enable mobile phone simulation window debugging
  • vh
  • vw
  • box-sizing
  • max-width
  • color
  • font-weight
  • font-size
  • text-transform
  • background-image
  • background-size
  • background-repeat
  • background-position
  • letter-spacing
  • line-height
  • border
  • margin
  • padding

Set the second page display effect

.page02 .title{

  font-size: 6vw;

  font-style: normal;

  font-weight: bold;

  text-decoration: none;

  line-height: 2;

  letter-spacing: 0.4 em;

  text-align: center;

}

.page02 .sub-title{

  text-transform: uppercase;

  font-size: 1.7 vw;

  font-style: normal;

  font-weight: bold;

  text-decoration: none;

  margin-bottom: 3vh;

  text-align: center;

}

.page02 input{

  border: 2px solid rgb(234, 234, 234);

  color: rgb(117, 117, 117);

  height: 32px;

  margin: 0.5 em 0;

  padding: 0 1em;

  border-radius: 4px;

  width: 90%;

  box-sizing: content-box;

}

.page02 label{

  color: rgb(117, 117, 117);

}

.page02 .btn{

  background-color: #FF3028;

  color: #fff;

  border: 0 none;

  height: 32px;

  margin: 0.3 em 0;

  padding: 0 1em;

  border-radius: 4px;

  width: 90%;

  box-sizing: content-box;

}

Copy the code

Core Knowledge points

  • Enable mobile phone simulation window debugging
  • vh
  • vw
  • box-sizing
  • color
  • font-weight
  • font-size
  • text-transform
  • background-image
  • background-size
  • background-repeat
  • background-position
  • background-color
  • letter-spacing
  • line-height
  • border
  • margin
  • padding
  • border-radius

Page animation implementation

CSS Animation segment

.jump{

  -webkit-animation: jump 0.3 s ease-in-out;

  animation: jump 0.5 s ease-in-out;

}



.animation-01{

  animation-delay: 0s;

}

.animation-02{

  animation-delay: 0.7 s;

}

.animation-03{

  animation-delay: 1.4 s;

}

.animation-04{

  animation-delay: 2.1 s;

}

.animation-05{

  animation-delay: 2.8 s;

}



@ -webkit-keyframes jump {

  0% {

    opacity: 0.3;

    transform: translateY(100%);

  }

  55% {  

    opacity: 0.7;

    transform: scale(1.05) translateY(20%).

  }

  57% {

    opacity: 0.7;

    transform: scale(1.05) translateY(20%).

  }

  75% {

    opacity: 0.7;

    transform: scale(1.05) translateY(20%);

  }

  80% {

    opacity: 0.7;

    transform: scale(1.05) translateY(20%).

  }

  100% {

    opacity: 1;

    transform: scale(1) translateY(0%).

  }

}

@keyframes jump {

  0% {

    opacity: 0.3;

    transform: translateY(100%);

  }

  55% {

    opacity: 0.7;

    transform: scale(1.05) translateY(20%).

  }

  57% {

    opacity: 0.7;

    transform: scale(1.05) translateY(20%).

  }

  75% {

    opacity: 0.7;

    transform: scale(1.05) translateY(20%);

  }

  80% {

    opacity: 0.7;

    transform: scale(1.05) translateY(20%).

  }

  100% {

    opacity: 1;

    transform: scale(1) translateY(0%).

  }

}



Copy the code

Feel the animation effect is still a little unnatural ~~~~

An HTML fragment

  <div class="main">

    <div class="page page01">

      <div class="contanier">

        <p class="title font-red jump animation-01">Sign up instantly</p>

        <p class="sub-title font-red jump animation-01">you are invited</p>

        <p class="content sub font-red jump animation-02">

          <span class="font-bolder">2020</span><br/>

          <span class="font-bolder">By the dream open</span><br/>

          <span>The children's concert</span>

        </p>

        <p class="content address font-red jump animation-03">

4 PM 2020.08.08<br/>

Draft garden atrium

        </p>

      </div>

    </div>

    <div class="page page02">

      <div class="contanier">

      <div class="commit">

        <p class="title font-red jump animation-01">To make an appointment to attend</p>

        <p class="sub-title font-red jump">REGISTRATION</p>



        <div class="form">

          <div class="form-item">

            <label for="children">Your child's name<span class="font-red">*</span></label><br/>

            <input type="text"  name="children" required>

          </div>

          <div class="form-item">

            <label for="tel">Your mobile phone number<span class="font-red">*</span></label><br/>

            <input type="text" name="tel" required>

          </div>

          <div class="form-item">

            <label for="name">What's your name</label><br/>

            <input type="text" name="name" required>

          </div>

          <div class="form-item">

            <label for="number">The attendance</label><br/>

            <input type="text" name="number" required>

          </div>

        </div>

        <button class="btn">submit</button>

      </div>

      </div>

    </div>

  </div>

Copy the code

Core Knowledge points

  • animation
  • animation-delay
  • opacity
  • transform
  • scale
  • translateY
  • @keyframes

Summary of today’s lesson


Today the mood

Today is mainly based on learning CSS animation related knowledge points, very happy, today the basis to achieve the goal, although feel the animation effect is still a little unnatural ~~~~, after may be improved, but I feel already some satisfaction ~~~


This article is formatted using MDNICE