简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

javascript - 在用css3制作按钮的动效时实现了动态效果，但按钮上的文字无法显示

具体代码我贴在下面,就是在鼠标悬停在按钮上时有动画效果，但文字无法显示，想了好久不知问题出在哪里，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3动画</title>
    <style type="text/css">
        .btn-box{
            margin: 50px auto;
            width: 200px;
        }
        a{
            text-decoration: none;
            position: relative;
            display: inline-block;
            background-color: #f01414;
            color: #fff;
            height: 60px;
            line-height: 60px;
            padding: 0 35px;
            border-radius: 3px;
            font-size: 18px;
            font-weight: 700;
            transition: background-color .3s ease;
        }
        a:hover{
            background-color: #f34444;
        }
        a:before{
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: #f34444;
            visibility: hidden;
            z-index: 1;
            transform: scale(0,1);
            transition: transform .3s ease;
        }
        a:hover:before{
            visibility: visible;
            transform: scale(1,1);
        }
    </style>
</head>
<body>
    <p class="btn-box">
        <a href="#" class="btn">立即购买</a>
    </p>
</body>
</html>
大家讲道理大家讲道理2723 Il y a quelques jours262

répondre à tous(2)je répondrai

  • 阿神

    阿神2017-04-11 10:33:45

    很明显a的伪类遮住了 a上文字（你给before的opacity改成0.5就看见了），可以给content“立即购买”，人后调整文字居中就行了

    répondre
    0
  • 迷茫

    迷茫2017-04-11 10:33:45

    把代码改成：

    a:before{
    content: '立即购买';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: #f34444;
    transform: scale(0,1);
    transition: transform .3s ease;
}
a:hover:before{
    transform: scale(1,1);
}

    看是你想要的效果不

    répondre
    0
  • Annulerrépondre