html css 期末大作业 （源码自取）02

html css 按钮小技巧

源码地址

源码自取 点击即可
https://drive.uc.cn/s/46e3e3e10b744

演示视频

看演示视频 看其动态效果

按钮02

效果图

详情看视频 视频才可以显示出效果。

代码实现

<style>
     body {  
        display: flex;  
        justify-content: center;  
        align-items: center; 
        height: 100vh;
        margin: 0;  
        background-image: url(./img/dd.png);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
    }  
    .button {
  display: flex;
  margin: auto;
}

.box {
  width: 35px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  transition: all .8s;
  cursor: pointer;
  position: relative;
  background-image: url(./img/04.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
 
}
.box1{
    border-radius: 20px 0px 0px 20px;
}
.box5{
    border-radius: 0px 20px 20px 0px;
}
.box:before {
  content: "W";
  position: absolute;
  top: 0;
  background: #F7DDC6;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform .4s;
}

.box:nth-child(2)::before {
  transform: translateY(-100%);
  content: 'O';
}

.box:nth-child(3)::before {
  content: 'R';
}

.box:nth-child(4)::before {
  transform: translateY(-100%);
  content: 'L';
}

.box:nth-child(5)::before {
  content: 'D';
}

.button:hover .box:before {
  transform: translateY(0);
}
</style>

总结

代码自取 无偿分享