<!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. Ruby——报错总结

    前言 记录ruby的一些报错 错误 Could not find a valid gem 'pumagem' (>= 0) in any repository ERROR: Could not ...

  2. Sitemap Error : XML declaration allowed only at the start of the document解决方法

    今天ytkah的客户反馈说他的xml网站地图有问题,提示Sitemap Error : XML declaration allowed only at the start of the documen ...

  3. C#中集合ArrayList与Hashtable的使用

    C#中集合ArrayList与Hashtable的使用 http://blog.csdn.net/linukey/article/details/42506819 ArrayList: 一. 注意事项 ...

  4. 对MVVM的理解

    MVVM是Model-view-ViewMoudel的缩写 Model代表数据类型,也可以在Model中定义数据修改和操作的业务逻辑: View代表UI组件,负责将数据模型转化为UI展现出来: Vie ...

  5. template-web.js 自定义过滤器

    // 比如需要自定义一个去零的过滤器 <script id="templateTest" type="text/html"> <% for(i ...

  6. PHP函数file_get_contents()使用 https 协议时报错：SSL operation failed

    场景: file_get_contents() 函数是用于将文件的内容读入到一个字符串中,是读取文件内容常用的函数之一. 但是有时在服务器上使用file_get_contents() 函数请求http ...

  7. （1）树莓派3B+引脚

    http://shumeipai.nxez.com/raspberry-pi-pins-version-40

  8. 验证码破解 | Selenium模拟登录简书

    使用超级鹰打码平台处理登录的文字点击验证码 import time from io import BytesIO from PIL import Image from selenium import ...

  9. dolt 基于git协议的数据管理工具

    dolt 基于git 协议提供了多版本,分支特性的数据管理工具,使用简单,同时也提供了类似github 的一个云服务 安装 下载地址 https://github.com/liquidata-inc/ ...

  10. 【数论】[素数筛，phi]P3601签到题

    题目描述 给出l,r,要求求出\(\sum_{i = l}^r (i - phi[i]) mod 666623333\) \(1\leq l\leq r\leq 10^{12}\),\(r - l \ ...