文档章节

css实现鼠标滑过图片 放大阴影(3D)效果

o
 osc_x4h57ch8
发布于 2018/04/24 14:31
字数 160
阅读 6
收藏 0

精选30+云产品,助力企业轻松上云!>>>

首先上两张图,对比一下 鼠标未经过和鼠标悬浮的效果

中间还有动画效果,要自己看效果才能体会了,下面上代码

 

 

  // css    
       div{
            text-align: center;
        }
        a{
            display: inline-block;
            text-decoration: none;
            transition: all .3s ease;
        }
        a:hover {
            transform: translateY(-6px);
            -webkit-transform: translateY(-6px);
            -moz-transform: translateY(-6px);
            box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
            -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
            -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
        }
        .i-subject-head{
            overflow: hidden;
        }
        .i-subject-wrap img{
            width: 100%;
            -webkit-transition: -webkit-transform .3s;
        }
        a:hover .i-subject-wrap img{
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
<div>
    <a href="" target="_blank" title="">
        <div class="i-subject-wrap">
            <div class="i-subject-head">
                <img src="http://cdn.alloyteam.com/assets/img/alloystick-d2c55e.jpg">
            </div>

        </div>
    </a>
</div>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Java线程池

前言 Java中对线程池的抽象是ThreadPoolExecutor类,Executors是一个工具类,内置了多种创建线程池的方法: newFixedThreadPool:固定长度线程池 newCachedThreadPool :可缓存线程池 newSin...

nullpointerxyz
8分钟前
19
0
Python笔记:用Python制作二维码

这些年,二维码在我国的日常使用频率特别大。因为其具有简单及安全性吧!除了用网络工具制作二维码,其实用JavaScript或Python也可以制作二维码,而且更有个性。 示例一(制作普通黑白二维码...

tengyulong
20分钟前
0
0
Redis-初体验/数据结构

定义: Redis 是 C 语言开发的一个开源的(遵从 BSD 协议)高性能键值对(key-value)的内存数据库,可以用作数据库、缓存、消息中间件等。它是一种 NoSQL(not-only sql,泛指非关系型数据库...

心田已荒
22分钟前
15
0
如何在保留订单的同时从列表中删除重复项? - How do you remove duplicates from a list whilst preserving order?

问题: Is there a built-in that removes duplicates from list in Python, whilst preserving order? 是否有内置的程序在保留顺序的同时从Python列表中删除重复项? I know that I can us...

fyin1314
今天
29
0
以太坊智能合约开发常见的10个安全问题

本文介绍CheckMarx安全研究小组通过扫描公开的以太坊智能合约所发现的Solidity智能合约开发中常见的十大安全问题,其中__未检查的外部调用__ 和 高成本循环 分列排行榜前两名。该安全问题排行...

区块链教程
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部