<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>瀑布流</title>

    <link rel="stylesheet" href="css/style.css">

    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>

</head>

<body>

    <section id="titleBar">

        <h2>瀑布流</h2>

    </section>

    <div id="wrap">

        <!-- wrap内快速生成里面div结构的快捷方式 -->

        <!-- (div.box>div.info>((div.pic>img[src="img/$.jpg"])+(div.title>a[href=#]{This is a title})))*10 -->

        <div class="box">

            <div class="info">

                <div class="pic"><img src="img/1.jpg" alt=""></div>

                <div class="title"><a href="#">This is a title.</a></div>

            </div>

        </div>

        <div class="box">

            <div class="info">

                <div class="pic"><img src="img/2.jpg" alt=""></div>

                <div class="title"><a href="#">This is a title.</a></div>

            </div>

        </div>

        <div class="box">

            <div class="info">

                <div class="pic"><img src="img/3.jpg" alt=""></div>

                <div class="title"><a href="#">This is a title.</a></div>

            </div>

        </div>

        <div class="box">

            <div class="info">

                <div class="pic"><img src="img/4.jpg" alt=""></div>

                <div class="title"><a href="#">This is a title.</a></div>

            </div>

        </div>

        <div class="box">

            <div class="info">

                <div class="pic"><img src="img/5.jpg" alt=""></div>

                <div class="title"><a href="#">This is a title.</a></div>

            </div>

        </div>

        <div class="box">

            <div class="info">

                <div class="pic"><img src="img/6.jpg" alt=""></div>

                <div class="title"><a href="#">This is a title.</a></div>

            </div>

        </div>

        <div class="box">

            <div class="info">

                <div class="pic"><img src="img/7.jpg" alt=""></div>

                <div class="title"><a href="#">This is a title.</a></div>

            </div>

        </div>

        <div class="box">

            <div class="info">

                <div class="pic"><img src="img/8.jpg" alt=""></div>

                <div class="title"><a href="#">This is a title.</a></div>

            </div>

        </div>

        <div class="box">

            <div class="info">

                <div class="pic"><img src="img/9.jpg" alt=""></div>

                <div class="title"><a href="#">This is a title.</a></div>

            </div>

        </div>

        <div class="box">

            <div class="info">

                <div class="pic"><img src="img/10.jpg" alt=""></div>

                <div class="title"><a href="#">This is a title.</a></div>

            </div>

        </div>

    </div>

</body>

</html>

css文件如下

body {

    margin:;

    padding:;

}

body {

    background: #ddd url(../img/bg.jpg) repeat;

}

img {

    border: none;

}

a {

    text-decoration: none;

    color: #444;

}

@-webkit-keyframes shade {

    from {

        opacity:;

    }

    15% {

        opacity: 0.4;

    }

    to {

        opacity:;

    }

}

@-moz-keyframes shade {

    from {

        opacity:;

    }

    15% {

        opacity: 0.4;

    }

    to {

        opacity:;

    }

}

@-o-keyframes shade {

    from {

        opacity:;

    }

    15% {

        opacity: 0.4;

    }

    to {

        opacity:;

    }

}

@-ms-keyframes shade {

    from {

        opacity:;

    }

    15% {

        opacity: 0.4;

    }

    to {

        opacity:;

    }

}

@keyframes shade {

    from {

        opacity:;

    }

    15% {

        opacity: 0.4;

    }

    to {

        opacity:;

    }

}

#titleBar {

    width: 600px;

    margin: 20px auto;

    text-align: center;

}

#wrap {

    width: auto;

    height: auto;

    margin: 0 auto;

    position: relative;

}

#wrap .box {

    width: 280px;

    height: auto;

    padding: 10px;

    border: none;

    float: left;

}

#wrap .box .info {

    width: 280px;

    height: auto;

    border-radius: 8px;

    background: #fff;

}

#wrap .box .info .pic {

    width: 260px;

    height: auto;

    margin: 0 auto;

    padding-top: 10px;

}

#wrap .box .info .pic:hover {

    -webkit-animation: shade 3s ease-in-out 1;

    -moz-animation: shade 3s ease-in-out 1;

    -o-animation: shade 3s ease-in-out 1;

    -ms-animation: shade 3s ease-in-out 1;

    animation: shade 3s ease-in-out 1;

}

#wrap .box .info .title:hover {

    -webkit-animation: shade 3s ease-in-out 1;

    -moz-animation: shade 3s ease-in-out 1;

    -o-animation: shade 3s ease-in-out 1;

    -ms-animation: shade 3s ease-in-out 1;

    animation: shade 3s ease-in-out 1;

}

#wrap .box .info img {

    width: 260px;

    border-radius: 3px;

}

#wrap .box .info .title {

    width: 260px;

    height: 40px;

    margin: 0 auto;

    line-height: 40px;

    text-align: center;

    color: #666;

    font-size: 18px;

    font-weight: bold;

    overflow: hidden;

}

效果图如下

望各位大虾不吝赐教！

谢谢

HTML+CSS实现鼠标点上去动画效果的更多相关文章

  1. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  2. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  4. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  5. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  6. CSS控制鼠标滑过时的效果

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  7. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  8. 用CSS实现加载的动画效果

    用纯CSS实现加载的一些动态效果,可以把加载效果中的元素分成很多个小部分,每个部分都有动画,每个部分的动画再设置相应的延迟效果,这样,看起来就是连贯的加载动画效果.代码如下: 1.效果1 <di ...

  9. 前端每日实战：140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...

随机推荐

  1. Httpd服务进阶知识-LAMP源码编译安装

    Httpd服务进阶知识-LAMP源码编译安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 想必大家都知道,动态资源交给fastcgi程序处理,静态资源依旧由httpd服务器处理  ...

  2. 利用Metasploit攻击Android

    首先我在Kali下生成一个Android的应用程序,即apk格式的文件,用到的命令是: msfvenom -p android/meterpreter/reverse_tcp LHOST=本地ip L ...

  3. Jmeter 局域网的IP欺骗终极解决方案

    ip欺骗是什么?    ip欺骗就是模拟ip.什么意思呢,一个电脑就只有一个ip地址,当然如果有多块网卡的话,会有多个ip地址,一般服务器上有个网卡,咱们自己的电脑一般都只有一个ip地址,但是你做压测 ...

  4. 《团队名称》第八次团队作业：Alpha冲刺day5

    项目 内容 这个作业属于哪个课程 2016计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十二 团队作业8-软件测试与ALPHA冲刺 团队名称 快活帮 作业学习目标 (1)掌握 ...

  5. 项目Beta冲刺（团队4/7)

    项目Beta冲刺(团队) --4/7 作业要求: 项目Beta冲刺(团队) 1.团队信息 团队名 :男上加男 成员信息 : 队员学号 队员姓名 个人博客地址 备注 221600427 Alicesft ...

  6. oracle中删除表：drop、delete、truncate

    相同点,使用drop delete truncate 都会删除表中的内容 drop table 表名 delete from 表名(后面不跟where语句,则删除表中所有的数据) truncate t ...

  7. can总线的远程帧（遥控帧）—说的很形象

    所谓“远程帧”是一个传统翻译上的误区.Remote Frame实际上它的意义是“遥控帧”,发起方发起特定ID的远程帧,并且只发送ID部分,那么与其ID相符的终端设备就有义务在后半段的数据部分接管总线控 ...

  8. Makefile 与tab

    Makefile文件由一系列规则(rules)构成.每条规则的形式如下. <target> : <prerequisites> [tab] <commands> 上 ...

  9. strings命令（转）

    以前我用strings命令的频率不高, 现在越用越顺手, 而且已经是离不开strings命令了.虽然以前说过strings命令, 但今天还是要说. 主要是两大用途, 下面来说明一下: 一. 确认代码编 ...

  10. netflix flamescope 方便的不同时间范围的火焰图查看工具

    flamescope 是netflix 开源的方便的火焰图查看工具,我们可以选择不同时间范围的数据,方便分析调用链 环境准备 使用docker-compose运行,基于官方的dockerfile 创建 ...