鼠标hover时区块动画旋转变色的css3样式掩码
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Sticky notes using CSS3 and Google Fonts (Step 5)</title>

</head>

<body>

<div style="text-align:center; font-weight:bold;"><a style="color:#2dbdf1;"href="http://www.100sucai.com">100sucai.com</a></div>

  <ul>

    <li>

      <a href="#">

        <h2>Title #1</h2>

        <p>Text Content #1</p>

      </a>

    </li>

    <li>

      <a href="#">

        <h2>Title #2</h2>

        <p>Text Content #2</p>

      </a>

    </li>

    <li>

      <a href="#">

        <h2>Title #3</h2>

        <p>Text Content #3</p>

      </a>

    </li>

    <li>

      <a href="#">

        <h2>Title #4</h2>

        <p>Text Content #4</p>

      </a>

    </li>

    <li>

      <a href="#">

        <h2>Title #5</h2>

        <p>Text Content #5</p>

      </a>

    </li>

    <li>

      <a href="#">

        <h2>Title #6</h2>

        <p>Text Content #6</p>

      </a>

    </li>

    <li>

      <a href="#">

        <h2>Title #2</h2>

        <p>Text Content #2</p>

      </a>

    </li>

    <li>

      <a href="#">

        <h2>Title #7</h2>

        <p>Text Content #7</p>

      </a>

    </li>

    <li>

      <a href="#">

        <h2>Title #8</h2>

        <p>Text Content #8</p>

      </a>

    </li>

  </ul>

</body>

</html>

演示及下载

鼠标HOVER时区块动画旋转变色的CSS3样式掩码的更多相关文章

  1. 如何在鼠标hover时改变标注的样式

    如何在鼠标hover时改变标注的样式? ----------------    教程   ----------------------- 首先创建1张地图 //初始化地图对象,加载地图 var map ...

  2. .net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】

    1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...

  3. WPF 鼠标移动时触发图片旋转（非动画）

    非动画,只是简单的触发器. 主要是针对旋转的写法. 代码 <Grid> <Image x:Name="image" Source="nifi3.gif& ...

  4. 鼠标hover时图片效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  5. 简单的圆形图标鼠标hover效果 | CSS3教程

    演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...

  6. css实现table中td单元格鼠标悬浮时显示更多内容

    table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...

  7. 鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  8. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义提示框

    [自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...

  9. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据

    在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...

随机推荐

  1. Rspec中describe和context不同

    转自  http://lmws.net/describe-vs-context-in-rspec 学习rspec,不太理解describe和context.google了一下,找到这篇文章,感觉说的有 ...

  2. DIV+CSS滑动门效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Ecshop 安装时错误

    网上提示方法将install/includes/lib_installer.php以下内容修改后仍然提示失败: include(ROOT_PATH . 'install/languages/' . $ ...

  4. Javascript同源策略对context.getImageData的影响

    在本机测试HTML5 Canvas程序的时候,如果用context.drawImage()后再用context.getImageData()获取图片像素数据的时候会抛出错:SECURITY_ERR: ...

  5. ubuntu 服务管理

    在Linux系统下,一个Services的启动.停止以及重启通常是通过/etc/init.d目录下的脚本来控制的.然而,在启动或改变运行级别时,是在/etc/rcX.d中来搜索脚本.其中X是运行级别的 ...

  6. XML小总结

    XHTML 标签都有固定含义,不能去创造新的标签. 而 XML 支持自定义标签,具有扩 展性. 定义 XML 文档结构有两种方法:DTD 和 XSD. XSD 本身就是 XML 文档结构,是继 DTD ...

  7. Grunt 插件使用汇总

    最近使用了很多 Grunt 插件,这里把使用 Grunt 中涉及的从开发.代码检查.单元测试.E2E 测试,直到发布所涉及的插件,做一个比较完全的汇总. 环境搭建 1. 创建 Web 前端开发环境 2 ...

  8. 使用 Razor 生成 HTML5 中的 data- 属性

    在 HTML5 中, 可以使用 data- 属性来表示用户数据,这些数据甚至可以是 JSON 格式的数据,对 Web 前端开发带来很大的方便. 在 MVC 的 Razor 中,可以使用匿名对象来生成定 ...

  9. CSS3里的常用选择器总结

    选择器       属性选择器:  img[src="images/2.jpg"]               开头匹配:  a[href ^="page/"] ...

  10. 【转贴】全站 HTTPS 来了

    http://geek.csdn.net/news/detail/48765 作者:腾讯TEG架构平台部静态加速组高级工程师 刘强 最近大家在使用百度.谷歌或淘宝的时候,是不是注意浏览器左上角已经全部 ...