代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:300px;
            height:145px;
            position:relative;
            border:3px solid #eee;
        }
        div:hover {
            border:3px solid red;
        }
        div:before {
            content: "";
            position:absolute;
            border:1px solid #ff794f;
            top:8px;
            bottom:8px;
            left:8px;
            right:8px;
            transform: scale(0,1);
            transition: transform 0.5s;
        }
        div:hover:before{
            border:1px solid red;
            transform: scale(1);
            transition: transform 0.5s;

        }
   </style>
</head>
<body>
<div></div>
</body>
</html>

效果图：

 

京东商品hover效果的更多相关文章

  1. 【javascript】京东商品浏览放大镜效果

    1.onclick点击小图可以切换图片 2.onmouseover显示黄色div与放大图片的div 3.onmouseout,2的内容消失 4.onmousemove黄色div跟随鼠标移到,但是不能超 ...

  2. e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （一） 京东 商品搜索

    之前有发布一篇文章“e2e 自动化集成测试 环境搭建 Node.js Selenium WebDriverIO Mocha Node-Inspector”, 主要是讲了,如何搭建环境, 其中开发环境使 ...

  3. 利用selenium爬取京东商品信息存放到mongodb

    利用selenium爬取京东商城的商品信息思路: 1.首先进入京东的搜索页面,分析搜索页面信息可以得到路由结构 2.根据页面信息可以看到京东在搜索页面使用了懒加载,所以为了解决这个问题,使用递归.等待 ...

  4. Web页面中5种超酷的Hover效果

    hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这 ...

  5. 手机网页中的hover效果实现

    js文件 function mouseout(obj) { var className ="hover"; var _ecname = obj.className; if (_ec ...

  6. 【1】Hover 效果收集

    各种 hover 效果  github repository>>  git 仓库 1. 背景图的 hover 效果 原页面>> githubSite>>

  7. python制作爬虫爬取京东商品评论教程

    作者:蓝鲸 类型:转载 本文是继前2篇Python爬虫系列文章的后续篇,给大家介绍的是如何使用Python爬取京东商品评论信息的方法,并根据数据绘制成各种统计图表,非常的细致,有需要的小伙伴可以参考下 ...

  8. 【特效】体验很好的导航hover效果移出恢复当前位置

    很常见的一种导航的hover效果,鼠标放上后除了正常的hover,在移出整个导航后,会恢复当前栏目的特殊样式,分别有横向和纵向的导航.代码也比较简单,设置一个当前栏目的class,用index()找到 ...

  9. 一起学爬虫——使用selenium和pyquery爬取京东商品列表

    layout: article title: 一起学爬虫--使用selenium和pyquery爬取京东商品列表 mathjax: true --- 今天一起学起使用selenium和pyquery爬 ...

随机推荐

  1. Chapter 21_3 模式

    很多地方都会看到各种匹配模式,每次接触这些函数,颇使人望文生畏. 今天就来好好面对它.认识它.了解它.最后战胜它. 匹配模式都是用一串常规的字符串来描述,最主要的是理解这些字符串的语法及含义(即它能匹 ...

  2. CentOS 7.2 部署Saltstack

    CentOS 7.2部署Saltstack 一.环境介绍: 服务器名称 IP地址 Salt-Master 192.168.30.141 Slave1 192.168.30.131 Slave2 192 ...

  3. VIP站长大会(北京站)常见问题解答

    功能支持问题 1. react能否和MIP结合使用,如果暂时不能以后是否有考虑?是否会和其他 js 框架(比如angular )结合? 目前暂无计划支持. 2. MIP页是否支持自定义cookie?实 ...

  4. 【Python】Markov text generator马尔科夫文字生成器

    遍历一段文字,统计每个字后面出现的字和其次数,当前一个字确定的时候,计算后一个字出现的百分比,用这个百分比作为文字生成器中后一个字出现的概率进行文字生成 from random import rand ...

  5. 在mac安装numpy matplotlib scipy

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #fffff ...

  6. Kruskal算法的简单实现

    嘛嘛嘛,好像大家在实现Kruskal算法是都是用的边集数组,判断图的连通性咱不会,o(╯□╰)o(为什么咱这么菜诶) Kruskal算法: 规则: (1)对每一条边按照从小到大进行排序 (2)加入边的 ...

  7. PHP短信发送服务 youe短信企业服务

    /** * 通用短信平台HTTP接口POST方式发送短信实例 * 返回字符串 * 一般情况下调用此方法 */ function postSendMessage($msgContents,$phoneL ...

  8. SQLServer中的变量：局部变量，全局变量

    SQLServer中的全局变量   变量 Transact-SQL语言中有两种形式的变量,一种是用户自己定义的局部变量,另外一种是系统提供的全局变量.局部变量 局部变量是一个能够拥有特定数据类型的对象 ...

  9. C 语言学习准备

    摘要:用 C#语言学习了一些数据结构,突然想学习 C 语言,为了学习C,本文准备好资料. C 语言学习准备 作者:乌龙哈里 时间:2015-11-17 平台:Window7 64bit,Visual ...

  10. 去掉word冗余格式 java正则表达式

    word转换html时,会留下很多格式,有些格式并不是我们所需要的,然而这些格式比真正的文章内容还要多,严重影响页面的加载速度,因此就需要找个一个好的解决方案把这些多余的格式个去掉.网上有很多去除wo ...