滚动的轮子案例

简介: 滚动的轮子案例

使用tranform进行展示


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 1200px;
            height: 200px;
            background-color: skyblue;
        }
        img {
            height: 100%;
            transition: all 5s;
        }
        div:hover img {
            transform: translate(800px) rotate(360deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/tyre.png" alt="">
    </div>
</body>
</html>


相关文章
uniapp拖动排序实现思路
uniapp拖动排序实现思路
165 0
|
5月前
|
C# UED 开发者
WPF动画大揭秘:掌握动画技巧,让你的界面动起来,告别枯燥与乏味!
【8月更文挑战第31天】在WPF应用开发中,动画能显著提升用户体验,使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法,包括平移、缩放、旋转等常见类型,并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
282 0
|
5月前
|
JavaScript UED 开发者
精彩!Vue 实现消息列表向上无缝滚动!丝滑...
精彩!Vue 实现消息列表向上无缝滚动!丝滑...
|
7月前
|
图形学
【unity小技巧】Unity中实现一个战斗连击连招系统,可以动态添加减少连击连招段数功能
【unity小技巧】Unity中实现一个战斗连击连招系统,可以动态添加减少连击连招段数功能
162 0
|
8月前
|
小程序
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
|
C语言
C项目(贪吃蛇BUG解决及功能扩展)
C项目(贪吃蛇BUG解决及功能扩展)
154 0
Threejs入门进阶实战案例(4):addEventListener() 方法自适应窗口显示的方案
Threejs入门进阶实战案例(4):addEventListener() 方法自适应窗口显示的方案
137 0
|
前端开发
前端项目实战116-table进度条进行横向滚动
前端项目实战116-table进度条进行横向滚动
114 0
|
前端开发 JavaScript 索引
2022年了!再来手撕一下前端瀑布流代码吧!
**前言: **知识是学不完的,可是我们为什么还是要不停的去学习呢。原因很简单,因为我们要产生更多的知识,让更多的人学不完!前端技术也是在不停的革新,我们要做那个让别人有学不完的知识的人
1035 0
2022年了!再来手撕一下前端瀑布流代码吧!
|
前端开发 JavaScript Java
项目优化之循环优化(Unity3D)
• 这篇文章的主要目的是说明为什么要在Unity中避免使用foreach循环 • 你注意到游戏中出现的一些问题了吗? • 是否是在循环遍历迭代中出现的? • 你时常需要遍历许多GameObject列表吗? • 如果你有很多像这样的问题,那么你就来对地方了! “通常问题/由于在每一帧中GC(垃圾回收器)的高度回收所导致的,所以在解决这个问题之前,我们先来了解一下什么是GC(垃圾回收器)”