How to put a link for each banner in @keyframes

Question

How to put a link for each banner in @keyframes

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have the following code working perfectly, however, I need to have an individual link on each of the three @keyframes fine banners. Is there a possibility?

HTML

<div class="banner"></div>

CSS

.banner {
width: 960px;
height: 350px;
margin: 0 auto;
animation: slide 10s infinite;
animation-direction: alterante;
}

@keyframes slide {

    0%, 30% {
        background-image: url(../imagens/001.jpg);
        }

    35%, 65% {
        background-image: url(../imagens/002.jpg);
        }

    70%, 100% {
        background-image: url(../imagens/003.jpg);
        }

}

css

asked by anonymous 22.06.2017 / 15:21

2 answers

How to import the Chart.js library into an ASP file? Add the total value of a given column for each table - MySQL

score 0 · Answer 1

I do not think so, put your problem and the HTML in the case.

You will need to create 3 divs of the class banner, and in CSS, set them as display none, in each size.

For example:

<div class="banner key1"></div>
<div class="banner key2"></div>
<div class="banner key3"></div>

CSS:

@media screen and (max-width: 30%) and (min-width: 0%) {
   .key2, .key3 {
      display:none;
   }
}
@media screen and (max-width: 65%) and (min-width: 35%) {
   .key1, .key3 {
      display:none;
   }
}
@media screen and (max-width: 100%) and (min-width: 70%) {
   .key1, .key2 {
      display:none;
   }
}

score 0 · Answer 2

You can do something like this:

<a href="seu_link1"><div style="background-image: url('img1');"></a>
<a href="seu_link2"><div style="background-image: url('img2');"></a>
<a href="seu_link3"><div style="background-image: url('img3');"></a>