這篇文章主要介紹原生JS+CSS怎么實(shí)現(xiàn)炫酷重力模擬彈跳系統(tǒng)的登錄頁面，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

十余年的赤坎網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整赤坎建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“赤坎網(wǎng)站設(shè)計(jì)”,“赤坎網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

效果圖：

不過在看代碼之前呢，大家先和小穎看看css中的opacity、transition、box-shadow這三個(gè)屬性。

1.opacity

CSS3 opacity 屬性

實(shí)例

設(shè)置一個(gè)div元素的透明度級別：

div
{
opacity:0.5;
}

在此頁底部有更多的例子。

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流瀏覽器都支持opacity屬性。.

注意：IE8和早期版本支持另一種過濾器屬性。像：filter:Alpha(opacity=50)

屬性定義及使用說明

Opacity屬性設(shè)置一個(gè)元素了透明度級別。

語法

opacity: value|inherit;

2.transition

作用：將元素從一種樣式逐漸改變?yōu)榱硪环N的效果。

定義和用法

transition 屬性是一個(gè)簡寫屬性，用于設(shè)置四個(gè)過渡屬性：

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

注釋：請始終設(shè)置 transition-duration 屬性，否則時(shí)長為 0，就不會產(chǎn)生過渡效果。

語法

transition: property duration timing-function delay;

3.box-shadow

作用：給元素添加陰影效果。

定義和用法

box-shadow 屬性向框添加一個(gè)或多個(gè)陰影。

提示：請使用 border-image-* 屬性來構(gòu)造漂亮的可伸縮按鈕！

語法

box-shadow: h-shadow v-shadow blur spread color inset;

注釋：box-shadow 向框添加一個(gè)或多個(gè)陰影。該屬性是由逗號分隔的陰影列表，每個(gè)陰影由 2-4 個(gè)長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。

怎么實(shí)現(xiàn)的呢，哈哈哈，代碼看這里：

 
 
 
 * {
  margin: 0;
  padding: 0;
  list-style: none;
 }
 body {
  overflow: hidden;
 }
 #bg_wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
 }
 #bg_wrap div {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  /* 設(shè)置透明度 */
  transition: opacity 3s;
 }
 /* nth-of-type(1) *篩選選擇器選擇第一個(gè)*/
 #bg_wrap div:nth-of-type(1) {
  opacity: 1;
 }
 #Login {
  width: 272px;
  height: 300px;
  margin: 200px auto;
 }
 #Login .move {
  position: absolute;
  top: -100px;
  z-index: 999;
 }
 #Login h4 {
  width: 270px;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  font-family: '微軟雅黑';
  text-align: center;
  margin-bottom: 30px;
  cursor: move;
  /* top: 100px; */
 }
 /* #username {
  top: 170px;
 }
 #password {
  top: 225px;
 } */
 #Login input.text {
  width: 270px;
  height: 42px;
  color: #fff;
  background: rgba(45, 45, 45, 0.15);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 1.0) inset;
  text-indent: 10px;
 }
 #Login input.btn {
  /* top: 280px; */
  background: #ef4300;
  width: 272px;
  height: 44px;
  border-radius: 6px;
  color: #fff;
  box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2);
  /* -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2); */
  border: 0;
  text-align: center;
 }
 /* #Login input.focus {
  outline: none;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2) inset;
 } */
 input::-webkit-input-placeholder {
  color: #fff;
 }