Vue实现按钮旋转和移动位置的实例代码

1.静态效果图

Chrom移动端浏览模式下可拖动按钮处于任意位置，并且点击可旋转按钮

2.代码

#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
 
.icon-add-50{
  position: relative;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 2px solid gray;
  border-radius: 50%;
  box-shadow:darkgrey 0px 0px 2px 2px;
  background-color: CornflowerBlue;
}
.icon-add-50:before{
  content: '';
  position: absolute;
  width: 30px;
  height: 2px;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -1px;
  background-color: white;
}
.icon-add-50:after{
  content: '';
  position: absolute;
  width: 2px;
  height: 30px;
  left: 50%;
  top: 50%;
  margin-left: -1px;
  margin-top: -15px;
  background-color: white;
}

总结

以上所述是小编给大家介绍的Vue实现按钮旋转和移动位置的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！