代码：

  1. <!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;
  2.  
  3.         }
       </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. 关于VS2010编译警告LNK4221

    最近研究duilib,准备把里面自定义的一些工具类如CDuiString什么的用ATL的替换掉,于是遇到久仰大名的  warning C4251: xxx  needs to have dll-int ...

  2. WindowsServer2012 R2 64位中文标准版(IIS8.5)下手动搭建PHP环境详细图文教程(二)安装IIS8.5

    //来源:http://www.imaoye.com/Technology/WindowsServer2012R264IIS85.html 阿里云服务器ECS Windows Server 2012 ...

  3. Scala 控制结构

    Scala内建的控制结构屈指可数,仅有if, while, for, match, try和函数调用而已. 几乎所有的Scala控制结构都会产生某个值(while和 do while虽然不能产生有意义 ...

  4. PDF在线阅读 FlexPaper 惰性加载 ；

    关于PDF在线阅读问题,比较普遍的做法是转换成swf文件来浏览:由于项目需要,就用 flexpaper 来实现了下,功能比较简单:但是文件的惰性加载确实让笔者挠头了一把! 下面是笔者的方法: 采用流的 ...

  5. [HMLY]1.CocoaPods详解----使用

    作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/18737437 转载请注明出处   一.什么是cocoaPods 1.为 ...

  6. java模拟数据库缓存

    实现缓存一些数据到本地,避免重复查询数据库,对数据库造成压力,代码如下: package threadLock; import java.util.HashMap; import java.util. ...

  7. vue实例生命周期

    实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...

  8. php学习笔记——基础知识（1）

    1.PHP 脚本在服务器上执行,然后向浏览器发送回纯 HTML 结果. 2.基础 PHP 语法 1)PHP 脚本可放置于文档中的任何位置. 2)PHP 脚本以 <?php 开头,以 ?> ...

  9. [Jmeter]jmeter之脚本录制与回放，优化（windows下的jmeter）

    一.录制脚本: 1.启动jmeter 2.添加线程组 3.添加http代理 4.配置代理 a.jmeter侧(注意:lest plan content这里需要选择目标控制器,本文即测试计划中需要选择的 ...

  10. moodle笔记之-权限api

    <?php//权限定义$capabilities = array( 'mod/mytest:managefiles' => array(//具体的权限:插件类型/插件名/权限 这里是增加一 ...