CSS плюс кнопка закрытия

Мне нужен дизайн css, в котором квадратная кнопка при наведении курсора меняет знак плюса, чтобы пересечь квадрат, а не круглый Я уже здесь демо. но я не могу изменить свое требование

https://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 = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "btn-square">
      <span class = "close"></span>
    </div>

В коде мы должны щелкнуть, чтобы переключить состояние. Здесь вы хотите только парить?

— 25.04.2018 09:33

Мне нужен этот эффект при наведении курсора мыши, но я не меняю квадратную форму на круглую

— 25.04.2018 09:34

@LelioFaieta Не удалось выполнить редактирование, и фрагмент не работает, потому что он использует scss, а фрагмент SO не поддерживает его.

— 25.04.2018 09:44

@taposghosh StackOverflow не является сервисом кодирования, покажите нам свою попытку редактирования кода самостоятельно.

— 25.04.2018 09:45

jquery css

25.04.2018 09:28

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

743

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Для этого вам не нужен JavaScript.

@charset "UTF-8";
.closeBtn {
  transition: all 200ms ease-in-out;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: teal;
  padding: 0;
}
.closeBtn:before {
  transition: all 200ms ease-in-out;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 20px;
  content: "×";
  transform: rotate(45deg);
  margin: 0 auto;
}
.closeBtn:hover {
  border-radius: 100%;
  cursor: pointer;
  background-color: red;
}
.closeBtn:hover:before {
  transform: rotate(0deg);
}

<button class = "closeBtn" />

Ссылка на код для версии sass

25.04.2018 09:45

Ответ принят как подходящий

Для этого нет необходимости использовать javascript или ключевые кадры. Я чувствую, что ваш код не так уж и сложен!

Вот ваш измененный код с моими комментариями:

body {
  font-family: sans-serif;
}

.btn-square {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 1s; /* Added */
}

.close {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  top: 25px;
  left: 25px;
  overflow: hidden;
  transition: transform 1s; /* Added */
}

.close::before,
.close::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #fff;
}

.close::before {
  transform: rotate(0deg);
}

.close::after {
  transform: rotate(90deg);
}

/* Added the below code */
.btn-square:hover {
  background-color: red;
}

.btn-square:hover .close {
  transform: rotate(-135deg);
}

/* And removed all other code */

<div class = "btn-square">
  <span class = "close"></span>
</div>

Я надеюсь, что это помогает.

спасибо, чувак, мне нужно наведение мыши плюс крестик не крест плюс

— 25.04.2018 10:17

25.04.2018 09:46

Другие вопросы по теме

Как динамически позиционировать элементы вокруг div?

Невозможно выровнять текст по вертикали - angularJS + bootstrap + flexbox

CSS Несколько фоновых изображений

Bootstrap с навигационным выравниванием не занимает всю ширину

Как изменить внешний вид <input type = date> в Chrome

Как отключить щелчок и выделение в li в css

Редактор Quill в Angular (editor.root.innerHTML)

Как изменить цвет шрифта определенных записей столбца таблицы mat в angular?

Два входных файла отключены одновременно

CSS-сетка у меня не работает

CSS плюс кнопка закрытия

Ответы 2

Другие вопросы по теме

Похожие вопросы