zoukankan      html  css  js  c++  java
  • css实现鼠标滑过图片 放大阴影(3D)效果

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

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

      // 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>
  • 相关阅读:
    响应式图片菜单式轮播,兼容手机,平板,PC
    javascript学习笔记一
    meta标签
    几个基本的DOS命令
    github无法正常访问的解决方法
    CSS 基础(一)
    XHTML 简介
    HTML 基础(六)
    HTML 基础(五)
    Matlab 编程简介与实例
  • 原文地址:https://www.cnblogs.com/wjunwei/p/8930183.html
Copyright © 2011-2022 走看看