超炫的CSS3左右滑动效果动态按钮

最新推荐文章于 2025-07-16 16:52:49 发布

shanshuiboy

最新推荐文章于 2025-07-16 16:52:49 发布

阅读量2.5k

点赞数

文章标签： CSS3

一款使用纯CSS3实现的动画按钮，具有左右滑动效果。该按钮不仅能够响应鼠标悬停和点击事件，还具备独特的动画展示特性，每次交互的动作及显示的文字均不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS3动画按钮可左右滑动</title>
<style>
body{
  background:radial-gradient(circle, #e3ecf7 ,#b7d7ff);
  background:-webkit-radial-gradient(circle, #e3ecf7 ,#b7d7ff);
}
a{
  text-decoration:none;
  color:#fff;
  font-family:Nova Mono;
  font-size:22px;
  text-shadow: 0px 2px 1px rgba(0,0,0, 0.5);
}
#button{
  width:300px;
  height:70px;
  background:#6959ff;
  margin:100px auto;
  z-index:1;
  overflow:hidden;
  border: 1px solid #606060;
  border-radius:10px;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
 }
#second{
  width:300px;
  height:70px;
  background:linear-gradient(#ffcc60, #efb134);
  background:-webkit-linear-gradient(#ffcc60, #efb134);
  -webkit-transform:translatex(-310px) skew(0deg);
  -moz-transform:translatex(-310px) skew(0deg);
  -ms-transform:translatex(-310px) skew(0deg);
  -o-transform:translatex(-310px) skew(0deg);
  transform:translatex(-310px) skew(0deg);
  text-align:center;
  line-height:70px;
  z-index:3;
  position: relative;
  border-radius:10px;
  box-shadow:inset 0px 2px 1px rgba(255, 255, 255, 0.5);
  -webkit-animation:removesecond 1s reverse;
}
#first{
  width:300px;
  height:70px;
  background:linear-gradient(#3570d6, #215dc4);
  background:-webkit-linear-gradient(#3570d6, #215dc4);
  position: relative;
  top:-70px;
  text-align:center;
  line-height:70px;
  z-index:2;
  border-radius:10px;
  box-shadow:inset 0px 2px 1px rgba(255, 255, 255, 0.5);
}
#second a{
  display:block;
}
#button:hover #second{
  -webkit-animation:movesecond 1s forwards;
  -moz-animation:movesecond 1s forwards;
  -ms-animation:movesecond 1s forwards;
  -o-animation:movesecond 1s forwards;
  animation:movesecond 1s forwards;
}
#Third{
  width:300px;
  height:70px;
  background:linear-gradient(#9944ff, #7a22e5);
  background:-webkit-linear-gradient(#9944ff, #7a22e5);
  border-radius:10px;
  -webkit-transform:translateY(10px);
  -moz-transform:translateY(10px);
  -ms-transform:translateY(10px);
  -o-transform:translateY(10px);
  transform:translateY(10px);
  box-shadow:inset 0px 2px 1px rgba(255, 255, 255, 0.5);
}
#second:active #Third{
  -webkit-animation: moveThird 1s forwards;
  -moz-animation: moveThird 1s forwards;
  -ms-animation: moveThird 1s forwards;
  -o-animation: moveThird 1s forwards;
  animation: moveThird 1s forwards;
}
/********************
Animation Keyframes
********************/
/* This animation for second button (Click me Yellow)*/
@-webkit-keyframes removesecond{
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  20%{-webkit-transform:translateX(50px) skew(-20deg);}
  40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
  60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
  80%{-webkit-transform:translateX(-15px) skew(8deg);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}
@-webkit-keyframes movesecond{
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  20%{-webkit-transform:translateX(50px) skew(-20deg);}
  40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
  60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
  80%{-webkit-transform:translateX(-15px) skew(8deg);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}
@-moz-keyframes movesecond{
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  20%{-webkit-transform:translateX(50px) skew(-20deg);}
  40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
  60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
  80%{-webkit-transform:translateX(-15px) skew(8deg);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}
@-ms-keyframes movesecond{
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  20%{-webkit-transform:translateX(50px) skew(-20deg);}
  40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
  60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
  80%{-webkit-transform:translateX(-15px) skew(8deg);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}
@-o-keyframes movesecond{
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  20%{-webkit-transform:translateX(50px) skew(-20deg);}
  40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
  60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
  80%{-webkit-transform:translateX(-15px) skew(8deg);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}
@keyframes movesecond{
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  20%{-webkit-transform:translateX(50px) skew(-20deg);}
  40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
  60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
  80%{-webkit-transform:translateX(-15px) skew(8deg);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}
/* This animation for third button ( that's it purple)*/
@-webkit-keyframes moveThird{
  0%{-webkit-transform:translateY(10px);}
  20%{-webkit-transform:translateY(-170px) ;}
  40%{-webkit-transform:translateY(50dpx) ;}
  60%{-webkit-transform:translateY(-25dpx) ;}
  80%{-webkit-transform:translateY(15px) ;}
  100%{-webkit-transform:translateY(-70px) ;}
}
@-moz-keyframes moveThird{
  0%{-webkit-transform:translateY(10px);}
  20%{-webkit-transform:translateY(-170px) ;}
  40%{-webkit-transform:translateY(50dpx) ;}
  60%{-webkit-transform:translateY(-25dpx) ;}
  80%{-webkit-transform:translateY(15px) ;}
  100%{-webkit-transform:translateY(-70px) ;}
}
@-ms-keyframes moveThird{
  0%{-webkit-transform:translateY(10px);}
  20%{-webkit-transform:translateY(-170px) ;}
  40%{-webkit-transform:translateY(50dpx) ;}
  60%{-webkit-transform:translateY(-25dpx) ;}
  80%{-webkit-transform:translateY(15px) ;}
  100%{-webkit-transform:translateY(-70px) ;}
}
@-o-keyframes moveThird{
  0%{-webkit-transform:translateY(10px);}
  20%{-webkit-transform:translateY(-170px) ;}
  40%{-webkit-transform:translateY(50dpx) ;}
  60%{-webkit-transform:translateY(-25dpx) ;}
  80%{-webkit-transform:translateY(15px) ;}
  100%{-webkit-transform:translateY(-70px) ;}
}
@keyframes moveThird{
  0%{-webkit-transform:translateY(10px);}
  20%{-webkit-transform:translateY(-170px) ;}
  40%{-webkit-transform:translateY(50dpx) ;}
  60%{-webkit-transform:translateY(-25dpx) ;}
  80%{-webkit-transform:translateY(-95px) ;}
  100%{-webkit-transform:translateY(-70px) ;}
}
</style>
</head>
<body>
  <div id="button">
    <div id="second">
      <a href="#">动态CSS3按钮特效</a>
        <div id="Third">
          <a href="#">CSS3按钮</a>
        </div>
    </div>
    <div id="first">
      <a href="#">鼠标放过来吧</a>
    </div>
</div>
</body>
</html>

超炫的CSS3按钮，其动画流畅度更像是Flash动画那种效果，自己会播放动画，可左右滑动，鼠标悬停时候它也可很好的响应，单击的时候也会再次响应，每次做的“动作”都不一样哦，每次显示的文字也不一样，这款按钮运用了CSS3实现了圆角效果，动画效果也是一大亮点，希望大家喜欢哦。
这里可运行代码：http://www.codesc.net/jscss/4003.shtml