<!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. prometheus学习系列十一： Prometheus 报警规则配置

    prometheus监控系统的的报警规则是在prometheus这个组件完成配置的. prometheus支持2种类型的规则,记录规则和报警规则, 记录规则主要是为了简写报警规则和提高规则复用的, 报 ...

  2. 目标检测论文解读5——YOLO v1

    背景 之前热门的目标检测方法都是two stage的,即分为region proposal和classification两个阶段,本文是对one stage方法的初次探索. 方法 首先看一下模型的网络 ...

  3. jenkins构建邮件自动发送，测试邮件发送成功，构建项目邮件发送不成功的问题

    提示问题: Connection error sending email,retrying once more in 10 seconds…… Connection error sending ema ...

  4. Nuxt 学习资料

    Nuxt 学习资料 网址 官方网站 https://zh.nuxtjs.org/guide/installation

  5. SDOI2012 走迷宫

    走迷宫 Morenan被困在了一个迷宫里.迷宫可以视为N个点M条边的有向图,其中Morenan处于起点S,迷宫的终点设为T.可惜的是,Morenan非常的脑小,他只会从一个点出发随机沿着一条从该点出发 ...

  6. Mybatis技术一数据库连接池配置（druid）

    只简单叙述,网上相关的内容很多,这里只是给出参考: 数据库连接池druid配置列表: 配置 缺省值 说明 name   配置这个属性的意义在于,如果存在多个数据源,监控的时候可以通过名字来区分开来.如 ...

  7. Cookies and Custom Protocols

    https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/URLLoadingSystem/Cookiesa ...

  8. 准确率（Accuracy） 精确率（Precision） 与 召回率（Recall）

    准确率(Accuracy)—— 针对整个模型 精确率(Precision) 灵敏度(Sensitivity):就是召回率(Recall) 参考:https://blog.csdn.net/Orange ...

  9. elastalert 基于EFK环境的邮件报警

    1.安装elastalert  安装的python必须是2.7以上的版本 安装的路径  /usr/local/src 安装依赖 yum -y install wget openssl openssl- ...

  10. php面试题收藏

    总结几个要素: 1.个人简介名字大写,内容需要详实,一是可以给人留下映像,二是减少不必要的与面试官交换个人信息的时间.准备一份好的口头自我介绍是很有必要的,毕竟准备一次能用很久,时间花在上面很实用,面 ...