zoukankan      html  css  js  c++  java
  • scale 与 transfrom-origin配合出现奇特效果

    代码如下:

    第一种:这个方法在Edge和IE浏览器不起作用

    <div>Hover Me</div>
    div {
    position: absolute;
    200px;
    height: 60px;
    font-size: 30px;
    text-align: center;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    }
    div::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    200px;
    height: 60px;
    background: deeppink;
    transform: scaleX(0);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transform-origin: 0 0;
    z-index: -1;
    }
    div:hover {
    color: #fff;
    }
    div:hover:before {
    transform: scaleX(1);
    transform-origin: 100% 0;
    }

    第二种:兼容Edge和IE9以上浏览器
    div {
    margin-top: 60px;
    padding: 20px;
    font-size: 26px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    }
    div:before {
    content: '';
    100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #d3817a;
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out 0s;
    z-index: -1;
    }
    div:after {
    content: "";
    100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #d3817a;
    opacity: 1;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out 0s;
    z-index: -1;
    }
    div:hover {
    color: #fff;
    }
    div:hover:before {
    opacity: 1;
    transform: translateX(0px);
    }
    div:hover:after {
    opacity: 0;
    transform: translateX(0%);
    }
  • 相关阅读:
    Jzoj4822 完美标号
    Jzoj4822 完美标号
    Jzoj4792 整除
    Jzoj4792 整除
    Educational Codeforces Round 79 A. New Year Garland
    Good Bye 2019 C. Make Good
    ?Good Bye 2019 B. Interesting Subarray
    Good Bye 2019 A. Card Game
    力扣算法题—088扰乱字符串【二叉树】
    力扣算法题—086分隔链表
  • 原文地址:https://www.cnblogs.com/zyxian/p/14505763.html
Copyright © 2011-2022 走看看