微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css3按钮光影滑过特效

CSS3按钮光影滑过特效是一种视觉效果,可以给用户带来极佳的用户体验。这种效果可以通过CSS3的一些特性实现,如过渡(transition)、变换(transform)、阴影(Box-shadow)等。

    .button {
      display: inline-block;
      border: none;
      padding: 10px 20px;
      font-size: 1.2rem;
      color: #fff;
      background-color: #007ACC;
      Box-shadow: 0 5px 15px rgba(0,122,204,0.4);
      transition: transform 300ms cubic-bezier(0.12,0.4,0.29,1.46),Box-shadow 300ms cubic-bezier(0.12,1.46);
    }
    
    .button:hover {
      transform: translateY(-2px);
      Box-shadow: 0 10px 20px rgba(0,0.7);
    }

css3按钮光影滑过特效

上述代码演示了一个基本的按钮效果,当用户将鼠标悬停在按钮上时,按钮会在Y轴上向上移动2像素,并且阴影效果会变得更强。这些过渡效果都不能用CSS2来实现,只有通过CSS3的新特性才能实现。这样的按钮效果不仅能增加用户的体验,并且有助于引起用户的注意。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。