.about-photo1-mobile:hover .about-photo1-hover {
display: block;
width: 762px;
height: 722px;
left: calc(50% - 332px/2 - 1px);
background: rgba(237, 231, 230, 0.9);
margin-top: -380px;
padding-top: 47px;
transform: translate3d(0,0,0); /* new */
}-webkit-background-clip: text;
element.classList.add('class')) и снимать по таймеру(setTimeout(){}), можете оставить как в демке - тогда будет мигать после первого нажатия по ссылке и после каждого нажатия по ссылке, если текущий хэш не #footer.
var d = $0.toDataURL("image/png"); // $0 - ссылка на элемент canvas из-за того, что кликнули на него мышкой. можете заменить $0 на поиск элемента по id. document.getElementById('answer')
var w = window.open('about:blank','image from canvas');
w.document.write("<img src='"+d+"' alt='from canvas'/>");реально стало интересно как это делается
const animItems = // Элементы для анимации. Можете задать им общий класс и найти сразу все, можете сложить разные(с разными классами) элементы в один массив
// ..code
animItems.forEach(function(item){item.classList.add('_active')})pointer-events: none чтобы можно было дальше взаимодействовать с элементами.
*,*::after,*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
}
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
background-color: lavenderblush;
padding: 1%;
}
.navbar__block {
display: flex;
}
.navbar__link {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
padding: 5px;
}
.navbar__link:hover {
background-color: rgb(216, 216, 216);
border-radius: 10%;
}
.navbar__button {
width: 100px;
height: 30px;
background-color: greenyellow;
border: none;
border-radius: 20px;
outline: none;
}
.navbar__button:hover {
cursor: pointer;
}
.burger {
display: none;
opacity: 0; // определяем начальное состояние как прозрачное
transform: translateY(-10px); // смещённое вверх на 10 пикселей.
}
.burger-img {
max-width: 40px;
padding: 2px;
}
.burger__links {
display: none;
}
.burger-img__cancel {
max-width: 35px;
}
.burger__ul {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
background-color: grey;
top: 40px;
left: 0;
z-index: 1;
transition: all 2s ease 0s;
}
@media (max-width: 587px) {
.navbar__block > a {
display: none;
}
.burger {
display: block;
animation-name: showBurger; // навешиваем анимацию
animation-duration: 0.2s; // определяем её длительность
animation-fill-mode: forwards; // и говорим что в конце анимации элемент должен остаться в конечном состоянии анимации
}
.burger__ul li {
font-size: 1.5em;
list-style: none;
background: rgb(179, 179, 179);
padding: 5px;
margin: 5px 0;
width: 90%;
text-align: center;
}
}
// Сама анимация.
@keyframes showBurger {
// Сразу описываем конечное состояние, так как начальное мы уже определили выше.
100% {
opacity: 1; // Делаем снова непрозрачным.
transform: translateY(0) // И возвращаем на место
}
}.element__text::before {
content: "";
display: inline-block;
height: 0.20em;
width: 0.20em;
background: red;
border-radius: 50%;
text-align: right;
}.item:first-child {
grid-row-start: 1;
grid-row-end: 2; // А у вас 3. Если первый элемент занимает 2 строки, то как третьему элементу занять его место? А высоту Вы зафиксировали.
grid-column-start: 1;
grid-column-end: 3;
}.lm_maximise[title="Увеличить"]. А если выдаёт не нужные элементы, то усложнить через родителя? Типа так: .lm_header > .lm_controls > .lm_maximise[title="Увеличить"].no-mobilemedia (max-width: 992px) {
.no-mobile {
display: none;
}
}:notmedia (max-width: 992px) {
.nav.navbar-nav.navbar-right li:not(#cart):not(#search) {
display: none;
}
}.apSquare {
min-width: max-content;
height: max-content;
border-radius: 4px;
width: 3rem;
float: left;
cursor: pointer;
position: relative;
}
.apNo {
position: absolute;
display: inline-block;
max-width: max-content;
top: 5px;
right: 5px;
}