P78-前端基礎動畫效果-小球跳躍動畫練習

阿新 • • 發佈：2021-01-31

技術標籤：最美前端 # 前端【H5+Css3】

P78-前端基礎動畫效果-小球跳躍動畫練習

1.概述

通過一個小球跳躍練習上篇文章學習的動畫效果

2.小球跳躍

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>動畫</title>

    <style>
      .outer {
        height: 500px;
        border-bottom: 10px greenyellow solid; 

        margin: 50px auto;
        overflow: hidden;
      }

      .outer div {
        float: left;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #bbffaa;
        margin-right: 4%;
        animation: ball .9s forwards linear infinite alternate;
      } 


      div .box1 {
        background-color: orange;
        animation-delay: .1s;
      }

      div .box2 {
        background-color: yellow;
        animation-delay: .2s;
      }

      div .box3 {
        background-color: yellowgreen;
        animation-delay: .3s;
      }

      div .box4 {
        background-color 
: aquamarine;
        animation-delay: .4s;
      }

      div .box5 {
        background-color: bisque;
        animation-delay: .5s;
      }

      div .box6 {
        background-color: blue;
        animation-delay: .6s;
      }

      div .box7 {
        background-color: crimson;
        animation-delay: .7s;
      }

      div .box8 {
        background-color: darkviolet;
        animation-delay: .8s;
      }

      div .box9 {
        background-color: lightpink ;
        animation-delay: .9s;
      }

      /* 建立小球下落的動畫 */
      @keyframes ball {
        from {
          margin-top: 0;
        }

        to {
          margin-top: 400px;
        }
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
      <div class="box5"></div>
      <div class="box6"></div>
      <div class="box7"></div>
      <div class="box8"></div>
      <div class="box9"></div>
    </div>
  </body>
</html>

3.小球跳躍效果

在這裡插入圖片描述

P78-前端基礎動畫效果-小球跳躍動畫練習

技術標籤：最美前端# 前端【H5+Css3】 P78-前端基礎動畫效果-小球跳躍動畫練習

前端：css3的過渡與動畫的基礎知識

　　一、css3過渡知識　　　　（一）、概述　　　　　　　　1、CSS3過渡是元素從一種樣式逐漸改變為另一種的效果。

vue基礎教程06 動畫效果

技術標籤：vue.jsvue 1.淡出淡出複製程式碼就可以實現，解釋全寫在程式碼裡了，我太懶了。。。開始前我們需要下載個animate.css動畫庫，地址https://animate.style/ 懶得下載可以找我要個css檔案。

JQuery基礎—動畫效果及現象表示

5 .動畫效果 a.基本動畫(hide show 隱藏顯示； fadeOut fadeln 淡出淡入； slideUp slideDown 滑入滑出)

使用YYLabel+CADisplayLink實現文字首行縮排的動畫效果

公司有個需求，點選關注，標題處要有個已關注的圖示提示，標題文字要根據是否已關注作出位置調整。

Android 開機充電圖示和充電動畫效果

首先驅動需要先獲取到2個power supply kernel\\msm-3.18\\drivers\\usb\\phy\\phy-msm-usb.c motg->usb_psy.name = \"usb\";

JS實現網頁煙花動畫效果

原生js實現放煙花效果，點選滑鼠，然後向四周擴散，最後自由落體效果！最簡單的方法實現！

Android自定義帶動畫效果的圓形ProgressBar

本文例項為大家分享了Android自定義帶動畫效果的圓形ProgressBar，供大家參考，具體內容如下

jQuery 動畫與停止動畫效果例項詳解

本文例項講述了jQuery 動畫與停止動畫效果。分享給大家供大家參考，具體如下：

利用Flutter實現“孔雀開屏”的動畫效果

前言今天分享一個類似“孔雀開屏”的動畫效果，開啟新的頁面時，新的頁面從螢幕右上角以圓形逐漸開啟到全屏。

pygame用blit()實現動畫效果的示例程式碼

pygame的的實現動畫的方法有很多，但是都是圍繞著表面進行的，也就是說實現動畫的方式不同，但是本質其實都是對錶面的不同處理方式而已。

win10系統關閉動畫效果的小技巧

電腦升級win10正式版系統後發現有動畫效果，切換程式就會呈現出漸變效果。對於電腦配置不夠高的小夥伴來說，開啟動畫效果會造成系統卡頓。如果想要流暢使用Win10系統，必須關閉動畫效果。那麼該怎麼操作？有需要的一

如何用WindowsForm給視窗新增一些簡單的動畫效果

在顯示或者隱藏視窗的時候，可以利用Windows API中的AnimateWindow函式實現一些特殊的效果。主要的動畫型別有四種:滾動、幻燈片、摺疊或展開和alpha混合漸變。

flutter-路由跳轉動畫效果（漸隱漸現，縮放效果，旋轉縮放）

1.漸隱漸現過渡效果自定義CustomRoute Widget 新建一個custom_router.dart檔案，這個就是要自定義的路由方法，自定義首先要繼承於通用的路由的構造器類PageRouterBuilder。繼承之後重寫父類的CustomRoute構造方法。

JavaScript動畫基礎：canvas繪製簡單動畫

動畫是將靜止的畫面變為動態的藝術．實現由靜止到動態，主要是靠人眼的視覺殘留效應。視覺殘留也叫視覺暫留現象，物體在快速運動時, 當人眼所看到的影像消失後，人眼仍能繼續保留其影像0.1~0.4秒左右的影象，這種現象

Vue實現Tab標籤路由效果並用Animate.css做轉場動畫效果的程式碼第1/3頁

類似於瀏覽器視窗一樣的路由切換邏輯，看著還是挺高大上的，本以為有很多高階的玩意兒，奈何複雜的東西總是由簡單的東西拼接而成的，這個功能也不例外。

Jquery如何使用動畫效果改變背景色

Jquery如何使用動畫效果改變背景色一、問題引入 jquery的animate動畫雖然強大，但是無法使用其進行背景色(background-color)的動畫效果變化，因為animate動畫效果只能動態改變數值型的引數，例如：top，left，width

Jquery如何使用animation動畫效果改變背景色

Jquery如何使用animation動畫效果改變背景色一、問題引入 jquery的animate動畫雖然強大，但是無法使用其進行背景色(background-color)的動畫效果變化，因為animate動畫效果只能動態改變數值型的引數，例如：top，le

echarts實現載入動畫效果，高亮旋轉

先放效果圖.......................................................................................

css3-02 漸變屬性及動畫效果

一,CSS3漸變的分類 (1)線性漸變（Linear Gradients）一個起點顏色一個終點顏色(必須至少兩種顏色)