【持续更新】前端特殊样式实现

开发中会有一些动画效果，图片变大变小啊啥的，在这里记录一下实现的方式。
实例代码简短为主。
复制代码

1. hover 图片放大缩小

方法1 ：在鼠标hover上去的时候，使用transform的scale()来缩放图片。

 <style>
    div {
        width: 400px;
        height: 300px;
        overflow: hidden;
    }

    img {
        width: 100%;
        height: 100%;
        transition: all .5s;
    }

    div:hover img {
        transform: scale(1.2);
    }
</style>

 
 <div>
    <img src="https://juejin.cn/post/images/1.jpg" >
 </div>
复制代码

方法2：将图片设置为背景图片，鼠标hover上去的时候，调整背景大小background-size，这里要把背景位置设置为居中（background-position:center center）。

  <style>
    div {
        width: 400px;
        height: 300px;
        background: url(./images/1.jpg) no-repeat;
        background-size: 100% 100%;
        background-position: center;
        transition: all .5s;
    }

    div:hover {
        background-size: 135% 135%;
    }
</style>


 <div></div>
复制代码

2. hover显示二维码

方法1：默认隐藏图片（display:none），鼠标hover的时候显示图片（display:block）

 <style>
    .box {
        width: 200px;
    }

    .box p {
        height: 30px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        background-color: rgba(30, 143, 255, 0.452);
    }

    .box:hover img {
        display: block;
    }

    .box img {
        display: none;
        width: 200px;
        height: 200px;
    }
</style>



<div class="box">
    <p>hover显示二维码</p>
    <img src="https://juejin.cn/post/images/erweima.png" >
</div>
复制代码

3. 图片hover上去会变暗

方法1：实现给装图片的盒子设置一个背景色（比如黑色），图片被hover的时候，加大透明度（opacity），图片就会透出后面的背景色。

  <style>
    .box {
        width: 300px;
        height: 300px;
        background-color: #000;
    }

    .box img {
        width: 100%;
        height: 100%;
        transition: all 0.5s;
    }

    .box:hover img {
        opacity: 0.5;
    }
</style>


<div class="box">
    <img src="https://juejin.cn/post/images/brk.jpg"  />
</div>
复制代码

4. 盒子被hover 一个遮罩滑上来

  <style>
    div {
        position: relative;
        width: 100px;
        height: 40px;
        color: #fff;
        line-height: 40px;
        text-align: center;
        background-color: orange;
        overflow: hidden;
    }

    div::after {
        content: "";
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.301);
        transition: all .5s;
    }

    div:hover::after {
        top: 0;
    }
</style>


<div>
    开始 Coding
</div>
复制代码