Scripts
0

CSS: Banner (Zoom)

Script info Eenvoudige banner

Voorbeeld

Niet aanwezig

Kopie script

Select & Copy [HTML]

Select & Copy [CSS]

<style>
      .bannerCover {
      background: #333;
      color: #eee;
         margin: 0;
         padding: 2px 5px;
         width: 468px;
          height: 150px;
         display: block;
         align-items: center;
         justify-content: center;
      }
      .banner{
         box-shadow: 0 0 5px gray;
         padding:2rem;
         padding:30px 10px;
         border-radius: 5px;
         text-align: center;
      }
   
      a {
         text-decoration: none;
         font-weight: 800;
         font-size: 2rem;
         color: #ffff00;
         padding: 0 1rem;
         animation: zoomup 1s linear alternate infinite;
      }
      @keyframes zoomup{
         0%{
            font-size: 2rem;
         }
         25%{
            font-size: 2rem;
         }
         50%{
            font-size: 1.8rem;
            border-radius: 5px;
            padding: 0.2rem 0.5rem;
            color: white;
            background-color: #333;
         }
         75%{
            font-size: 1.8rem;
            border-radius: 5px;
            padding: 0.2rem 0.5rem;
            color: white;
            background-color: blue;
         }
         100%{
            font-size: 1.8rem;
            border-radius: 5px;
            padding: 0.2rem 0.5rem;
            color: white;
            background-color: #333;
         }
      }
   </style>

Select & Copy [Alles in één]

<style>
      .bannerCover {
      background: #333;
      color: #eee;
         margin: 0;
         padding: 2px 5px;
         width: 468px;
          height: 150px;
         display: block;
         align-items: center;
         justify-content: center;
      }
      .banner{
         box-shadow: 0 0 5px gray;
         padding:2rem;
         padding:30px 10px;
         border-radius: 5px;
         text-align: center;
      }
   
      a {
         text-decoration: none;
         font-weight: 800;
         font-size: 2rem;
         color: #ffff00;
         padding: 0 1rem;
         animation: zoomup 1s linear alternate infinite;
      }
      @keyframes zoomup{
         0%{
            font-size: 2rem;
         }
         25%{
            font-size: 2rem;
         }
         50%{
            font-size: 1.8rem;
            border-radius: 5px;
            padding: 0.2rem 0.5rem;
            color: white;
            background-color: #333;
         }
         75%{
            font-size: 1.8rem;
            border-radius: 5px;
            padding: 0.2rem 0.5rem;
            color: white;
            background-color: blue;
         }
         100%{
            font-size: 1.8rem;
            border-radius: 5px;
            padding: 0.2rem 0.5rem;
            color: white;
            background-color: #333;
         }
      }
   </style> 
   <div class="bannerCover">
      <div class="banner">
         <a href="https://www.tutorialspoint.com">Tooljunkie<i>.nl</i></a>
         <p>Studio ViaNova</p>
      </div>
   </div>

Tags: CSS HTML Script

Geef een reactie Reactie annuleren