CSS示例001:鼠标放div上,实现旋转、放大、移动等效果

GPT能够很好的应用到我们的代码开发中,能够提高开发速度。你可以利用其代码,做出一定的更改,然后实现效能。

css实战中,经常会看到这样的场景,鼠标放到一个图片或者一个div块状时候,会出现旋转、放大、移动等效果。 实现起来也是蛮简单的,虽然简单,但是却很重要,能增加页面的灵动性。

效果图

在这里插入图片描述

源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-11-06
*/
<template><div class="container"><div class="top"><h3>鼠标移上去旋转、放大、移动</h3><div class="author">大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div style="width:640px ; margin:0 auto;"><div class="itemBox img1">360°旋转 </div><div class="itemBox img2">放大</div><div class="itemBox img3">旋转放大</div><div class="itemBox img4">上下左右移动 </div></div></div>
</template><style scoped>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 130px;padding: 10px 0;background: orange;color: #fff;}.itemBox {width: 120px;height: 120px;line-height: 120px;margin: 20px;background-color: #5cb85c;float: left;font-size: 12px;text-align: center;color: #fff;cursor: pointer;}/*效果一:360°旋转 修改rotate(旋转度数)*/.img1 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img1:hover {transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}/*效果二:放大 修改scale(放大的值)*/.img2 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img2:hover {transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);}/*效果三:旋转放大 修改rotate(旋转度数) scale(放大值)*/.img3 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img3:hover {transform: rotate(360deg) scale(1.2);-webkit-transform: rotate(360deg) scale(1.2);-moz-transform: rotate(360deg) scale(1.2);-o-transform: rotate(360deg) scale(1.2);-ms-transform: rotate(360deg) scale(1.2);}/*效果四:上下左右移动 修改translate(x轴,y轴)*/.img4 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img4:hover {transform: translate(0, -10px);-webkit-transform: translate(0, -10px);-moz-transform: translate(0, -10px);-o-transform: translate(0, -10px);-ms-transform: translate(0, -10px);}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/133008.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QtC++与QToolButton详解

介绍 QToolButton 是 Qt 中的一个控件类&#xff0c;用于创建工具按钮&#xff0c;它有以下主要作用和特点&#xff1a; 工具按钮&#xff1a; QToolButton 用于创建工具按钮&#xff0c;允许用户执行各种操作&#xff0c;如启动功能、弹出菜单、打开文件等。工具按钮通常用于…

地址的层次性

地址的层次性 当地址总数并不是很多的情况下&#xff0c;有了唯一地址就可以定位相互通信的主体。然而当地址的总数越来越多时&#xff0c;如何高效地从中找出通信的目标地址将成为一个重要的问题。为此人们发现地址除了具有唯一性还需要具有层次性。其实&#xff0c;在使用电…

基于跳蛛算法的无人机航迹规划-附代码

基于跳蛛算法的无人机航迹规划 文章目录 基于跳蛛算法的无人机航迹规划1.跳蛛搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用跳蛛算法来优化无人机航迹规划。 1.跳蛛搜索算法 …

react配置二级路由

1.在createBrowserRouter上添加basename属性&#xff0c;比如 const RouterRender createBrowserRouter([{path: /,element: <App><Login></Login></App>},...SystemRouter,...InventoryRouter,...FlowManageRouter,{path: "*",element: &…

Verilog 基础知识(一) Verilog 基础语法与注意事项

基础知识 0.1 模块(Module) Verilog中的module可以看成一个具有输入输出端口的黑盒子&#xff0c;该黑盒子有输入和输出接口(信号)&#xff0c;通过把输入在盒子中执行某些操作来实现某项功能。(类似于C语言中的函数) 图1 模块示意图 0.1.1 模块描述 图1 所示的顶层模块(top…

UNI-APP_获取手机品牌

在uni-app中&#xff0c;使用uni.getSystemInfoSync().brand可以获取设备的品牌信息。根据不同设备的品牌&#xff0c;uni.getSystemInfoSync().brand可能返回以下一些常见值 “Apple” - 苹果 “Samsung” - 三星 “Huawei” - 华为 “Xiaomi” - 小米 “OPPO” - OPPO “Vivo…

PaddleX数据集规范

目录 1、图像分类任务 2、目标检测任务 3、主体检测任务 4、图像分割任务 5、特征检索任务 6、文本检测任务 7、文本识别任务 8、版面分析任务 9、表格识别任务 10、关键信息抽取任务 11、点云3D目标检测任务 12、多目3D目标检测任务 13、单目3D目标检测任务 14、长…

CSS鼠标悬浮变小手

当我们在网页设计中需要用户点击或者选择某个元素时&#xff0c;很多时候会使用鼠标悬浮变小手的效果&#xff0c;这种效果可以让用户更快速的完成操作&#xff0c;提高用户体验。 在CSS中设置鼠标悬浮变小手效果非常简单&#xff0c;只需要使用cursor属性即可。以下是具体步骤…

理德外汇: 美元暴跌创近一个半月新低

10月30日-11月3日市场综述&#xff1a;央行超级周果然名不虚传&#xff01;上周美联储鸽派暂停升息令全球股债疯狂暴拉&#xff0c;加上非农就业数据疲弱&#xff0c;市场对美联储再加息的预期降温&#xff0c;美股创下今年最大单周增幅&#xff0c;美元持续下滑&#xff0c;与…

【Redis】Redis整合SSMRedis中的缓存穿透、雪崩、击穿的原因以及解决方案(详解)

目录&#xff1a; 目录 一&#xff0c;SSM整合redis 二&#xff0c;redis注解式缓存 三&#xff0c;Redis中的缓存穿透、雪崩、击穿的原因以及解决方案&#xff08;附图&#xff09; 一&#xff0c;SSM整合redis 1.原因&#xff1a; 整合SSM和Redis可以提升系统的性能、可…

2023 年如何学习编程

在当今的数字时代&#xff0c;程序员的角色比以往任何时候都更加重要。编程技能几乎在每个行业都受到高度重视和追捧。从科技初创公司到成熟企业&#xff0c;对具有适当技术能力的开发人员的需求巨大。 无论是考虑转行还是开始&#xff0c;现在都是成为一名程序员的激动人心的…

2023世界传感器大会开幕,汉威科技多领域创新产品引瞩目

11月5日&#xff0c;2023世界传感器大会在郑州国际会展中心正式拉开帷幕。据悉&#xff0c;本次大会由河南省人民政府、中国科学技术协会主办&#xff0c;郑州市人民政府、河南省工业和信息化厅、河南省科学技术协会、中国仪器仪表学会承办。 大会由“一会一赛一展”组成&#…

【Liunx系统编程】命令模式3

目录 一&#xff0c;zip/unzip压缩指令 二&#xff0c;tar打包/压缩/解包指令 三&#xff0c;uname获取系统信息指令 四&#xff0c;Liunx下常用且重要的按键和关机指令 五&#xff0c;文件之间的互传 1&#xff0c;Windows与Linux之间的互传 2&#xff0c;Linux系统之间…

3.22每日一题(二重积分求平面区域面积)

先复习求平面积分的公式 注&#xff1a;面对平面积分直接使用二重积分对1求积分即可&#xff1b;所以只需要背二重积分的两个公式&#xff1a; 1、直角坐标下对1积分 2、极坐标下对1积分 xy-1是等轴双曲线&#xff01;&#xff01; 1、先画图定区域 2、选择先对x积分还是先对…

深入了解Typescript中type和interface具体区别?

前言 新手刚开始学习 TypeScript 时&#xff0c;往往会对 type 和 interface 的使用场景和方式感到困惑。因此&#xff0c;本文旨在总结 type 和 interface 的概念和用法。 一、概念 type&#xff1a;类型别名 概念&#xff1a;允许为一个或多个数据类型&#xff08;例如 str…

android studio app红叉无法编译

1.起源 今天前台小姐姐穿了一个白色的超短裙,和小姐姐聊了聊人生梦想,聊生活趣事,回到工位你马....报了一个这错误,无法运行了,明天就要打包测试了,顿时菊花一紧,急了一头汗,这你马咋回事,看了旁边的产品肥仔,迷着小眼露出了银建的笑容.开始排雷.... 意思就是说gradle初始化失…

WARNING: tokenization mismatch: 403 vs. 406. (ignored) LLaVa

LLaVa换BaiChuan底座报错 WARNING: tokenization mismatch: 403 vs. 406. (ignored) 解决 cd ~/.cache/huggingface/hub/models--baichuan-inc--Baichuan2-7B-Base/snapshots/0cc6a61c06cd0734270151109d07cf86ef0ace53 vim tokenizer_config.json把bos_token改成true&#…

(四) Python 使用Pandas生成日报

一、介绍 Pandas是Python中一个强大的数据处理库&#xff0c;它提供了许多功能强大的数据结构和数据分析工具。在本文中&#xff0c;我们将介绍Pandas的基本概念和如何使用它生成一个包含今天到未来20个工作日的日期列表的Excel文件。 Pandas提供了大量的数据结构和数据分析工…

RK3568平台 内存的基本概念

一.Linux的Page Cache page cache&#xff0c;又称pcache&#xff0c;其中文名称为页高速缓冲存储器&#xff0c;简称页高缓。page cache的大小为一页&#xff0c;通常为4K。在linux读写文件时&#xff0c;它用于缓存文件的逻辑内容&#xff0c;从而加快对磁盘上映像和数据的访…

评估大型语言模型:综述

论文地址&#xff1a;https://arxiv.org/pdf/2310.19736v2.pdf github&#xff1a; tjunlp-lab/awesome-llms-evaluation-… 发表团队&#xff1a;Tianjin University 摘要 将LLM评估划分三点&#xff1a;知识和能力评估、一致性评估和安全性评估。特定领域化评估benchmark评…