快來一起實現屬於自己的自行車吧！

来源:https://www.cnblogs.com/yidaixiaohui/archive/2018/02/13/8446788.html
-Advertisement-
Play Games

純CSS3打造自行車 廢話不想多說，我們直接上圖和代碼最實際。 我們先來看看效果圖吧，看了效果圖之後你們就會有動力去打造屬於你們自己的自行車啦 怎麼樣，帥不帥呀，快來打造帥帥的自行車吧 代碼如下，複製即可用，不過這是我的自行車，你們可不能盜取我的自行車哦 你們打造好你們的自行車了嗎？還沒有的小伙伴們 ...


 純CSS3打造自行車

 廢話不想多說，我們直接上圖和代碼最實際。

 我們先來看看效果圖吧，看了效果圖之後你們就會有動力去打造屬於你們自己的自行車啦

 

 

  怎麼樣，帥不帥呀，快來打造帥帥的自行車吧

  代碼如下，複製即可用，不過這是我的自行車，你們可不能盜取我的自行車哦

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>快來打造屬於你們自己的自行車吧</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0
            }
            
            ol,
            ul {
                list-style: none/*去掉圓點或數字*/
            }
            
            .cycle-outer {
                width: 534px;
                height: 260px;
                position: absolute;
                /*絕對定位*/
                top: 50%;
                /*距離頂部*/
                margin: -160px 0 0 -267px;
                /*距離外邊距*/
                left: 50%;
            }
            
            .cycle-wrapper {
                width: 534px;
                height: 260px;
                margin: 0 auto;
                position: relative;
                /*相對定位*/
            }
            
            .cycle-wheel-front {
                /*前輪*/
                margin: 100px 0 0 330px;
            }
            
            .cycle-wheel-back {
                /*後輪*/
                margin: 100px 0 0 0px;
            }
            
            .cycle-wheel-outer {
                background: transparent;
                border: 5px solid #aaa;
                border-radius: 50%;
                /*畫外輪圓圈*/
                width: 190px;
                height: 190px;
                position: absolute;
                margin-top: 5px;
                animation: wheel-rotate 2s linear infinite;
                /*定義動畫*/
            }
            /*輪胎開始旋轉*/
            @keyframes wheel-rotate {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }
            
            .cycle-wheel-outer:after {
                /*插入內輪胎圓圈*/
                background: transparent;
                border: 4px solid #EF9058;
                border-radius: 50%;
                width: 176px;
                height: 176px;
                position: absolute;
                margin: 3px;
                content: "";
            }
            
            .spoke {
                /*開始畫車輪線條*/
                position: absolute;
                width: 1px;
                height: 200px;
                background: #ccc;
                margin: -5px 0 0 95px;
                z-index: 0;
            }
            
            .spoke:after {
                /*在後面插入兩條*/
                content: "";
                position: absolute;
                width: 1px;
                height: 200px;
                background: #ccc;
                transform: rotate(120deg);
            }
            
            .spoke:before {
                /*在前面插入兩條*/
                content: "";
                position: absolute;
                width: 1px;
                height: 200px;
                background: #ccc;
                transform: rotate(240deg);
            }
            /*輪胎線條完成*/
            
            .spoke-container li:nth-child(2) {
                /*中心點旋轉*/
                transform: rotate(30deg);
            }
            
            .inner-disc {
                /*畫中心軸圓點*/
                background: #666;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                margin: -10px 0 0 -10px;
                top: 50%;
            }
            
            .inner-disc-2 {
                /*畫輪胎中心軸的圓圈*/
                background: transparent;
                width: 6px;
                height: 6px;
                border: 2px solid #FFF;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                margin: -5px 0 0 -5px;
                top: 50%;
            }
            
            .cycle-wheel-back .inner-disc-2:after {
                /*插入後輪軸心齒輪*/
                content: "";
                background: transparent;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                margin: -13px 0 0 -13px;
                top: 50%;
                border: 4px dotted #666;
            }
            .cycle-body {
                margin-left: 125px;
            }
            .front-wheel-frame {/*前叉*/
                background: #5E999B;
                width: 8px;
                height: 180px;
                position: absolute;
                z-index: 2;
                transform: rotate(-25deg);
                margin: -72px 0 0 260px;
            }
            .top-frame {/*上管*/
                background: #5E999B;
                width: 180px;
                height: 8px;
                position: absolute;
                z-index: 2;
                margin: -20px 0 0 62px;
                transform: rotate(-8deg);
            }
            .front-frame {/*下管*/
                background: #5E999B;
                width: 8px;
                height: 160px;
                position: absolute;
                z-index: 2;
                transform: rotate(41deg);
                margin: -36px 0 0 189px;
            }
            .center-frame { /*坐桿*/
                background: #5E999B;
                width: 8px;
                height: 205px;
                position: absolute;
                z-index: 2;
                transform: rotate(-33deg);
                margin: -84px 0 0 75px;
            }
            .back-frame {/*後管*/
                background: #5E999B;
                width: 8px;
                height: 136px;
                position: absolute;
                z-index: 2;
                transform: rotate(39deg);
                margin: -23px 0 0 19px;
            }
            .bottom-frame {/*後叉or平管*/
                background: #5E999B;
                width: 159px;
                height: 8px;
                position: absolute;
                z-index: 2;
                margin: 100px 0 0 -16px;
            }
            .handlebar-front {/*車把*/
                width: 60px;
                height: 8px;
                background: #5E999B;
                z-index: 2;
                position: absolute;
                margin: -68px 0 0 222px;
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            .handlebar-curve {/*車把手*/
                width: 40px;
                height: 40px;
                border: 8px solid #666;
                border-top-right-radius: 100%;
                border-bottom-right-radius: 100%;
                border-bottom-left-radius: 100%;
                background: transparent;
                position: absolute;
                margin: -68px 0 0 258px;
                border-left: 8px solid transparent;
                border-top: 8px solid #666;
                border-bottom: 8px solid #666;
            }
            /*座墊*/
            .seat { 
                width: 50px;
                height: 10px;
                background: #666;
                border-radius: 44%;
                position: absolute;
                margin: -73px 0 0 15px;
            }
            
            .seat:after {
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 0 40px 16px 40px;
                border-color: transparent transparent #666 transparent;
                content: "";
                position: absolute;
                z-index: 3;
                transform: rotate(-12deg);
                position: absolute;
                border-radius: 100%;
                margin: 0 0 0 -26px;
            }
            .seat:before {
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 0 40px 16px 40px;
                border-color: transparent transparent #666 transparent;
                content: "";
                position: absolute;
                z-index: 3;
                transform: rotate(179deg);
                position: absolute;
                border-radius: 100%;
                margin: 0 0 0 -26px;
            }
            .seat span {
                width: 32px;
                height: 19px;
                background: #666;
                border-radius: 100%;
                position: absolute;
                margin
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql資料庫的基本操作：創建資料庫、查看資料庫、修改資料庫、刪除資料庫
    本節相關： 創建資料庫，查看資料庫，修改資料庫，刪除資料庫 首發時間:2018-02-13 20:47 創建資料庫 ： 語法 ： create database 資料庫名字[庫選項]; 庫選項說明 ： 庫選項是可選項，可以不寫 庫選項有兩項：字元集和校對集。 庫選項的字元集是資料庫識別或存儲數據使用... ...
  • Python之MYsql、資料庫
    一、資料庫的操作及安裝 1、安裝 MySQL Community Server 5.7.16 版本 2、初始化 mysqld --inisialize-insecure 3、啟動 mysqld 4、啟動MySQL客戶端並連接MySQL服務 mysqld --initialize-insecure命令 ...
  • 【讀書筆記】iOS-Apple的移動設備硬體
    本書中有一個關鍵觀點是：“硬體並不是特別重要，用戶體驗才是真正的殺手級應用。“儘管如此，多瞭解一些你使用的硬體的相關知識，對於整個項目來說是必備的，而對於設計和開發高質量的作品來說敢是不可或缺的。 人們經常咨詢應該如可設計肉站及Web應用，以便可以相容同類設備的不同型號，而答案其實如終如一：如果要設 ...
  • iOS學習——UIView的研究
    在iOS開發中，我們知道有一個共同的基類——NSObject，但是對於界面視圖而言，UIView是非常重要的一個類，UIView是很多視圖控制項的基類，因此，對於UIView的學習閑的非常有必要。在iOS學習——iOS 整體框架及類繼承框架圖中列出了iOS中所有類的繼承框架圖，其中下麵這張圖就是iOS ...
  • iOS學習——@class和#import的區別
    在iOS開發過程中，我們在一些源碼中經常會看到導包的時候有的用#import進行導包，但是有的的時候也會看到用@class進行導包，那麼這兩種方式有什麼區別呢？ 一 @class和#import的主要區別 首先說一下最主要的區別： 使用#import引入一個類的頭文件，編譯時會將該類的頭文件中的所有 ...
  • 清除表單自帶樣式
    //輸入框 input { outline: none; } //按鈕 button::-moz-focus-inner { border: none; } ...
  • 對Javascript到底瞭解多少，一測便知道
    筆者在這裡附上一段代碼，請讀者思考一下程式的運行結果: 運行結果如下: 不知道讀者有沒有猜對呢？哈哈，可能很多讀者會認為第一行的console.log(a);會輸出undefine ,因為大家都知道變數提升與函數提升，而Javascript編譯器執行代碼也是逐行執 行，當js文件首先載入到記憶體時，編 ...
  • 各類型盒子的基線的確定
    確定盒子的基線的規則 1.1 確定inline-block的基線 The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類