HTML+CSS实现小黄人骑摩托

效果演示

HTML+CSS创建的摩托车动画效果。它使用了CSS的渐变、径向渐变、背景位置、边框半径和动画等属性来设计和实现动画。

HTML

html 复制代码
<span class="motorcycle"></span>
  • span 元素被赋予了类名 motorcycle,这个类名将被用来应用CSS样式

CSS

css 复制代码
.motorcycle {
    width: 106px;
    height: 56px;
    display: block;
    margin: 30px auto;
    background-image: linear-gradient(#FFCA27 50px, transparent 0), linear-gradient(#FFCA27 50px, transparent 0), linear-gradient(#FFCA27 50px, transparent 0), linear-gradient(#FFCA27 50px, transparent 0), radial-gradient(circle 14px, #ffffff 100%, transparent 0);
    background-size: 48px 15px, 15px 35px, 15px 35px, 25px 15px, 28px 28px;
    background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
    background-repeat: no-repeat;
    position: relative;
    transform: rotate(-45deg);
    box-sizing: border-box;
}

.motorcycle::after,
.motorcycle::before {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    border: 6px solid #FF6238;
    border-radius: 50%;
    left: -45px;
    top: -10px;
    background-repeat: no-repeat;
    background-image: linear-gradient(#FBF9F7 64px, transparent 0), linear-gradient(#FBF9F7 66px, transparent 0), radial-gradient(circle 4px, #FF6238 100%, transparent 0);
    background-size: 40px 1px, 1px 40px, 8px 8px;
    background-position: center center;
    box-sizing: border-box;
    animation: bike 0.3s linear infinite;
}

.motorcycle::before {
    left: 25px;
    top: 60px;
}

@keyframes bike {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
  • width 和 height 设置了元素的宽度和高度。
  • display: block; 和 margin: 30px auto; 将元素居中显示。
  • background-image 使用了多个渐变来创建摩托车的各个部分,包括线性渐变和径向渐变。
  • background-size 和 background-position 定义了背景图像的大小和位置。
  • transform: rotate(-45deg); 将元素旋转-45度,以便摩托车的图形正确显示。
  • box-sizing: border-box; 确保边框和内边距包含在元素的宽度和高度内。
  • ::after 和 ::before 伪元素被用来创建额外的视觉效果,这里它们被用来创建摩托车的轮子。
  • content: ''; 是一个必需的属性,用于创建伪元素。
  • position: absolute; 将伪元素定位在摩托车的特定位置。
  • border 和 border-radius 创建了一个圆形的轮子边框。
  • background-image、background-size 和 background-position 用于在轮子中心添加一个更小的圆点,模拟轮子的中心。
  • animation: bike 0.3s linear infinite; 应用了一个名为 bike 的动画,使轮子无限循环旋转。
  • motorcycle::before两个轮子分别位于摩托车的两侧
  • @keyframes bike 定义了一个名为 bike 的动画,它使元素从0度旋转到360度,创建了一个连续旋转的效果。
相关推荐
天天向上10241 小时前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
社恐的下水道蟑螂2 小时前
前端小彩蛋:纯 CSS 实现情侣小球互动,甜到齁的代码我扒下来了
css
charlie1145141914 小时前
HTML 理论系统笔记2
前端·笔记·学习·html·基础·1024程序员节·原生
UIUV5 小时前
CSS 高级动画学习笔记 —— 从 “亲吻小球” 案例看 CSS 核心技术
前端·css
www_stdio5 小时前
从布局到动效:以水平垂直居中为基础、OOCSS 为架构、协同关键帧为灵魂的 CSS 动画实现(小球亲吻案例全解析)
css·html
新晨4375 小时前
CSS响应式布局卡片
css
上车函予5 小时前
点击即扩散:使用 View Transition API 实现 UnoCSS 官网同款主题切换动画
前端·javascript·css
charlie1145141915 小时前
从模仿到掌握:尝试一下Native CSS手写一个好看的按钮
前端·css·学习·ui
时间的情敌6 小时前
Vue3+CSS 实现3D卡片动画
前端·css·3d
小九今天不码代码6 小时前
CSS技巧:使用 box-shadow + outline 实现多重边框与圆角阴影完美结合
css·outline·box-shadow·多重边框·圆角边框·前端视觉效果·css3技巧