简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 在用css3制作按钮的动效时实现了动态效果，但按钮上的文字无法显示
大家讲道理
大家讲道理 2017-04-11 10:31:45
0
2
289

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

<!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>
大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

répondre à tous(2)
阿神
阿神2017-04-11 10:33:45 2 plancher

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

Comme +0
Ajouter une réponse
迷茫
迷茫2017-04-11 10:33:45 1 plancher

把代码改成：

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);
}

看是你想要的效果不

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！