ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация открытия всплывающего окна

Анимация открытия всплывающего окна

Вашему вниманию функция всплывающие окна, которое по клику кнопки открывается на полный экран с вашей информацией, где создано на чистом CSS. Всплывающие окна очень распространены на современных веб-страницах HTML5 и CSS, таких, как явные всплывающие окна, диалоговые окна или окна предупреждений, всплывающие меню и многое другое. Здесь не нужно сравнивать с модальными окнами, хотя функционально они схожи, но только в этом случай идет полноценная страница.

Где распространяя информацию, и ее иногда становится много, то автоматически подключается колесо, которое можно прокручивать, как вверх, так и вниз. Если вы хотите добавить всплывающие окна или всплывающие сообщения на своем сайте, то этот вариант станет отличным решением.

Ведь при клике вы открываете новое окно, можно так сказать, где кроме того, что находится на страницы вас не отвлекает. На его можно разместить разные функций, включая генераторы, которые работают в режиме онлайна.

1. Все проверено, и здесь видим вид по умолчанию, который идет при открытие страниц сайта.

2. После нажатие на кнопку произойдет красивый эффект, это изначально появится горизонтальная полоса на весь экран, с последствием раскрытие.

Установка:

HTML

Код

<div class="comedona">
  <div class="cusamu_numqu_amsaep">
  <a href="#sudatibusп_kempobus" class="lectus_providen">открыть всплывающее окно</a>
  </div>
</div>
<div id="sudatibusп_kempobus" class="dekudsam-keduvam">
  <div class="nsectetu-adipisicing">
  <h1 class="aperiamaku-emolestia">ZorNet.Ru — сайт для вебмастера</h1>
  <p>Первое описание</p>
  <p>Второе описание</p>
  <p>Третье описание</p>
  <p>Четвертое описание</p>
  <p>Пятое описание</p>
  <p>Шестое описание</p>
  <p>Седьмое описание</p>
  <a href="#" class="sapemopo-buslestia">Закрыть</a>
  </div>
</div>

CSS

Код

.dekudsam-keduvam{
  width: 100%;
  height: 100vh;
  display: none;

  position: fixed;
  top: 0;
  right: 0;
}

#sudatibusп_kempobus:target{
  display: flex;
}

.dekudsam-keduvam:before{
  content: "";
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;

  position: fixed;
  left: 0;
  top: 50%;
  will-change: height, top;
  animation: open-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) .65s both;
}

.dekudsam-keduvam:after{
  content: "";
  width: 0;
  height: 2px;
  background-color: #f0f0f0;

  will-change: width, opacity;
  animation: line-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) both;

  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -1px;
}

@keyframes line-animation{

  0%{
  width: 0;
  opacity: 1;
  }

  99%{
  width: 100%;
  opacity: 1;
  }

  100%{
  width: 100%;
  opacity: 0;
  }
}

@keyframes open-animation{

  0%{
  height: 0;
  top: 50%;
  }

  100%{
  height: 100vh;
  top: 0;
  }
}

.nsectetu-adipisicing{
  height: calc(100vh - 40px);
  padding: 5% 15%;
  box-sizing: border-box;
  position: relative;

  margin: auto;
  overflow: auto;
  animation: fade .5s ease-out 1.3s both;
}

@keyframes fade{

  0%{
  opacity: 0;
  }

  100%{
  opacity: 1;
  }
}

.aperiamaku-emolestia{
  font-size: 2.5rem;
  margin: 0 0 1em;
}

.sapemopo-buslestia{
  width: 3.2rem;
  height: 3.2rem;
  text-indent: -9999px;

  position: fixed;
  top: 20px;
  right: 20px;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==);
}

/*
* demo comedona
*/

@media screen and (min-width: 768px){

  html{
  font-size: 62.5%;
  }
}

@media screen and (max-width: 767px){

  html{
  font-size: 50%;
  }
}

body{
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
  font-size: 1.6rem;
  color: #222;
  background-color: #512da8;

  margin: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

p{
  margin: 0;
  line-height: 1.5;
}

p:not(:last-child){
  margin-bottom: 1.5rem;
}

img{
  display :block;
  max-width: 100%;
}

a{
  text-decoration: none;
}

.lectus_providen{
  color: #fff;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border: 1px solid;
}

.comedona{
  min-height: 100vh;
  display: flex;
}

.cusamu_numqu_amsaep{
  max-width: 1200px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: auto;
}

Когда вам нужно закрыть, то на этот имеется верхнем правом углу кнопка, чтоб закрыть. А саму кнопку вы можете разместить в любой стилистике, даже в навигации, главное, чтоб обозначить функцию, что на этой кнопке все сделано красиво и понятно.

Демонстрация

04 Июня 2019 Загрузок: 1 Просмотров: 1860 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0