1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #div1{
  8.             width: 300px;
  9.             height:300px;
  10.             background-color: yellow;
    　　　　　　　　/*弹性盒子设置垂直居中*/
  11.             display: flex;
  12.             align-items: center;
  13.         }
  14.         img{
  15.             transition: all 1s ease;
  16.         }
  17.         img:hover{
  18.             -webkit-transform: rotate(180deg);
  19.             -moz-transform: rotate(180deg);
  20.             -ms-transform: rotate(180deg);
  21.             -o-transform: rotate(180deg);
  22.             transform: rotate(180deg);
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27. <div id="div1">
  28.     <div style="margin: auto"><img src="../img/H5.png" alt=""></div>
  29. </div>
  30. <div id="div2"></div>
  31. </body>
  32. </html>

　　

02.CSS动画示例-->鼠标悬停图片旋转的更多相关文章

  1. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  2. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  4. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  5. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  6. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  7. 通过CSS3实现：鼠标悬停图片360度旋转效果

    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...

  8. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  9. CSS3鼠标悬停图片动画

    鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...

随机推荐

  1. F6&F7adjust the volume

    Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard La ...

  2. [转] Spark sql 内置配置（V2.2）

    [From] https://blog.csdn.net/u010990043/article/details/82842995 最近整理了一下spark SQL内置配.加粗配置项是对sparkSQL ...

  3. Axis2 Web Service Development & Deployment Guide(Axis2使用)

    主要内容: 记录关于Axis2的使用,通过WSDL文件生成Web service的客户端和服务器端的过程. 目录: Requirement(必备工具) Development - Client Gen ...

  4. c#Filestream类（文件流）

    0.创建文件流几种方法: File.Open("a.txt",FileMode.Create,FileAccess.ReadWrite); File.OpenWrite(" ...

  5. c#中异步编程

    异步是现实生活中的很多现象的一种抽象.比如分工合作在很多时间段就是异步合作.异步中也一般要涉及委托方法.c#有3种模式的异步编程:异步模式,基于事件的异步模式,基于任务的异步模式(TAP). 一.   ...

  6. (7.0 version)当销售单中包含service或phantom类型的产品时,销售单不能完成的原因分析及解决方案

    首先说一下service类型的产品,由于该类型的产品不需要发货,所以当在销售订单确认了后,销售单直接变成了等待开票的状态,但当开票的流程结束后,订单却还是停在销售单的状态上,该问题的解决方案是安装Ta ...

  7. DB2 Package Issues and Solution

    Client 从 10.1 升级到11.1之后,而server端的DB 是10.1 版本,当客户执行sql语句时候报错: select * from ebcc.eol_item_info where ...

  8. (转)MySQL 主从复制搭建，基于日志（binlog

    原文:http://blog.jobbole.com/110934/ 什么是MySQL主从复制 简单来说,就是保证主SQL(Master)和从SQL(Slave)的数据是一致性的,向Master插入数 ...

  9. 【文档】二、Binlog结构和内容概述

    binlog是一系列文件,这些文件包含了Mysql服务实例中数据的变化. binlog包含一系列二进制日志文件,还包含一个索引文件. 每个日志文件包含了一个4字节的魔法数,后面跟着描述数据变化的事件内 ...

  10. jgGrid注销表格（动态修改表头）以及前台分页

    实例代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...