问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
ruhua
    24833648

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

    <!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>
    <div class="btn-box">
        <a href="#" class="btn">立即购买</a>
    </div>
</body>
</html>
    javascript
    阅读 3.9k
    3 个回答
    得票最新
    头像
    小生夜醉青楼
      16621221

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

      头像
      shoestrong
        12811624

        把代码改成：

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

        看是你想要的效果不

        头像
        Misyaily
          2
          新手上路，请多包涵

          可以在伪类上加上pointer-events:none

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题