zoukankan      html  css  js  c++  java
  • 关于文字下方线消失的动画

    <style>
    .overlay-figure {
    position: relative;
    display: table;
    }
    .overlay-figure
    .separator {
    display: block;
    height: 3px;/*线的高度*/
    100%;/*线的宽度*/
    background-color: #000000;
    -webkit-transform: scaleX(0) translateZ(0);
    -moz-transform: scaleX(0) translateZ(0);
    transform: scaleX(0) translateZ(0);
    -webkit-transition: -webkit-transform 0.25s ease 0.25s;
    -moz-transition: -moz-transform 0.25s ease 0.25s;
    transition: transform 0.25s ease 0.25s;

    }
    .top1 a{
    font-family: 微软雅黑;
    color:#fff;
    font-size:14px;
    }
    .overlay-figure:hover
    .separator {
    -webkit-transform: scaleX(1) translateZ(0);
    -moz-transform: scaleX(1) translateZ(0);
    transform: scaleX(1) translateZ(0);
    }
    </style>

    <meta charset="utf-8"/>
    <!--三个按钮的动画开始-->
    <div class="overlay-figure" style="display: inline;">
    <div class="over_a" style="display: inline;">
    <a href="#">了解更多</a>
    </div>
    <!--<div class="over_a" style="display: inline">-->
    <!--观看视频-->
    <!--</div>-->
    <div class="separator" style="display: inline-block;position: absolute;top:22px"></div>
    </div>
    <!--三个按钮的动画结束-->
  • 相关阅读:
    jquery animate() stop() finish() 方法使用
    ant 相关命令
    ant 安装 网址
    邮件
    webdriver until
    python HTML报告
    登录
    yun
    centos7搭建smb服务
    爬取图片
  • 原文地址:https://www.cnblogs.com/heyiming/p/6061465.html
Copyright © 2011-2022 走看看