<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div class="container">

    <ul class="clearfix">

        <li>

            <img src="data:images/xy_52.jpg" alt=""/>

        </li>

        <li>

            <h5>我是标题</h5>

            <p>我是好人我是好人我是好人我是好人我是好人我是好人</p>

        </li>

    </ul>

</div>

</body>

</html>

html

        *{margin:;padding:;}

        .clearfix{zoom:;}

        .clearfix:after{content:".";display:block;width:;height:;visibility:hidden;clear:both;}

        .container{width:600px;margin:20px auto;}

        ul{list-style:none;width:200px;background:red}

        ul li{float:left;width:100px;height:100px;transition:all 1s linear 0;background:green;}

        ul li:hover{transform:scale(1.2);background:yellow;}

        ul li:hover p,ul li:hover h5{color:#fff;}

        li img{border:;width:100%;}

        h5{height:30px;line-height:30px;}

        h5,p{font-size:12px;padding:0 6px;}

        p{height:70px;}

css

鼠标经过容器放大--css3的更多相关文章

  1. 基于CSS3鼠标滑过放大突出效果

    还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...

  2. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  3. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  4. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  5. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  6. 2015.10.11（js判断鼠标进入容器的方向）

    判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...

  7. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  8. [Unity3D]Unity3D游戏开发之鼠标滚轮实现放大缩小

    今天为大家分享的是在Rpg游戏中十分常见的鼠标滚轮调整摄像机视野效果.首先我们先创建一个游戏场景: 接下来我们编写一段脚本代码: [csharp] view plaincopyprint" ...

  9. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

随机推荐

  1. 转Masonry遇到的问题

    1,ImageView 圆角: 解决方法如下: https://github.com/SnapKit/Masonry/issues/153 2,iphone4  tableview只显示一半 加了一个 ...

  2. CentOS 7.0安装配置LAMP服务器(Apache+PHP+MariaDB)

    CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop firewalld.service #停止fir ...

  3. C#支持文件拖拽

    private void listBox1_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataPresent(DataForm ...

  4. js对数组排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Makefile文件简单整理

    .PHONY:clean main:hello.o gcc -o main hello.c hello.o:hello.c gcc -c hello.c clean: rm -f hello.o ma ...

  6. ACCESS 数据库使用配置调整解决方案

    分享到 一键分享 QQ空间 新浪微博 百度搜藏 人人网 腾讯微博 百度相册 开心网 腾讯朋友 百度贴吧 豆瓣网 搜狐微博 百度新首页 QQ好友 和讯微博 更多... 百度分享 64位服务器无法使用ac ...

  7. C++ ASSERT() 断言机制

    C++ ASSERT() 断言机制 ASSERT()是一个调试程序时经常使用的宏,在程序运行时它计算括号内的表达式,如果表达式为FALSE (0), 程序将报告错误,并终止执行.如果表达式不为0,则继 ...

  8. mysql概要（四）order by，group 的特点，子查询

    1.order by 默认按升序排列(asc/desc),多字段排序 order by 字段 排序方式,字段2 排序方式,..:在分组排序中,排序是对分组后的结局进行排序,而不是在组中进行排序. 2. ...

  9. thinkphp分页效果的制作，按查询条件分页正确做法

    PHP代码: <?php namespace Home\Controller; use Think\Controller; use Home\Clas\Cate; class IndexCont ...

  10. Java面向对象深度

    局部内部类 package ch6; /** * Created by Jiqing on 2016/11/21. */ public class LocalInnerClass { // 局部内部类 ...