iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >如何利用纯CSS3实现动态的自行车特效
  • 429

0
分享到

如何利用纯CSS3实现动态的自行车特效

2024-04-02 19:04:59 429人浏览 八月长安
摘要

这篇文章主要介绍如何利用纯css3实现动态的自行车特效，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！首先来看看实现的效果图（静态）：实例源码：<!DOCTYPE ht

这篇文章主要介绍如何利用纯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 {
    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: 1px 0 0 -22px;
    transform: rotate(-11deg);
   }
   
   .chain-rotation {
    position: absolute;
    z-index: 16;
   }
   
   .chain-disc-inner {
    background: #666;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    margin: 2px;
    z-index: 4;
   }
   .chain-disc-outer {
    background: #FFF;
    width: 22px;
    height: 22px;
    border: 5px solid #666;
    border-radius: 50%;
    position: absolute;
    margin: 87px 0 0 250px;
    z-index: 3;
    content: "";
   }
   
   .chain-rods {
    height: 70px;
    width: 6px;
    background: #666;
    position: absolute;
    margin: 67px 0 0 263px;
    z-index: 15;
    animation: wheel-rotate 2s linear infinite;
   }
   .chain-rods:before {
    content: "";
    height: 70px;
    width: 6px;
    background: #666;
    position: absolute;
    transform: rotate(120deg);
   }
   .chain-rods:after {
    content: "";
    height: 70px;
    width: 6px;
    background: #666;
    position: absolute;
    transform: rotate(240deg);
    -WEBkit-transform: rotate(240deg);
    -moz-transform: rotate(240deg);
   }
   .outer-axle {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background: transparent;
    border: 5px solid #666;
    position: absolute;
    margin: 62px 0 0 226px;
    z-index: 3;
   }
   
   .outer-axle:after {
    content: "";
    height: 74px;
    width: 74px;
    border-radius: 50%;
    background: transparent;
    border: 5px dotted #666;
    margin: -7px;
    position: absolute;
    z-index: 3;
    animation: wheel-rotate 2s linear infinite;
   }
   
   .chain-up {
    background-color: transparent;
    background-size: 8px 2px;
    background-position: 0 0, 30px 30px;
    width: 155px;
    height: 4px;
    position: absolute;
    z-index: 9;
    background: #EEE;
    transform: rotate(-11deg);
    margin: 76px 0 0 98px;
   }
   .chain-up:before {
    content: "";
    background-color: transparent;
    background-image: linear-gradient(90deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
    background-size: 8px 2px;
    background-position: 0 0, 30px 30px;
    width: 155px;
    height: 4px;
    animation: chainUp 2s linear infinite;
    position: absolute;
    z-index: 10;
   }
   .chain-bottom {
    background-color: transparent;
    background-size: 8px 2px;
    background-position: 0 0, 30px 30px;
    width: 155px;
    height: 4px;
    position: absolute;
    z-index: 9;
    background: #EEE;
    -webkit-transform: rotate(9deg);
    -moz-transform: rotate(9deg);
    transform: rotate(9deg);
    margin: 127px 0 0 98px;
   }
   
   .chain-bottom:before {
    content: "";
    background-color: transparent;
    background-image: linear-gradient(90deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
    background-size: 8px 2px;
    background-position: 0 0, 30px 30px;
    width: 155px;
    height: 4px;
    animation: chainDown 2s linear infinite;
    position: absolute;
    z-index: 10;
   }
   
   .pedal-rod {
    height: 120px;
    width: 6px;
    background: #666;
    position: absolute;
    margin: -25px 0 0 0px;
   }
   
   .pedal-rod:before {
    width: 40px;
    height: 10px;
    background: #666;
    position: absolute;
    margin: 10px;
    content: "";
    margin: -7px -17px;
    animation: pedal1 2s linear infinite;
   }
   
   .pedal-rod:after {
    width: 40px;
    height: 10px;
    background: #666;
    position: absolute;
    margin: 10px;
    content: "";
    margin: 119px -17px;
    animation: pedal2 2s linear infinite;
   }
   
   .bottle-holder {
    width: 20px;
    height: 36px;
    background: #daeded;
    border: 3px solid #5E999B;
    position: absolute;
    margin: 54px 0 0 -25px;
   }
   
   .bottle-holder:after {
    width: 20px;
    height: 3px;
    content: "";
    background: #5E999B;
    position: absolute;
    margin: 24px 0 0 0px;
   }
   
   .bottle-holder:before {
    background-color: #daeded;
    width: 18px;
    height: 10px;
    border-radius: 30% / 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    content: "";
    position: absolute;
    margin-top: -13px;
    border: 1px solid #98baba;
    border-bottom: 0;
   }
   .bottle-holder span {
    position: absolute;
    width: 9px;
    height: 4px;
    background: #666;
    margin: -17px 0 0 5px;
   }
   
   @keyframes chainUp {
    0% {
     background-position: 0 25%;
    }
    100% {
     background-position: 100% 0;
    }
   }
   @keyframes chainDown {
    0% {
     background-position: 100% 0;
    }
    100% {
     background-position: 0 25%;
    }
   }
   
   @keyframes pedal1 {
    0% {
     transform: rotate(00deg);
    }
    25% {
     transform: rotate(-140deg);
    }
    50% {
     transform: rotate(-180deg);
    }
    75% {
     transform: rotate(-240deg);
    }
    100% {
     transform: rotate(-360deg);
    }
   }
   @keyframes pedal2 {
    0% {
     transform: rotate(00deg);
    }
    25% {
     transform: rotate(-60deg);
    }
    50% {
     transform: rotate(-180deg);
    }
    75% {
     transform: rotate(-340deg);
    }
    100% {
     transform: rotate(-360deg);
    }
   }
  </style>
 </head>

 <body>
  <div class="cycle-outer">
   <div class="cycle-wrapper">
    <!--
                 描述：车架
                -->
    <div class="cycle-body">
     <div class="seat">
      <span></span>
     </div>
     <div class="front-wheel-frame"></div>
     
     <div class="top-frame"></div>
     <div class="front-frame">
      <div class="bottle-holder">
       <span></span>
      </div>
     </div>
     <div class="center-frame"></div>
     <div class="back-frame"></div>
     <div class="bottom-frame"></div>
     <div class="handlebar-front"></div>
     <div class="handlebar-curve"></div>
    </div>
    <!--
                 描述：后轮
                -->
    <div class="cycle-wheel cycle-wheel-back">
     <div class="cycle-wheel-outer">
      <div class="cycle-wheel-inner">
       <div class="cycle-wheel-inner-padding">
        <ul class="spoke-container">
         <li class="spoke"></li>
         <li class="spoke"></li>
        </ul>
        <div class="inner-disc"></div>
        <div class="inner-disc-2"></div>
       </div>
      </div>
     </div>
    </div>
    <!--
                 描述：前轮
                -->
    <div class="cycle-wheel cycle-wheel-front">
     <div class="cycle-wheel-outer">
      <div class="cycle-wheel-inner">
       <div class="cycle-wheel-inner-padding">
        <ul class="spoke-container">
         <li class="spoke"></li>
         <li class="spoke"></li>
        </ul>
        <div class="inner-disc"></div>
        <div class="inner-disc-2"></div>
       </div>
      </div>
     </div>
    </div>
    <!--
                 描述：中心轴  车链子 牙盘 水壶架  水壶   脚踏
                -->
    <div class="chain-up"></div>
    <div class="chain-bottom"></div>
    <div class="chain-rotation">
     <div class="outer-axle"></div>
     <div class="chain-disc-outer">
      <div class="chain-disc-inner"></div>
     </div>

    </div>
    <div class="chain-rods">
     <div class="pedal-rod"></div>
    </div>
   </div>
  </div>

  <div style="text-align:center;clear:both;">
 </body>

</html>

以上是“如何利用纯CSS3实现动态的自行车特效”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网html频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何利用纯CSS3实现动态的自行车特效

本文链接: https://www.lsjlt.com/news/66166.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何利用纯CSS3实现动态的自行车特效
    这篇文章主要介绍如何利用纯CSS3实现动态的自行车特效，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！首先来看看实现的效果图（静态）：实例源码：<!DOCTYPE ht...
    99+
    2024-04-02
  • 如何利用纯css3实现文字亮光特效
    这篇文章主要讲解了“如何利用纯css3实现文字亮光特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用纯css3实现文字亮光特效”吧！　　今天给大家分...
    99+
    2024-04-02
  • 怎么用纯CSS实现一个转动的自行车车轮的动画效果
    这篇文章主要为大家展示了“怎么用纯CSS实现一个转动的自行车车轮的动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么用纯CSS实现一个转动的自行车车轮的...
    99+
    2024-04-02
  • 如何使用纯CSS3的transform实现心动效果
    这篇文章主要介绍如何使用纯CSS3的transform实现心动效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！心动送一个爱心表示我对你心动,使用纯 CSS3 的transform实现：css 部分html,body...
    99+
    2023-06-27
  • 怎么用纯css3实现炫酷的动画背画特效
    本篇内容介绍了“怎么用纯css3实现炫酷的动画背画特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　之...
    99+
    2024-04-02
  • 如何使用CSS3实现按钮悬停闪烁动态特效
    本篇内容介绍了“如何使用CSS3实现按钮悬停闪烁动态特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！我们...
    99+
    2024-04-02
  • CSS3如何实现自定义Checkbox特效
    这篇文章给大家分享的是有关CSS3如何实现自定义Checkbox特效的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果图如下实例代码<!DOCTYPE html&...
    99+
    2024-04-02
  • 怎么利用html5和css3实现的3D滚动特效
    本篇内容介绍了“怎么利用html5和css3实现的3D滚动特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成...
    99+
    2024-04-02
  • 怎么用纯CSS3实现的tab选项卡特效
    这篇文章主要介绍“怎么用纯CSS3实现的tab选项卡特效”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么用纯CSS3实现的tab选项卡特效”文章能帮助大家解决问题...
    99+
    2024-04-02
  • 如何利用CSS3动画实现圆形动态时钟
    小编给大家分享一下如何利用CSS3动画实现圆形动态时钟，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！ 什么是动画？这是我们应该先了解的问题。按照百度百科的解释动画是采用逐帧拍摄对...
    99+
    2024-04-02
  • CSS3如何实现单选框动画特效
    这篇文章主要讲解了“CSS3如何实现单选框动画特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3如何实现单选框动画特效”吧！HTML 代码<d...
    99+
    2024-04-02
  • 如何利用纯css3实现好看的3D表单
    这篇文章主要讲解了“如何利用纯css3实现好看的3D表单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用纯css3实现好看的3D表单”吧！　　今天要给...
    99+
    2024-04-02
  • css3怎么实现图片的自动轮播特效
    这篇文章主要介绍css3怎么实现图片的自动轮播特效，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！     使用css3实现轮播特效的主体思想   &...
    99+
    2024-04-02
  • 如何使用css3实现3d旋转动画特效
    这篇文章将为大家详细讲解有关如何使用css3实现3d旋转动画特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。代码如下:<!doctype html><...
    99+
    2024-04-02
  • 如何利用CSS3的transition属性实现滑动效果
    这篇文章主要讲解了“如何利用CSS3的transition属性实现滑动效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用CSS3的transitio...
    99+
    2024-04-02
  • 怎么用纯css3实现的发光屏幕旋转特效
    这篇文章主要讲解了“怎么用纯css3实现的发光屏幕旋转特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用纯css3实现的发光屏幕旋转特效”吧！　　今天...
    99+
    2024-04-02
  • 如何利用纯css3实现360度翻转的按钮
    这篇文章主要介绍“如何利用纯css3实现360度翻转的按钮”，在日常操作中，相信很多人在如何利用纯css3实现360度翻转的按钮问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • 如何利用Android实现光影流动特效
    本篇内容主要讲解“如何利用Android实现光影流动特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何利用Android实现光影流动特效”吧!MaskFilter 类简介MaskFilter...
    99+
    2023-07-02
  • CSS3如何实现loading预加载动画特效
    小编给大家分享一下CSS3如何实现loading预加载动画特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！该loading特效...
    99+
    2024-04-02
  • 如何利用css3实现进度条效果及动态添加百分比
    这篇文章主要介绍了如何利用css3实现进度条效果及动态添加百分比，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。代码：<!DOCTYPE html><...
    99+
    2023-06-08
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作