转行学前端的第 15 天 : 实现一个H5页面动画

小又又
3,937 阅读8分钟

我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。

今日学习目标

按照昨天的规划，今天这边就需要从实例开始实战了，早上在稿定设计上找了一个模板，今天主要就是将这个h5 邀请函效果实现，学习一下 CSS 动画，加油，小又又！！！！

新建项目

主要项目目录结构如下：

./
├── css
│   ├── reset.css
│   ├── tool.css
│   ├── layout.css
│   ├── index.css
├── images
│   ├── edging.png
│   ├── flying-saucer.png
│   ├── mountain.png
├── index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小又又 学习 前端 </title>
  <meta name="keywords" content="小又又,学前端">
  <meta name="description" content="小又又的描述测试~~~~~~">
  <meta name="author" content="小又又">
  <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>

页面基础结构实现

放上文字内容

主要是分为第一页和第二页，分别放置了第一页的解释文本，和第二页的填写项内容，今天就不实现音乐效果了~~~~

核心知识点说明

  • br
  • label
  • input
  • button

设置页面整体大小

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

核心知识点说明

  • vh
  • box-sizing
  • max-width

设置第一页显示效果

.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.4em;
}
.page01 .sub-title{
  text-transform: uppercase;
  font-size: 1.7vw;
  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.5em;
  display: inline-block;
}
.page01 .content{
  margin: 1em 0;
  line-height: 1.5;
  font-size: 1vw;
}
.page01 .address{
  font-size: 3.5vw;
  font-weight: bolder;
  line-height: 1.5;
  margin-top: 8vh;
}

核心知识点说明

  • 开启手机模拟窗口调试
  • 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

设置第二页显示效果

.page02 .title{
  font-size: 6vw;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  line-height: 2;
  letter-spacing: 0.4em;
  text-align: center;
}
.page02 .sub-title{
  text-transform: uppercase;
  font-size: 1.7vw;
  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.5em 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.3em 0;
  padding: 0 1em;
  border-radius: 4px;
  width: 90%;
  box-sizing: content-box;
}

核心知识点说明

  • 开启手机模拟窗口调试
  • 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

页面动画实现

CSS 动画片段

.jump{
  -webkit-animation: jump 0.3s ease-in-out;
  animation: jump 0.5s ease-in-out;
}

.animation-01{
  animation-delay: 0s;
}
.animation-02{
  animation-delay: 0.7s;
}
.animation-03{
  animation-delay: 1.4s;
}
.animation-04{
  animation-delay: 2.1s;
}
.animation-05{
  animation-delay: 2.8s;
}

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

感觉动画效果还是有点点不自然~~~~

HTML 片段

  <div class="main">
    <div class="page page01">
      <div class="contanier">
        <p class="title font-red jump animation-01">即刻报名</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">由梦开启</span><br/>
          <span>孩子们的音乐会</span>
        </p>
        <p class="content address font-red jump animation-03">
          4PM 2020.08.08<br/>
          稿定花园中庭
        </p>
      </div>
    </div>
    <div class="page page02">
      <div class="contanier">
      <div class="commit">
        <p class="title font-red jump animation-01">预约参加</p>
        <p class="sub-title font-red jump">REGISTRATION</p>

        <div class="form">
          <div class="form-item">
            <label for="children">您孩子的姓名 <span class="font-red">*</span></label><br/>
            <input type="text"  name="children" required>
          </div>
          <div class="form-item">
            <label for="tel">您的手机号码 <span class="font-red">*</span></label><br/>
            <input type="text" name="tel" required>
          </div>
          <div class="form-item">
            <label for="name">您的姓名</label><br/>
            <input type="text" name="name" required>
          </div>
          <div class="form-item">
            <label for="number">参会人数</label><br/>
            <input type="text" name="number" required>
          </div>
        </div>
        <button class="btn">提交</button>
      </div>
      </div>
    </div>
  </div>

核心知识点说明

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

今日学习总结

今日心情

今天主要来说就是基于学习CSS 动画相关知识点，很高兴，今天基础实现了目标，虽然 感觉动画效果还是有点点不自然~~~~，之后可能会再改进，但是我自己感觉已经有些满意了~~~

本文使用 mdnice 排版

avatar
文章
阅读
粉丝