使用css做一个简单的车轮滚滚效果

学了css之后发现很多效果只要几行代码就能实现，这个车轮滚滚的效果也不例外。
首先设置个大盒子，设置他的宽度（随意多少，但是肯定要比车轮的宽度大），高度与车轮保持一致即可。跟我一起来做个简单的车轮滚滚吧。

<div class="box"><img src="./images/tyre.png" alt=""></div>.box {width: 1400px;height: 301px;border: 2px solid #000;}然后使用:hover给图片添加移动旋转效果.box:hover img{/* 移动图片 旋转图片 */transform: translateX(1100px) rotate(1turn);}最后设置一个过渡，让其显示效果.box img{transition: all 2s;}
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 1400px;height: 301px;border: 2px solid #000;  }.box img{transition: all 2s;}.box:hover img{/* 移动图片 旋转图片 */transform: translateX(1100px) rotate(1turn);}</style>
</head>
<body><div class="box"><img src="./images/tyre.png" alt=""></div>
</body>
</html>

使用css做一个简单的车轮滚滚效果相关推荐

用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
使用HTML+CSS完成一个简单的立体字效果
使用HTML+CSS完成一个简单的立体字效果* 此处用木兰辞来举列子来看看效果 ps:技术不佳大佬们轻喷 /*标题及其立体效果*/ .Header {/*font-size: 50px;*//*fo ...
html魔方转动效果,简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
用HTML+CSS做一个简单好看的环保网页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 环境保护 | 保护地球 | 校园环保 | 垃圾分类 | 绿色家 ...
用HTML+CSS做一个简单好看的校园社团网页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 ...
html+css——做一个简单的底部导航栏
ps:小项目由html和css实现目录项目设计效果图设计 html部分 css部分源代码项目设计效果图话不多说,先直接上一下完成后的效果图: 通过以上效果图可以大致想一下你的思路,以及 ...
html/css做一个简单的个人简历
今天闲着无聊做了个简单的小demo,做完了之后还是很无聊,就简单整理了下,写下了这篇文章. 话不多说,按照惯例先放效果图上面是移动端的效果图,pc端布局一样,只是某些元素的大小略有不同响应式主要是 ...
用HTML+CSS做一个简单的美食网页---web学生网页设计作业源码
Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业,精彩专栏推荐美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 | 餐饮文化 | 等网站的设计 ...

使用css做一个简单的车轮滚滚效果

使用css做一个简单的车轮滚滚效果相关推荐

最新文章

热门文章