Tôi cần một thiết kế CSS trong đó nút vuông lơ lửng thay đổi cộng với dấu hiệu để vượt qua các hình vuông đến vòng tôi trong bản demo ở đây. Nhưng tôi không thể thay đổi như yêu cầu của mình
//codepen.io/tapos007/pen/odxQgW
$(function() { //do something $(".btn-square").click({animateIn: "circleShape", animateOut: "squareShape"}, animate_function); function animate_function(event){ if( $(this).hasClass(event.data.animateIn) ) { $(this).removeClass(event.data.animateIn).addClass(event.data.animateOut); } else if( $(this).hasClass(event.data.animateOut) ) { $(this).removeClass(event.data.animateOut).addClass(event.data.animateIn); } else { $(this).addClass('animated ' + event.data.animateIn); } } //end do something }); //Variables $btn-round-size:100px; $btn-round-rotate:135deg; $btn-default-color:blue; $btn-close-color:red; //Styles body { font-family: sans-serif; } .btn-round { width:$btn-round-size; height:$btn-round-size; border-radius:$btn-round-size; background-color:$btn-default-color; } .btn-square { width:$btn-round-size; height:$btn-round-size; background-color:blue; } .close{ position: relative; display: inline-block; width: 50px; height: 50px; top:25px; left:25px; overflow: hidden; &::before, &::after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #fff; } &::before { transform:rotate(0deg); } &::after { transform:rotate(90deg); } } //Animations .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes plusButton { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -$btn-round-rotate); transform: rotate3d(0, 0, 1, -$btn-round-rotate); background-color:$btn-close-color; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; background-color:$btn-default-color; } } @keyframes plusButton { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate); transform: rotate3d(0, 0, 1, $btn-round-rotate); background-color:$btn-close-color; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; background-color:$btn-default-color; } } .plusButton { -webkit-animation-name: plusButton; animation-name: plusButton; } @-webkit-keyframes closeButton { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; background-color:$btn-default-color; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate); transform: rotate3d(0, 0, 1, $btn-round-rotate); background-color:$btn-close-color; } } @keyframes closeButton { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; background-color:$btn-default-color; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate); transform: rotate3d(0, 0, 1, $btn-round-rotate); background-color:$btn-close-color; } } .closeButton { -webkit-animation-name: closeButton; animation-name: closeButton; } @-webkit-keyframes circleShape { from { -webkit-transform-origin: center; transform-origin: center; background-color:$btn-default-color; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate); transform: rotate3d(0, 0, 1, $btn-round-rotate); background-color:$btn-close-color; border-radius: $btn-round-size; } } @keyframes circleShape { from { -webkit-transform-origin: center; transform-origin: center; background-color:$btn-default-color; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate); transform: rotate3d(0, 0, 1, $btn-round-rotate); background-color:$btn-close-color; border-radius: $btn-round-size; } } .circleShape { -webkit-animation-name: circleShape; animation-name: circleShape; } @-webkit-keyframes squareShape { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate); transform: rotate3d(0, 0, 1, $btn-round-rotate); background-color:$btn-close-color; border-radius: $btn-round-size; } to { -webkit-transform-origin: center; transform-origin: center; background-color:$btn-default-color; border-radius: 0px; } } @keyframes squareShape { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, $btn-round-rotate); transform: rotate3d(0, 0, 1, $btn-round-rotate); background-color:$btn-close-color; border-radius: $btn-round-size; } to { -webkit-transform-origin: center; transform-origin: center; background-color:$btn-default-color; border-radius: 0px; } } .squareShape { -webkit-animation-name: squareShape; animation-name: squareShape; }<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="btn-square"> <span class="close"></span> </div>