Исходная анимация CSS Background Imag, перекрывающая ВСЕ. Хотите, чтобы иметь возможность щелкнуть это и ссылку

Итак, я работаю над своим первым проектом - своей личной страницей. У меня есть фоновая анимация, которая по сути представляет собой циклическое изображение, которое пульсирует. Я хочу, чтобы пользователь мог нажать «ввести» часть изображения и перенаправить на мою домашнюю страницу или щелкнуть в любом месте на всей странице.Исходная анимация CSS Background Imag, перекрывающая ВСЕ. Хотите, чтобы иметь возможность щелкнуть это и ссылку

Мое фоновое аннулирование перекрывает все, и независимо от того, что я пытаюсь сделать, и это закладывает любое дополнительное изображение или текстовое поле, я пытаюсь создать эти клики и ссылки на свою домашнюю страницу. У кого-нибудь есть предложения?

HTML:

<!DOCTYPE html> 
{% load staticfiles %} 
<html lang="en"> 

<head> 
    <title>Test</title> 
    <meta charset="utf-8" /> 

<link rel="stylesheet" href="{% static 'personal/css/frontpagebackground.css' %}" type = "text/css"/> 
</head> 
<body> 


<div class="animation"></div> 
<div class="body"></div> 



<a class="element" href="website.net/link" title="photo" id="element">photo</a> 




</body> 
</html>

CSS:

/* hide scroll bar. Y is vertical, x is horizontal*/ 
body { 
    margin:0; 
    padding:0; 
    overflow-y: hidden; 
    overflow-x: hidden; 

} 
/*pulsing background img */ 
.animation { 
    width: 100%; 
    height: 100%; 
    animation: pulse 6s infinite; 
    overflow:hidden; 
    background-color: black; 




} 

@keyframes pulse { 
    0% { 
    background-image: url('img/home2.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    background-color: black; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    opacity: 1; 


    } 
    25% { 
    background-image: url('img/home.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    background-color: black; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    opacity: 1; 

    } 

    50% { 
    background-image: url('img/home2.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    background-color: black; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    opacity: 1; 

    } 
    75% { 
    background-image: url('img/home.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    background-color: black; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover;  
    opacity: 1; 


    } 

    100% { 
    background-image: url('img/home2.jpg'); 
    background-repeat: no-repeat; 
    background-position: center;  
    background-size: cover; 
    background-color: black; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    opacity: 1; 


    } 
} 

html, 
body { 
    height: 100%; 
}

источник

2017-02-12 Phum

'.animation' должно быть' position: absolute; left: 0; top: 0; ', иначе остальные элементы будут отображаться под ним. – Connum

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

-1

Как насчет слушателя JavaScript OnClick на тело тега?

Вы заявили, что хотите быть в состоянии «щелкните по всей странице».. Прикрепление буфера для прослушивания кликов - это простой способ добиться этого, если вы не возражаете или уже используете Javascript.

<body onclick="window.location.href='website.net/link'"> 
    <div class="animation"></div> 
    <div class="body"></div> 
    <a class="element" href="website.net/link" title="photo" id="element">photo</a> 
</body>

Поскольку в комментариях вы указали предпочтение избегать Javascript и использовать HTML5, вы можете выбрать для обертывания и другие элементы в <a> тег для подобного эффекта до тех пор, пока содержание заполняет пространство.

Однако есть одна оговорка в том, что вложенные ссылки <a> не поддерживаются в html5. Поэтому, так как ссылка кнопка такая же, как на странице ссылку вы можете изменить кнопку на <button> теге

<a id="link-wrap" href="website.net/link"> 
    <div class="animation"></div> 
    <div class="body"></div> 

    <button class="element" title="photo" id="element">photo</button> 
</a>

И затем удалить стиль в случае, если у вас есть текст

#link-wrap { 
    text-decoration: none; 
    color: black 
}

~~Кстати Я не вижу тег открытия тела в фрагменте.~~

источник

2017-02-12 00:49:49 user650881

Зачем он должен использовать JavaScript для этого вместо ссылки, если он разрешимый с чистым html + css? Не рекомендуется помешать клиентам без JavaScript или сканеров вводить/индексировать страницу ... – Connum

Но хороший улов на пропавшем теге открытия тега! – Connum

спасибо за указание тега тела, я случайно удалил его раньше, когда возился. Хотелось бы избежать JavaScript, если возможно, HTML + CSS в идеале. – Phum

Сделать .animation элемент

.animation { 
    width: 100%; 
    height: 100%; 
    animation: pulse 6s infinite; 
    overflow:hidden; 
    background-color: black; 
}

так все остальные элементы будут отображаться поверх него, а не после него. То есть, если порядок в разметке остается таким образом, что после него все остальные элементы. Если нет, вам нужно будет установить другие элементы (или оберточный элемент вокруг них) на position: relative; и дать им более высокое значение z-index, чем элемент фона.

источник

2017-02-12 01:28:13 Connum

Большое спасибо, z-index сделал трюк. Кроме того, оцените хэдз-ап в комментарии атрибутов CSS. Как вы можете сказать, я все еще начинаю изучать свой путь. Цените помощь, +1! – Phum

Исходная анимация CSS Background Imag, перекрывающая ВСЕ. Хотите, чтобы иметь возможность щелкнуть это и ссылку

ответ

Смежные вопросы