<!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. 浅谈Python设计模式 - 建造者模式

    声明:本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 建造者模式 当我们想要创建一个由多个部分构成的对象,而且他们的构建需要一步接一步 ...

  2. SpringBoot + Nginx 配置HTTPS的一次经历

    最近公司开发了一款小程序的应用,但是小程序为了保证数据安全,强制要求使用HTTPS,然后就不得不去配置了一下. 之前在php开发的项目上配置过一次,使用的是wdcp的控制台程序,配置起来很简单,不需要 ...

  3. 【Docker】Docker容器中安装vim命令

    1)先执行 apt-get update 2) 再执行 apt-get install vim

  4. 让Windows中的文件名支持大小写

    背景 最近在Linux官网下载了Linux内核,下载下来的是一个后缀为.tar.xz的压缩包,于是在毫不知情的情况下随随便便解压了,解压过程中出现了很多问题. 其中一个问题就是在Windows下,不区 ...

  5. 分布式限流组件-基于Redis的注解支持的Ratelimiter

    原文:https://juejin.im/entry/5bd491c85188255ac2629bef?utm_source=coffeephp.com 在分布式领域,我们难免会遇到并发量突增,对后端 ...

  6. 22、pandas表格、文件和数据库模块

    pandas官方文档:https://pandas.pydata.org/pandas-docs/stable/?v=20190307135750 pandas基于Numpy,可以看成是处理文本或者表 ...

  7. Mysql五大约束

    Mysql五大约束 约束:对表中数据的限制.保证表中数据的准确和可靠 (1)NOT NULL:非空,用于保证该字段的值不能为空 (2)DEFAULT:默认,用于保证该字段有默认值(3)PRIMARY ...

  8. 牛客OI周赛10-普及组-A眼花缭乱的街市-（加速+二分）

    https://ac.nowcoder.com/acm/contest/901/A 很简单的一道题,全场只有20+AC,卡时间.新学了cin加速语法和数组二分查找的函数调用. 知道有个读写挂,可以加速 ...

  9. (14)树莓派 - 修改pi账号密码,开启root账号

    https://blog.csdn.net/yoie01/article/details/45115067 1.修改PI账号的密码 password pi 2.开启root账号树莓派使用的linux是 ...

  10. MongoDB 实现多key group by 并实现 having

    1.group by多个key db.testcol.aggregate(    {"$group": {_id:{card:"$card",account:& ...