<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. 使用 vite 构建一个表情选择插件

    初始化 Vite 基于原生 ES 模块提供了丰富的内建功能,开箱即用.同时,插件足够简单,它不需要任何运行时依赖,只需要安装 vite (用于开发与构建)和 sass (用于开发环境编译 .scss ...

  2. gRPC入门—golang实现

    1.RPC 1.1 什么是RPC RPC(Remote Procedure Call),即远程过程调用,过程就是方法,简单来说,它就是一种能够像调用本地方法一样调用远程计算机进程中的方法的技术,在这种 ...

  3. Auto.js无障碍免root脚本开发学习

    Auto.js 简单入门 官方文档:https://hyb1996.github.io/AutoJs-Docs/#/ https://blog.csdn.net/QiHsMing/article/de ...

  4. 增强采样软件PLUMED的安装与使用

    技术背景 增强采样(Enhanced Sampling)是一种在分子动力学模拟中常用的技术,其作用是帮助我们更加快速的在时间轴上找到尽可能多的体系结构及其对应的能量.比如一个氢气的燃烧反应,在中间过程 ...

  5. Linux:CentOS-7常用命令

    查看进程 1. ps -ef | grep #查看进程 ps -ef | grep 名称 #示例 ps -ef | grep docker 2. ps aux #当前所有进程信息 ps aux VSZ ...

  6. php安裝7.3版本

    CentOS 安装 EPEL 源: yum install epel-release 安装 REMI 源: CentOS 7: yum install http://rpms.remirepo.net ...

  7. runtime使用总结

    runtime这个东西,项目是很少用到的,但面试又避不可少,了解其内部的机制对底层的理解还是很有必要的. 1.动态添加属性 拓展类别属性的简单实现 a.定义字面量指针 static char dyna ...

  8. Leetcode No.53 Maximum Subarray(c++实现)

    1. 题目 1.1 英文题目 Given an integer array nums, find the contiguous subarray (containing at least one nu ...

  9. Python单元测试框架unittest之批量用例管理(discover)

    前言 我们在写用例的时候,单个脚本的用例好执行,那么多个脚本的时候,如何批量执行呢?这时候就需要用到unittet里面的discover方法来加载用例了.加载用例后,用unittest里面的TextT ...

  10. Django基础-001

    一.开发模式 MVC模式: model:数据库 view:前端展示 controller:逻辑控制MTV模式 model:数据库 view:逻辑控制 template:前端展示 二.Django介绍 ...