что вызывает анимацию еще до зависания?также не может расположить текст в середине поля - PullRequest
Новая
       22

что вызывает анимацию еще до зависания?также не может расположить текст в середине поля

0 голосов
/ 27 января 2019

У меня три проблемы:

  1. Почему «сердце» начинает колебаться даже до того, как я наведите курсор на артефакт?
  2. Какое пространство слева от артефакта (выделено белой рамкой)?
  3. Я не могу поместить элемент <h2> «С Днем Святого Валентина» в центр окна.

( JS Fiddle ) 

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
html {
  margin: 0;
  padding: 0;
  background-image: url(bg.jpeg);
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

body {
  font-family: 'Poiret One', Segoe UI Light, cursive;
}

.heart1 {
  background-color: #d32f2f;
  display: inline-block;
  height: 250px;
  margin: 0 10px;
  position: relative;
  top: 0;
  /*changed SOverflow*/
  /* transform: rotate(-45deg); */
  width: 250px;
  margin-top: 200px;
  margin-left: 500px;
  /* transform: rotate(0deg); */
}

.heart1:before,
.heart1:after {
  content: "";
  background-color: #d32f2f;
  border-radius: 50%;
  height: 250px;
  position: absolute;
  width: 250px;
}

.heart1:before {
  top: -140px;
  left: 0;
}

.heart1:after {
  left: 140px;
  top: 0;
}


/* Heart on the right */

.heart2 {
  background-color: antiquewhite;
  display: inline-block;
  height: 250px;
  margin: 0 10px;
  position: absolute;
  /* top: 0; changed SOverflow */
  /* transform: rotate(-45deg); */
  width: 250px;
  margin-top: 100px;
  margin-left: 655px;
  /* transform: rotate(0deg); */
  transform: rotate(180deg);
  left: 271px;
  top: 212px;
}

.heart2:before,
.heart2:after {
  content: "";
  background-color: antiquewhite;
  border-radius: 50%;
  height: 250px;
  position: absolute;
  width: 250px;
}

.heart2:before {
  top: -140px;
  left: 0;
}

.heart2:after {
  left: 140px;
  top: 0;
}

#card {
  margin-top: 140px;
  padding: 20px;
  position: absolute;
  border: 3px dashed white;
}

#message {
  height: 400px;
  width: 400px;
  margin-top: -410px;
  margin-left: 500px;
  background-color: #333;
  color: white;
  border: 3px dashed #AB47BC;
  border-radius: 35% 0 35% 0;
}

#card #message h2 {
  border: 3px dashed blue;
}

#card #heartleft {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation: closeLeft 2s ease-in-out forwards;
  -moz-animation: closeLeft 2s ease-in-out forwards;
  -ms-animation: closeLeft 2s ease-in-out forwards;
  animation: closeLeft 2s ease-in-out forwards;
  transform-origin: 0 0;
}

#card:hover #heartleft {
  -webkit-animation: openLeft 2s ease-in-out forwards;
  -moz-animation: openLeft 2s ease-in-out forwards;
  -ms-animation: openLeft 2 ease-in-out forwards;
  animation: openLeft 2s ease-in-out forwards;
}

@-webkit-keyframes closeLeft {
  from { -webkit-transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(180deg); }
}

@-moz-keyframes closeLeft {
  from { -moz-transform: rotateY(0deg); }
  to { -moz-transform: rotateY(180deg); }
}

@-ms-keyframes closeLeft {
  from { -ms-transform: rotateY(0deg); }
  to { -ms-transform: rotateY(180deg); }
}

@keyframes closeLeft {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}

@-moz-keyframes openLeft {
  from { -moz-transform: rotateY(180deg); }
  to { -moz-transform: rotateY(0deg); }
}

@-webkit-keyframes openLeft {
  from { -webkit-transform: rotateY(180deg); }
  to { -webkit-transform: rotateY(0deg); }
}

@-ms-keyframes openLeft {
  from { -ms-transform: rotateY(180deg); }
  to { -ms-transform: rotateY(0deg); }
}

@keyframes openLeft {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(0deg); }
}

#card #heartright {
  -webkit-animation: closeRight 2s ease-in-out forwards;
  -moz-animation: closeRight 2s ease-in-out forwards;
  -ms-animation: closeRight 2s ease-in-out forwards;
  animation: closeRight 2s ease-in-out forwards;
  transform-origin: 0 0;
}

#card:hover #heartright {
  -webkit-animation: openRight 2s ease-in-out forwards;
  -moz-animation: openRight 2s ease-in-out forwards;
  -ms-animation: openRight 2 ease-in-out forwards;
  animation: openRight 2s ease-in-out forwards;
}

@-moz-keyframes openRight {
  0% { -moz-transform: rotateX(180deg); }
  100% { -moz-transform: rotateX(0deg) rotateZ(180deg); }
}

@-webkit-keyframes openRight {
  0% { -webkit-transform: rotateX(180deg); }
  100% { -webkit-transform: rotateX(0deg) rotateZ(180deg); }
}

@-ms-keyframes openRight {
  0% { -ms-transform: rotateX(180deg); }
  100% { -ms-transform: rotateX(0deg) rotateZ(180deg); }
}

@keyframes openRight {
  0% { transform: rotateX(180deg); }
  100% { transform: rotateX(0deg) rotateZ(180deg); }
}

@-webkit-keyframes closeRight {
  from { -webkit-transform: rotateX(0deg) rotate(180deg); }
  to { -webkit-transform: rotateX(180deg); }
}

@-moz-keyframes closeRight {
  from { -moz-transform: rotateX(0deg) rotate(180deg); }
  to { -moz-transform: rotateX(180deg); }
}

@-ms-keyframes closeRight {
  from { -ms-transform: rotateX(0deg) rotate(180deg); }
  to { -ms-transform: rotateX(180deg); }
}

@keyframes closeRight {
  from { transform: rotateX(0deg) rotate(180deg); }
  to { transform: rotateX(180deg); }
}
<div id="card">
  <div class="heart1" id="heartleft"></div>
  <div id="message">
    <h2>Happy Valentine's Day</h2>
  </div>
  <div class="heart2" id="heartright"></div>
</div>

Ответы [ 3 ]

0 голосов
/ 27 января 2019 

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
html {
  margin: 0;
  padding: 0;
  background-image: url(bg.jpeg);
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

body {
  font-family: 'Poiret One', Segoe UI Light, cursive;
}

.heart1 {
  background-color: #d32f2f;
  display: inline-block;
  height: 250px;
  margin: 0 10px;
  position: relative;
  top: 0;
  /*changed SOverflow*/
  /* transform: rotate(-45deg); */
  width: 250px;
  margin-top: 200px;
  margin-left: 500px;
  transition: all 0.3s linear;
  /* transform: rotate(0deg); */
}

.heart1:before,
.heart1:after {
  content: "";
  background-color: #d32f2f;
  border-radius: 50%;
  height: 250px;
  position: absolute;
  width: 250px;
}

.heart1:before {
  top: -140px;
  left: 0;
}

.heart1:after {
  left: 140px;
  top: 0;
}


/* Heart on the right */

.heart2 {
     background-color: antiquewhite;
    display: inline-block;
    height: 250px;
    margin: 0 10px;
    position: absolute;
    /* transform: rotate(-45deg); */
    width: 250px;
    /* margin-top: 100px; */
    /* margin-left: 635px; */
    /* transform: rotate(0deg); */
    transform: rotate(180deg);
    left: 896px;
    top: 295px;
    transition: all 0.3s linear;
}

.heart2:before,
.heart2:after {
  content: "";
  background-color: antiquewhite;
  border-radius: 50%;
  height: 250px;
  position: absolute;
  width: 250px;
}

.heart2:before {
  top: -140px;
  left: 0;
}

.heart2:after {
  left: 140px;
  top: 0;
}

#card {
     /* margin-top: 140px; */
    /* padding: 20px; */
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    border: 3px dashed white;
    transition: all 0.3s linear;
}

#message {
  height: 400px;
  width: 400px;
  margin-top: -410px;
  margin-left: 500px;
  background-color: #333;
  color: white;
  border: 3px dashed #AB47BC;
  border-radius: 35% 0 35% 0;
}

#card #message h2 {
    border: 3px dashed blue;
    position: relative;
    top: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.3s linear;
}

#card #heartleft {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation: closeLeft .2s ease-in-out forwards;
  -moz-animation: closeLeft .2s ease-in-out forwards;
  -ms-animation: closeLeft .2s ease-in-out forwards;
  animation: closeLeft .2s ease-in-out forwards;
  transform-origin: 0 0;
  transition: all 0.3s linear;
}

#card #heartleft {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation: closeLeft 2s ease-in-out forwards;
  -moz-animation: closeLeft 2s ease-in-out forwards;
  -ms-animation: closeLeft 2s ease-in-out forwards;
  animation: closeLeft 0.2s ease-in-out forwards;
  transform-origin: 0 0;
  transition: all 0.3s ease-in-out;
}

/* #card:hover #heartleft { */
#card #heartleft:hover {
  -webkit-animation: openLeft 2s ease-in-out forwards;
  -moz-animation: openLeft 2s ease-in-out forwards;
  -ms-animation: openLeft 2 ease-in-out forwards;
  animation: openLeft 2s ease-in-out forwards;
}

@-webkit-keyframes closeLeft {
  from { -webkit-transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(180deg); }
}

@-moz-keyframes closeLeft {
  from { -moz-transform: rotateY(0deg); }
  to { -moz-transform: rotateY(180deg); }
}

@-ms-keyframes closeLeft {
  from { -ms-transform: rotateY(0deg); }
  to { -ms-transform: rotateY(180deg); }
}

@keyframes closeLeft {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}

@-moz-keyframes openLeft {
  from { -moz-transform: rotateY(180deg); }
  to { -moz-transform: rotateY(0deg); }
}

@-webkit-keyframes openLeft {
  from { -webkit-transform: rotateY(180deg); }
  to { -webkit-transform: rotateY(0deg); }
}

@-ms-keyframes openLeft {
  from { -ms-transform: rotateY(180deg); }
  to { -ms-transform: rotateY(0deg); }
}

@keyframes openLeft {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(0deg); }
}

#card #heartright {
  -webkit-animation: closeRight .2s ease-in-out forwards;
  -moz-animation: closeRight .2s ease-in-out forwards;
  -ms-animation: closeRight .2s ease-in-out forwards;
  animation: closeRight .2s ease-in-out forwards;
  transform-origin: 0 0;
  transition: all 0.3s ease-in-out;
}

/* #card:hover #heartright { */
#card #heartright:hover{ 
  -webkit-animation: openRight .2s ease-in-out forwards;
  -moz-animation: openRight .2s ease-in-out forwards;
  -ms-animation: openRight .2s ease-in-out forwards;
  animation: openRight .2s ease-in-out forwards;
   
}

@-moz-keyframes openRight {
  0% { -moz-transform: rotateX(180deg); }
  100% { -moz-transform: rotateX(0deg) rotateZ(180deg); }
}

@-webkit-keyframes openRight {
  0% { -webkit-transform: rotateX(180deg); }
  100% { -webkit-transform: rotateX(0deg) rotateZ(180deg); }
}

@-ms-keyframes openRight {
  0% { -ms-transform: rotateX(180deg); }
  100% { -ms-transform: rotateX(0deg) rotateZ(180deg); }
}

@keyframes openRight {
  0% { transform: rotateX(180deg); }
  100% { transform: rotateX(0deg) rotateZ(180deg); }
}

@-webkit-keyframes closeRight {
  from { -webkit-transform: rotateX(0deg) rotate(180deg); }
  to { -webkit-transform: rotateX(180deg); }
}

@-moz-keyframes closeRight {
  from { -moz-transform: rotateX(0deg) rotate(180deg); }
  to { -moz-transform: rotateX(180deg); }
}

@-ms-keyframes closeRight {
  from { -ms-transform: rotateX(0deg) rotate(180deg); }
  to { -ms-transform: rotateX(180deg); }
}

@keyframes closeRight {
  from { transform: rotateX(0deg) rotate(180deg); }
  to { transform: rotateX(180deg); }
}
<div id="card">
  <div class="heart1" id="heartleft"></div>
  <div id="message">
    <h2>Happy Valentine's Day</h2>
  </div>
  <div class="heart2" id="heartright"></div>
</div>
0 голосов
/ 27 января 2019

[посмотрите, как ваша область зависания покрывает это много, проверьте это и проверьте codepen.io/fasiya656/debug/KJzorr/yYryLOvZgmzM

enter image description here

0 голосов
/ 27 января 2019
  1. Ваше: свойства hover установлены на карте, а не на сердцах
  2. Белая коробка - это карта.
  3. Установите свойство отображения h2 на относительное и задайте ему верхзначение.
...