vue实现数字动态翻牌的效果（开箱即用）

实现效果图

原理

将1~9的数字竖直排版，通过translate移动位置显示不同数字，使用transition控制transform属性有动画效果

技术点

css 属性 writing-mode: vertical-lr，使数字竖直排版

移动  transform: translate(-50%, -40%); y值控制移动至哪个数字

transition  控制transform属性有动画效果

实现代码（注释比较详细，不再赘述）

 



   
  .box-item {
    position: relative;
    height: 100px;
    font-size: 54px;
    line-height: 41px;
    text-align: center;
    list-style: none;
    color: #2D7CFF;
    writing-mode: vertical-lr;
    text-orientation: upright;
    
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    -khtml-user-select: none; 
    user-select: none;
    
  }
  
  .mark-item {
    width: 10px;
    height: 100px;
    margin-right: 5px;
    line-height: 10px;
    font-size: 48px;
    position: relative;
    & > span {
      position: absolute;
      width: 100%;
      bottom: 0;
      writing-mode: vertical-rl;
      text-orientation: upright;
    }
  }
  
  .number-item {
    width: 41px;
    height: 75px;
    
    background: url(/images/text-bg-blue.png) no-repeat center center;
    background-size: 100% 100%;
    // background: #ccc;
    list-style: none;
    margin-right: 5px;
    // background:rgba(250,250,250,1);
    border-radius:4px;
    border:1px solid rgba(221,221,221,1);
    & > span {
      position: relative;
      display: inline-block;
      margin-right: 10px;
      width: 100%;
      height: 100%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      overflow: hidden;
      & > i {
 font-style: normal;
 position: absolute;
 top: 11px;
 left: 50%;
 transform: translate(-50%,0);
 transition: transform 1s ease-in-out;
 letter-spacing: 10px;
      }
    }
  }
  .number-item:last-child {
    margin-right: 0;
  }

数字背景图片

总结

以上所述是小编给大家介绍的vue实现数字动态翻牌的效果（开箱即用），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！