Рекомендую использовать браузер chrome коим и сам пользуюсь. Но даже в этом примере, в лисе начинаются лаги, нужно «вести курсор» за div`ом. И как же мобильные устройства? Такое меню возможно как прототип галереи или товаров
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> .circle{ width: 100px; height: 100px; background: #c2c2c2; cursor: pointer; transition: 2s; /*transition:2s;*/ /*float: left;*/ display: inline-block; } .circle:hover{ border-radius: 50%; background: #D0D941; color: #000; transition:2s; width: 200px; height: 200px; transform: translate(50%,0); } .circle2:hover{ transform: translate(-50%,0); background: red; } .circle3:hover{ transform: rotate(360deg); background: green; } </style> |
Наши блоки
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="circle circle2"></div> <div class="circle"></div> <div class="circle circle2"></div> <div class="circle"></div> <div class="circle circle2"></div> <div class="circle"></div> <div class="circle circle2"></div> <div class="circle"></div> <div class="circle circle2"></div> <div class="circle"></div> <div class="circle circle2"></div> <div class="circle"></div> <div class="circle circle3"></div> <div class="circle"></div> <div class="circle circle3"></div> <div class="circle"></div> <div class="circle circle3"></div> <div class="circle"></div> <div class="circle circle3"></div> <div class="circle"></div> <div class="circle circle3"></div> |
| Категория: CSS, HTML
| Тэги: CSS / анимация / трансформация