web前端小案例-純css書架裝載機

阿新 • • 發佈：2019-02-01

書架裝載機，看月薪18k的程式設計師如何在十幾分鍾用html5寫出來！

html程式碼：

<div class="bookshelf_wrapper">
  <ul class="books_list">
    <li class="book_item first"></li>
    <li class="book_item second"></li>
    <li class="book_item third"></li>
    <li class="book_item fourth"></li>
    <li class="book_item fifth"></li>
    <li class="book_item sixth"></li>
  </ul>
  <div class="shelf"></div>
</div>

css程式碼：

  <style>
body {
  background-color: #1e6cc7;
  width: 100%;
  height: 100vh;
  margin: 0;
}

.bookshelf_wrapper {
  position: relative;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.books_list {
  margin: 0 auto;
  width: 300px;
  padding: 0;
}

.book_item {
  position: absolute;
  top: -120px;
  box-sizing: border-box;
  list-style: none;
  width: 40px;
  height: 120px;
  opacity: 0;
  background-color: #1e6cc7;
  border: 5px solid white;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: translateX(300px);
          transform: translateX(300px);
  -webkit-animation: travel 2500ms linear infinite;
          animation: travel 2500ms linear infinite;
}
.book_item.first {
  top: -140px;
  height: 140px;
}
.book_item.first:before, .book_item.first:after {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: white;
}
.book_item.first:after {
  top: initial;
  bottom: 10px;
}
.book_item.second:before, .book_item.second:after, .book_item.fifth:before, .book_item.fifth:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 17.5px;
  border-top: 5px solid white;
  border-bottom: 5px solid white;
}
.book_item.second:after, .book_item.fifth:after {
  top: initial;
  bottom: 10px;
}
.book_item.third:before, .book_item.third:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 10px;
  left: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 5px solid white;
}
.book_item.third:after {
  top: initial;
  bottom: 10px;
}
.book_item.fourth {
  top: -130px;
  height: 130px;
}
.book_item.fourth:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 46px;
  left: 0;
  width: 100%;
  height: 17.5px;
  border-top: 5px solid white;
  border-bottom: 5px solid white;
}
.book_item.fifth {
  top: -100px;
  height: 100px;
}
.book_item.sixth {
  top: -140px;
  height: 140px;
}
.book_item.sixth:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  bottom: 31px;
  left: 0px;
  width: 100%;
  height: 5px;
  background-color: white;
}
.book_item.sixth:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  bottom: 10px;
  left: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 5px solid white;
}
.book_item:nth-child(2) {
  -webkit-animation-delay: 416.66667ms;
          animation-delay: 416.66667ms;
}
.book_item:nth-child(3) {
  -webkit-animation-delay: 833.33333ms;
          animation-delay: 833.33333ms;
}
.book_item:nth-child(4) {
  -webkit-animation-delay: 1250ms;
          animation-delay: 1250ms;
}
.book_item:nth-child(5) {
  -webkit-animation-delay: 1666.66667ms;
          animation-delay: 1666.66667ms;
}
.book_item:nth-child(6) {
  -webkit-animation-delay: 2083.33333ms;
          animation-delay: 2083.33333ms;
}

.shelf {
  width: 300px;
  height: 5px;
  margin: 0 auto;
  background-color: white;
  position: relative;
}
.shelf:before, .shelf:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #1e6cc7;
  background-image: -webkit-radial-gradient(rgba(255, 255, 255, 0.5) 30%, rgba(0, 0, 0, 0) 0%);
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 30%, rgba(0, 0, 0, 0) 0%);
  background-size: 10px 10px;
  background-position: 0 -2.5px;
  top: 200%;
  left: 5%;
  -webkit-animation: move 250ms linear infinite;
          animation: move 250ms linear infinite;
}
.shelf:after {
  top: 400%;
  left: 7.5%;
}

@-webkit-keyframes move {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 10px;
  }
}

@keyframes move {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 10px;
  }
}
@-webkit-keyframes travel {
  0% {
    opacity: 0;
    -webkit-transform: translateX(300px) rotateZ(0deg) scaleY(1);
            transform: translateX(300px) rotateZ(0deg) scaleY(1);
  }
  6.5% {
    -webkit-transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
            transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
  }
  8.8% {
    -webkit-transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
            transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateX(270px) rotateZ(0deg);
            transform: translateX(270px) rotateZ(0deg);
  }
  17.6% {
    -webkit-transform: translateX(247.2px) rotateZ(-30deg);
            transform: translateX(247.2px) rotateZ(-30deg);
  }
  45% {
    -webkit-transform: translateX(165px) rotateZ(-30deg);
            transform: translateX(165px) rotateZ(-30deg);
  }
  49.5% {
    -webkit-transform: translateX(151.5px) rotateZ(-45deg);
            transform: translateX(151.5px) rotateZ(-45deg);
  }
  61.5% {
    -webkit-transform: translateX(115.5px) rotateZ(-45deg);
            transform: translateX(115.5px) rotateZ(-45deg);
  }
  67% {
    -webkit-transform: translateX(99px) rotateZ(-60deg);
            transform: translateX(99px) rotateZ(-60deg);
  }
  76% {
    -webkit-transform: translateX(72px) rotateZ(-60deg);
            transform: translateX(72px) rotateZ(-60deg);
  }
  83.5% {
    opacity: 1;
    -webkit-transform: translateX(49.5px) rotateZ(-90deg);
            transform: translateX(49.5px) rotateZ(-90deg);
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(0px) rotateZ(-90deg);
            transform: translateX(0px) rotateZ(-90deg);
  }
}
@keyframes travel {
  0% {
    opacity: 0;
    -webkit-transform: translateX(300px) rotateZ(0deg) scaleY(1);
            transform: translateX(300px) rotateZ(0deg) scaleY(1);
  }
  6.5% {
    -webkit-transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
            transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
  }
  8.8% {
    -webkit-transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
            transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateX(270px) rotateZ(0deg);
            transform: translateX(270px) rotateZ(0deg);
  }
  17.6% {
    -webkit-transform: translateX(247.2px) rotateZ(-30deg);
            transform: translateX(247.2px) rotateZ(-30deg);
  }
  45% {
    -webkit-transform: translateX(165px) rotateZ(-30deg);
            transform: translateX(165px) rotateZ(-30deg);
  }
  49.5% {
    -webkit-transform: translateX(151.5px) rotateZ(-45deg);
            transform: translateX(151.5px) rotateZ(-45deg);
  }
  61.5% {
    -webkit-transform: translateX(115.5px) rotateZ(-45deg);
            transform: translateX(115.5px) rotateZ(-45deg);
  }
  67% {
    -webkit-transform: translateX(99px) rotateZ(-60deg);
            transform: translateX(99px) rotateZ(-60deg);
  }
  76% {
    -webkit-transform: translateX(72px) rotateZ(-60deg);
            transform: translateX(72px) rotateZ(-60deg);
  }
  83.5% {
    opacity: 1;
    -webkit-transform: translateX(49.5px) rotateZ(-90deg);
            transform: translateX(49.5px) rotateZ(-90deg);
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(0px) rotateZ(-90deg);
            transform: translateX(0px) rotateZ(-90deg);
  }
}

  </style>

正在學習web前端或者對web前端感興趣的可以來前端群：575308719，大量乾貨，分享歡迎初學和進階中的小夥伴。

web前端小案例-純css書架裝載機

html程式碼： <div class="bookshelf_wrapper"> <ul class="books_list"> <li class="book_item first"></li> <

web前端小案例-純css製作水滴效果

html程式碼：<div class="drip"></div>css程式碼： <style> html, body { margin: 0; height: 100%; width: 100%; display: flex; background-c

web前端小案例-css3制作瀏覽器背景漸變背

JavaScript 前端 css3 案例知識點：rgb全色循環算法，HEX與RGB顏色轉換算法、CSS3顏色漸變，CSS3漸變色兼容ie方法，定時器與循環，函數封裝,數組應用等。 css代碼： <style> *{margin:0;padding:0;}

web前端小白案例，愛新鮮抽屜式特效

前端小白案例特效源碼知識點：企業布局技巧，如何高效的編寫CSS樣式，常用選擇器，基本標簽，動態布局，盒子模型，jquery類庫調用，JS特效編寫，JS編程思維等。對前端感興趣或者正在學習web前端的小夥伴可以來前端群：189394454，每天都會有幹貨分享。html代碼：

web前端小白案例-鼠標移入移出效果

前端 css3 javascript html5 知識點：html標簽，css樣式（企業樣式的活用），html加css布局思維，代碼優化。特效原理（class類名活用）。 html代碼： <div id="container"> <div class

我的IT夢——web前端開發之HTML,CSS（一）

jpg 標記語言方便 add body 前端 input cti 列表 HTML HTML全稱HyperText Markup Language（超文本標記語言）標簽成對出現 <!DOCTYPE html> 文檔類型定義 < > 標

我的web前端學習之路-CSS-引入

com imp port 之路 es2017 內嵌學習常用方式多用連接導入方式優先級：內聯>內嵌>@import方式>link方式（常用）我的web前端學習之路-CSS-引入

我的web前端學習之路-CSS-選擇器

選擇產生之路 css 註意 images nbsp 前端 ges 選擇器指定了要作用的標簽直接指定一個準確元素名，對其產生作用指定標簽元素class屬性的值，可選指定特定的標簽元素，不要忘記“點”！（註意！！）class屬性的值可以用空格隔開表示多個cla

我的web前端學習之路-CSS-字體和文本

技術你是 let cor meta round ack san one 1 <head> 2 <meta charset="utf-8"> 3 <title>css字體和文本</title> 4

我的web前端學習之路-CSS-列表和表格

表示 hang idt char rac 一個 ddr web前端 9.png list-style-image和list-style-type只能選擇一個使用 border-collapse和border-spacing不能同時使用 1 <head>

web前端【補充】CSS補充

head absolute lis after com 鼠標 lang pac doc css常用的一些屬性： 1.去掉下劃線：text-decoration:none ;2.加上下劃線： text-decoration: underline; 3.調整文本和圖片的位置（

web前端基礎案例-開發QQ空間旋轉時光軸

前端案例源碼編程 javascript 知識點：html標簽，css樣式屬性，代碼優化，行業規範，布局思路，javascript基礎，jquery方法，邏輯思維。html代碼： <div class="con"> <div class="to

web前端實用案例-商城網站購物車拋物線效果

商城拋物線前端源碼購物車知識點：靜態布局技巧，定位，浮動，背景設置，CSS樣式選擇器javascript特效，jquery庫調用，插件調用，如果使用插件，編程思維與技巧。 html代碼： <div class="banner"></div>

web前端實用案例-開發餓了麽LBS移動地圖點餐系統

前端 javascript 餓了麽點餐 LBS 知識點：html/css，標簽運用、樣式講解、靜態開發布局、行業標準。JS基礎、if判斷、jq方法 Dom操作、邏輯思維。 html代碼： <div class="top"> <div class=

Web前端開發之HTML+CSS基礎入門(框架)

AR 網頁 html 表單提交 pos 部分加載 selected area pin HTML框架詳解與框架布局? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 1)什麽是框架框架將瀏覽器劃分成不同的部分，每一部分加載不同的網頁，實現在同一

Web前端開發之HTML+CSS基礎入門(使用CSS樣式的方式)

AD 層疊樣 b前端開發 col In 基於允許 ML 語言 1) HTML<!DOCTYPE> 聲明標簽 a.定義和用法 <!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標簽之前。 <!DOCTYP

Web前端基礎 HTML以及CSS簡單標籤

目錄 HTML head中常見的標籤 body中常見的標籤 HTML實體 HTML：超文字標記語言（英語：HyperText Markup Language）是一種用於建立網頁的標準標記語言用HTML語法寫成的檔案稱為網頁檔案，字尾為 .html 或 .htm 一個最簡單的網頁

web前端（8）—— CSS選擇器

選擇器選擇器，說白了就是html的標籤或者其相關特性，在一個HTML頁面中會有很多很多的元素，不同的元素可能會有不同的樣式，某些元素又需要設定相同的樣式，選擇器就是用來從HTML頁面中查詢特定元素的，找到元素之後就可以為它們設定樣式了。選擇器為樣式規則指定一個作用範圍基本選

web前端（9）—— CSS屬性

屬性終於到css屬性，前面就零零散散的用了什麼color，font-size之類，本篇博文就專項的介紹它了字型屬性 font-family 此屬性是設定字型樣式的，比如微軟雅黑，方正書體，華文宋體之類的例，給body標籤設定字型： body { font-fami

web前端小白快速進階的網站，強力推薦！

小編跟你們一樣是從小白過來的，很多人剛學習前端的時候不太清楚該去哪裡找到合適的資料入門,而且學習的方向很亂,這樣學習很久也沒有效率,很難找到合適的工作,今天小編就給大家分享幾個新手web前端常用到的幾個入門學習的網站,希望大家能夠好好學習。用來查詢一些標籤的屬性,每一個剛學習前端的夥伴,

web前端小案例-純css書架裝載機

相關推薦