Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

iPhone 7 Plus на CSS и jQuery с крутым эффектом при наведении

Дата добавления: 03.03.2017 - 16:45
Добавил: Buger
Количество просмотров: 334
Количество комментариев: 0
Размер файла: 15.2Kb
Рейтинг материала: 5.0 / 1
iPhone 7 Plus на CSS и jQuery с крутым эффектом при наведении
рейтинг 5.0
/
голосов 1
Если честно, я не знаю где можно применить данную реализацию, но все же выкладываю код, так как смотрится очень красиво и реалистично, может кто что-то придумает, как говорится сколько людей столько и мнений. Данное решение было реализовано при помощи CSS и jQuery. С установкой также все очень просто.

Демонстрацию смотрим в скачаном файле.

И так поехали.

Сделаем HTML разметку для нашего объекта
Код
<div class='iphone' id='iphone'>
  <div class='iphone_camera'></div>
  <div class='iphone_ear-speaker'></div>
  <div class='iphone_overlay'></div>
  <div class='iphone_screen'>
  <ul class='iphone_screen-signal'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul>
  <span class='iphone_screen-operator'>Tele2 4G</span>
  <span class='iphone_screen-lock'>
  <i class='fa fa-lock'></i>
  </span>
  <div class='iphone_screen-time' id='time'></div>
  <div class='iphone_screen-date' id='date'></div>
  <span class='iphone_screen-battery'>
  97%
  <i class='fa fa-battery-full'></i>
  </span>
  </div>
  <div class='iphone_home'></div>
  <div class='iphone_silent-mode'></div>
  <ul class='iphone_sound'>
  <li></li>
  <li></li>
  </ul>
  <ul class='iphone_bottom-right-speaker'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul>
  <div class='iphone_bottom-middle-charge'>
  <span></span>
  <span></span>
  </div>
  <ul class='iphone_bottom-left-speaker'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul>
  </div>
  <div class='iphone_text'>iPhone 7 Plus</div>


Теперь давайте подключим наши стили
Код
<style class="cp-pen-styles">
  @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
  *,
  *:before,
  *:after {
  box-sizing: border-box;
  }
   
  body {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  background: #FFF;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  padding-top: 100px;
  }
   
  .iphone {
  width: 360px;
  height: 810px;
  border-radius: 50px;
  -webkit-transform: rotateX(55deg) rotateZ(-45deg);
  transform: rotateX(55deg) rotateZ(-45deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  background: none;
  box-shadow: -35px 35px 50px 5px #333;
  z-index: 1;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  }
   
  .iphone:hover {
  -webkit-transform: rotateX(45deg) rotateZ(-35deg) translate(200px, -200px);
  transform: rotateX(45deg) rotateZ(-35deg) translate(200px, -200px);
  box-shadow: -255px 270px 15px 15px #333;
  }
   
  .iphone:hover:before {
  width: 380px;
  height: 830px;
  left: -16px;
  }
   
  .iphone:hover + .iphone_text {
  opacity: 1;
  }
   
  .iphone:hover .iphone_overlay:before {
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
  }
   
  .iphone:hover .iphone_screen {
  opacity: 1;
  }
   
  .iphone:before {
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  content: "";
  display: block;
  background: #111;
  width: 390px;
  height: 840px;
  border-radius: 77px 49px 86px 70px;
  position: absolute;
  top: 5px;
  left: -26px;
  box-shadow: inset #3D3E42 0 0 15px 9px;
  z-index: -1;
  }
   
  .iphone:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  bottom: 0;
  left: 5px;
  height: 800px;
  width: 100%;
  background-color: #222;
  border-radius: 50px;
  box-shadow: inset 2px 2px 2px 0px #444;
  }
   
  .iphone_camera {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  background: -webkit-radial-gradient(center ellipse, #cad9df 0%, #515050 100%);
  background: radial-gradient(ellipse at center, #cad9df 0%, #515050 100%);
  box-shadow: inset 2px 2px 2px 0px #333;
  position: absolute;
  top: 45px;
  left: -60px;
  right: 0;
  margin: auto;
  z-index: 2;
  }
   
  .iphone_ear-speaker {
  width: 55px;
  height: 10px;
  border-radius: 55px;
  border: 1px solid #000;
  background: -webkit-radial-gradient(center ellipse, #000 50%, #000 100%);
  background: radial-gradient(ellipse at center, #000 50%, #000 100%);
  box-shadow: inset 2px 2px 15px 0px #333;
  border: 2px solid #111111;
  position: absolute;
  top: 45px;
  left: 0;
  right: -45px;
  margin: auto;
  z-index: 2;
  }
   
  .iphone_overlay {
  position: absolute;
  width: 390px;
  height: 800px;
  z-index: 4;
  left: 6px;
  overflow: hidden;
  pointer-events: none;
  }
   
  .iphone_overlay:before {
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  content: "";
  display: block;
  width: 350px;
  height: 100%;
  position: absolute;
  top: 0;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  z-index: 10;
  }
   
  .iphone_screen {
  position: absolute;
  width: 350px;
  height: 650px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 3;
  top: 80px;
  left: 10px;
  right: 0;
  margin: auto;
  overflow: hidden;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  opacity: 0;
  background-image: url('http://images.iphone7pluswallpaper.com/Gallery/08_Nature/iphone-7-plus-wallpaper-papers.co-ad01-wallpaper-apple-ios8-iphone6-plus-official-dark-starry-night-15-wallpaper.jpg');
  }
   
  .iphone_screen-signal {
  margin: 3px 5px;
  padding: 0;
  display: block;
  position: absolute;
  list-style: none;
  }
   
  .iphone_screen-signal li {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #fff;
  }
   
  .iphone_screen-signal li:last-child {
  background: transparent;
  }
   
  .iphone_screen-operator {
  position: absolute;
  top: 0;
  left: 50px;
  margin: 5px;
  color: #fff;
  font-weight: 300;
  }
   
  .iphone_screen-lock {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 5px auto;
  color: #fff;
  text-align: center;
  }
   
  .iphone_screen-battery {
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
  color: #fff;
  font-weight: 300;
  }
   
  .iphone_screen-time,
  .iphone_screen-date {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  text-align: center;
  font-size: 80px;
  color: #fff;
  z-index: 7;
  }
   
  .iphone_screen-date {
  font-size: 25px;
  top: 140px;
  font-weight: 300;
  }
   
  .iphone_home {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 745px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  background: -webkit-radial-gradient(center ellipse, #222 50%, #000 100%);
  background: radial-gradient(ellipse at center, #222 50%, #000 100%);
  box-shadow: inset 2px 2px 15px 0px #333;
  border: 2px solid #111111;
  z-index: 6;
  cursor: pointer;
  }
   
  .iphone_silent-mode {
  position: absolute;
  left: -15px;
  top: 80px;
  display: block;
  width: 7px;
  height: 25px;
  border-radius: 27px;
  background: #222;
  box-shadow: inset -2px -2px 3px 0 #000;
  }
   
  .iphone_sound {
  position: absolute;
  display: block;
  left: -15px;
  top: 100px;
  margin: 0;
  padding: 0;
  list-style: none;
  }
   
  .iphone_sound li {
  position: absolute;
  left: 0;
  display: block;
  width: 7px;
  height: 50px;
  border-radius: 27px;
  background: #222;
  box-shadow: inset -2px -2px 3px 0 #000;
  }
   
  .iphone_sound li:first-child {
  top: 30px;
  }
   
  .iphone_sound li:last-child {
  top: 85px;
  }
   
  .iphone_bottom-right-speaker,
  .iphone_bottom-left-speaker {
  position: absolute;
  top: 810px;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  }
   
  .iphone_bottom-right-speaker li,
  .iphone_bottom-left-speaker li {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: #000;
  box-shadow: inset 0 -1px 3px 0 #444;
  }
   
  .iphone_bottom-right-speaker {
  right: 55px;
  left: auto;
  }
   
  .iphone_bottom-left-speaker {
  left: 55px;
  right: auto;
  }
   
  .iphone_bottom-middle-charge {
  position: absolute;
  top: 818px;
  left: 0;
  right: 0;
  margin: auto;
  height: 15px;
  width: 35px;
  display: block;
  border-radius: 27px;
  background: #000;
  box-shadow: inset 1px 1px 1px 0 #222;
  -webkit-transform: rotateX(-60deg);
  transform: rotateX(-60deg);
  }
   
  .iphone_bottom-middle-charge span {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #333;
  top: 3px;
  }
   
  .iphone_bottom-middle-charge span:before {
  content: "";
  display: block;
  position: absolute;
  top: 2.5px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  width: 50%;
  height: 50%;
  background: #000;
  }
   
  .iphone_bottom-middle-charge span:first-child {
  left: -10px;
  }
   
  .iphone_bottom-middle-charge span:last-child {
  right: -10px;
  }
   
  .iphone_text {
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  opacity: 0;
  color: #fff;
  position: absolute;
  z-index: 10;
  font-size: 60px;
  pointer-events: none;
  left: 0;
  right: 0;
  margin: auto;
  width: 500px;
  }
  </style>


Ну и в завершении применим jQuery для нашего объекта, которое будет выводить дату и время
Код
<script>
  $(function () {
  var $date = new Date();
  var $today = new Array(7);
  var $month = new Array(12);

  $today[0] = "Воскресение";
  $today[1] = "Понедельник";
  $today[2] = "Вторник";
  $today[3] = "Среда";
  $today[4] = "Четверг";
  $today[5] = "Пятница";
  $today[6] = "Суббота";

  $month[0] = "Января";
  $month[1] = "Февраля";
  $month[2] = "Марта";
  $month[3] = "Апреля";
  $month[4] = "Мая";
  $month[5] = "Июня";
  $month[6] = "Июля";
  $month[7] = "Августа";
  $month[8] = "Сентября";
  $month[9] = "Октября";
  $month[10] = "Ноября";
  $month[11] = "Декабря";

  $todayIs = $today[$date.getDay()] + ", " + $date.getDate() + " " + $month[$date.getMonth()];

  $("#date").html($todayIs);
  });

  $(function () {
  var $today = new Date();
  var $hour = $today.getHours();
  var $min = $today.getMinutes();

  if ($hour.toString().length == 1) {
  $hour = "0" + $hour;
  }

  if ($min.toString().length == 1) {
  $min = "0" + $min;
  }

  $("#time").html($hour + ':' + $min);
  });
  $(function () {
  var $iphone = $("#iphone");
  $iphone.on("touchstart", function () {
  $("this").is(":hover");
  });
  $iphone.on("touchend", function () {
  $("this").not(":hover");
  });
  });
  </script>


Источник: https://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.