ZorNet.Ru — сайт для вебмастера » HTML и CSS » 8 эффектов анимации для изображения в CSS

8 эффектов анимации для изображения в CSS

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

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

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

Обратите внимание, что свойство CSS-перехода все еще находится в черновике и не поддерживается Internet Explorer, но с другой стороны, Firefox требует префикс -moz-, Chrome и Safari требует префикс -webkit- Opera требует префиксы.

Играя со свойствами CSS, такими как «after» и «before», то получается круто.

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

CSS анимационные эффекты с использованием переходов

HTML

Код

<dl id="kidasutyed">
  <dt><a href="#gavemauc1">1 Вкладка с эффектами для изображение</a></dt>
  <dd id="gavemauc1">
  <div class="nudas1"></div>
  <div class="nudas2"></div>
  <div class="nudas3"></div>
  <div class="nudas4"></div>
  </dd>
  <dt><a href="#gavemauc2">2 Вкладка с эффектами для изображение</a></dt>
  <dd id="gavemauc2">
  <div class="nudas1 kevingubas"></div>
  <div class="nudas2 kevingubas"></div>
  <div class="nudas3 kevingubas"></div>
  <div class="nudas4 kevingubas"></div>
  </dd>
  <dt><a href="#gavemauc3">3 Вкладка с эффектами для изображение</a></dt>
  <dd id="gavemauc3">
  <div class="nudas1 kevingubas vedimuponeg"></div>
  <div class="nudas2 kevingubas vedimuponeg"></div>
  <div class="nudas3 kevingubas vedimuponeg"></div>
  <div class="nudas4 kevingubas vedimuponeg"></div>
  </dd>
  <dt><a href="#gavemauc4">4 Вкладка с эффектами для изображение</a></dt>
  <dd id="gavemauc4">
  <div class="nudas1 kevingubas vedimuponeg dekasug"></div>
  <div class="nudas2 kevingubas vedimuponeg dekasug"></div>
  <div class="nudas3 kevingubas vedimuponeg dekasug"></div>
  <div class="nudas4 kevingubas vedimuponeg dekasug"></div>
  </dd>
  <dt><a href="#gavemauc5">5 Вкладка с эффектами для изображение</a></dt>
  <dd id="gavemauc5">
  <div class="nudas1 kevingubas vedimuponeg dekasug sulopan"></div>
  <div class="nudas2 kevingubas vedimuponeg dekasug sulopan"></div>
  <div class="nudas3 kevingubas vedimuponeg dekasug sulopan"></div>
  <div class="nudas4 kevingubas vedimuponeg dekasug sulopan"></div>
  </dd>
  <dt><a href="#gavemauc6">6 Вкладка с эффектами для изображение</a></dt>
  <dd id="gavemauc6">
  <div class="nudas1 kevingubas vedimuponeg dekasug sulopan lopatub"></div>
  <div class="nudas2 kevingubas vedimuponeg dekasug sulopan lopatub"></div>
  <div class="nudas3 kevingubas vedimuponeg dekasug sulopan lopatub"></div>
  <div class="nudas4 kevingubas vedimuponeg dekasug sulopan lopatub"></div>
  </dd>
  <dt><a href="#gavemauc7">7 Вкладка с эффектами для изображение</a></dt>
  <dd id="gavemauc7">
  <div class="nudas1 kevingubas vedimuponeg dekasug sulopan lopatub before oulbena_delete_akoun"></div>
  <div class="nudas2 kevingubas vedimuponeg dekasug sulopan lopatub before oulbena_delete_akoun"></div>
  <div class="nudas3 kevingubas vedimuponeg dekasug sulopan lopatub before oulbena_delete_akoun"></div>
  <div class="nudas4 kevingubas vedimuponeg dekasug sulopan lopatub before oulbena_delete_akoun"></div>
  </dd>
  <dt><a href="#gavemauc8">8 Вкладка с эффектами для изображение</a></dt>
  <dd id="gavemauc8">
  <div class="nudas1 kevingubas vedimuponeg dekasug sulopan lopatub360"></div>
  <div class="nudas2 kevingubas vedimuponeg dekasug sulopan lopatub360"></div>
  <div class="nudas3 kevingubas vedimuponeg dekasug sulopan lopatub360"></div>
  <div class="nudas4 kevingubas vedimuponeg dekasug sulopan lopatub360"></div>
  </dd>
  </dl>

CSS

Код

table{
font-size: 100%;
  }

h1{
font-family: 'Seaweed Script', cursive;
font-size:3em;
}

h3, p{
color:#747678;
margin-left:50px;
}

input, select, textarea, th, td{
font-size:1em;
}

dl{
padding: 10px;
min-width: 960px;
}

dl dt{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 3px;
border: 1px solid #f5f3f3;
margin: 0;
background: #0064ff;
}

dl dt a{
color: #ececf5;
font-weight: bold;
text-decoration: none;
padding: 10px;
display: block;
font-size: 14px;
}

dl dd{
color: #bbb2b2;
margin: 0;
overflow: hidden;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
}

dl dd div{
padding: 0px;
margin: 30px;
}

dl dd:not(:target){
height: 0;
}

dl dd:target{
height:220px;
}

dl a.ie:hover dd, dl a.ie:focus dd{
height: auto;
color: #bbb2b2 !important;
}

#kidasutyed div{
float: left;
}

.nudas1{
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/CSS3-logo.jpg) center center no-repeat;
width:200px;
height:150px;
}

.nudas2{
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/android-logo.jpg) center center no-repeat;
width:200px;
height:150px;
}

.nudas3{
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/css3_logo.jpg) center center no-repeat;
width:200px;
height:150px;
}

.nudas4{
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/logo-html5-css3.jpg) center center no-repeat;
width:200px;
height:150px;
}

.sulopan {
position:relative;
top:0;
}

.kevingubas {
border:#bbb2b2 1px solid;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.vedimuponeg {
-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
transition: all 1s ease;
}

.sulopan:hover{
position:relative;
top:-10px;
}

.lopatub:hover{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
ransform: rotate(10deg);
  }

.lopatub360:hover{
-webkit-transform: rotate(370deg);
-moz-transform: rotate(370deg);
-o-transform: rotate(370deg);
ransform: rotate(370deg);
}

.dekasug:hover{
-webkit-box-shadow: -10px 10px 35px #7b7676;
-moz-box-shadow: -10px 10px 35px #7b7676;
-o-box-shadow: -10px 10px 35px #7b7676;
box-shadow: -10px 10px 35px #7b7676;
  }

.kevingubas:hover{
-webkit-border-bottom-left-radius:70px 20px;
  -moz-border-bottom-left-radius:70px 20px;
-o-border-bottom-left-radius:70px 20px;
  border-bottom-left-radius:70px 20px;
cursor:pointer;
}

.before::before{
background-color:none;
background-image:url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/screw.png);
background-repeat:no-repeat;
background-position:center center;
content:'';
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-12px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0px 1px 0px #0d2b54, 0px 1px 0px #4ac1ec;
  -moz-box-shadow: inset 0px 1px 0px #0d2b54, 0px 1px 0px #4ac1ec;
-o-box-shadow: inset 0px 1px 0px #0d2b54, 0px 1px 0px #4ac1ec;
box-shadow: inset 0px 1px 0px #0d2b54, 0px 1px 0px #4ac1ec;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.before:hover::before{
top:50%;
margin-top:-9px;
-webkit-transform: rotate(-720deg);
-moz-transform: rotate(-720deg);
  -o-transform: rotate(-720deg);
transform: rotate(-720deg);
}

.oulbena_delete_akoun::after{
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-12px;
content:'';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-box-shadow: inset 0px 1px 0px #51c1ea, 0px 3px 0px #11376b, 0px 6px 3px #268eb5;
-moz-box-shadow: inset 0px 1px 0px #51c1ea, 0px 3px 0px #11376b, 0px 6px 3px #268eb5;
-o-box-shadow: inset 0px 1px 0px #51c1ea, 0px 3px 0px #11376b, 0px 6px 3px #268eb5;
box-shadow: inset 0px 1px 0px #51c1ea, 0px 3px 0px #11376b, 0px 6px 3px #268eb5;
}

.oulbena_delete_akoun:hover::after{
top:50%;
margin-top:-9px;
-webkit-box-shadow: inset 0px 1px 0px #04316f, 0px 1px 0px #51c1ea;
-moz-box-shadow: inset 0px 1px 0px #04316f, 0px 1px 0px #51c1ea;
  -o-box-shadow: inset 0px 1px 0px #04316f, 0px 1px 0px #51c1ea;
box-shadow: inset 0px 1px 0px #04316f, 0px 1px 0px #51c1ea;
}

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

Что когда курсор наводим, то видим как картинка делает полноценный разворот, но все это быстро можно выстроить в прикрепленном CSS, где все создано на чистом стиле.

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

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

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

СКАЧАТЬ

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

Kosten

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