<style>

#d1{

width:200px;

height:200px;

border:1px solid #000;

transition:background 4s linear,transform 5s linear;

}

//当鼠标移入div上时

#d1:hover{

background:#ddd;

transform:rotate(45deg)  scale(0.5);

}

</style>

<body>

//页面中有一个div

<div id="d1"></div>

</body>

当鼠标移入div上时，div的背景色在4s之内渐变为灰色，同时在5s之内顺时针旋转45度，且尺寸缩小一半；当鼠标移走时，再渐变恢复初始样式的更多相关文章

  1. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  2. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  3. angularjs 怎么获取鼠标焦点 鼠标移入显示浮动的div提示框

    首先,我们要清楚几个基础的知识,angular的两个鼠标移入移出的指令------ng-mouseover(鼠标移入)ng-mouseleave(鼠标移出)--------还有就是window.eve ...

  4. Tooltip鼠标hover放上时文字提示

    使用content属性来决定hover时的提示信息. 由placement属性决定展示效果: placement属性值为:                 方向-对齐位置: 四个方向:top.left ...

  5. 转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

  6. 鼠标悬浮到div上，div进行360°旋转

    <!DOCTYPE html> <html> <head> <title>旋转</title> </head> <styl ...

  7. div滚动条时div内容显示一半

    本文为博主原创,未经允许不得转载 今天在做页面浏览器适配时,将页面中的一个div进行放大时,出现了滚动条,但滚动条对应div中的 内容只能显示一半. 仔细对应属性样式时,div具有overflow:h ...

  8. JS鼠标移入，移出事件

    该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...

  9. marquee 滚动到文字上时停止滚动，自定义停止方法

    我要实现的效果如下图:当鼠标移到续费提醒文字上时,文字滚动停止,并出现后面的关闭按钮:当鼠标移出文字时,文字继续滚动,后面的关闭按钮不显示. 在网上查到的marquee停止滚动的的代码是这样的: &l ...

随机推荐

  1. BLO

    BLO 内存限制:162 MiB 时间限制:1000 ms 标准输入输出     题目描述 Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ...

  2. docker-compose 部署 Apollo 自定义环境

    Apollo 配置中心是什么: ​ Apollo是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性. ...

  3. 从HTTP到HTTPS

    从HTTP到HTTPS HTTP存在的缺陷 通信使用明文(不加密),内容可能会被窃听 不验证通信方的身份,因此有可能遭遇伪装 无法证明报文的完整性,所以有可能已遭篡改 防窃听 通信加密 HTTP 协议 ...

  4. 『无为则无心』Python基础 — 10、Python字符串的格式化输出

    目录 1.什么是格式化输出 2.Python格式化输出的五种方式 方式一:字符串之间用+号拼接 方式二:print()函数可同时输出多个字符串 方式三:占位符方式 方式四:f格式化方式(推荐) 方式五 ...

  5. SpringCloud Alibaba实战（11：引入服务网关Gateway）

    源码地址:https://gitee.com/fighter3/eshop-project.git 持续更新中-- 大家好,我是三分恶. 在前面的章节中,我们已经完成了服务间的调用.统一配置等等,在这 ...

  6. Docker构建mysql主从

    一.为什么要搭建主从架构呢 1.数据安全,可以进行数据的备份. 2.读写分离,大部分的业务系统来说都是读数据多,写数据少,当访问压力过大时,可以把读请求给到从服务器.从而缓解数据库访问的压力 3.故障 ...

  7. Docker安装单点RabbitMQ

    环境准备 Centos 7.5 docker环境 安装步骤 拉取镜像 $ docker pull rabbitmq:management 说明: 获取rabbiymq镜像的时候要记得获取managem ...

  8. WebContent的子目录里面的jsp文件无法将数据传递给Servlet

    在WebContent下创建子目录FormCheck,register.jsp将跳转到RegisterServlet这个Servlet中去 分两种情况:在web.xml里面配置 和 使用注解 1.在w ...

  9. 整理C#获取日期显示格式

    C#获取当前日期的几种显示格式 有时候需要用一些不常用的日期格式时,总是要去网上查找,很多都是复制粘贴,还不完整.就整理一下. DatetimeTextBox.Text += DateTime.Now ...

  10. 『动善时』JMeter基础 — 55、使用非GUI模式运行JMeter（命令行模式）

    目录 1.JMeter的非GUI模式说明 2.为什么使用非GUI模式运行JMeter 3.使用非GUI模式运行JMeter (1)非GUI模式运行JMeter步骤 (2)其它参数说明 4.CLI模式运 ...