HTML5 banner készítés

2017-04-13

HTML5 banner, CSS3, transition, animáció, keyframes, meg minden, amit akartok.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="ad.size" content="width=160,height=600">
    <title>Banner</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

    <div class="banner">
        <div class="logo"><img src="logo.svg" alt="logo"></div>
        <div class="product-name">karóra</div>
        <div class="image"><img src="product.png" alt="product"></div>
        <div class="price">13 900 <span>Ft</span></div>
        <a class="cta" href="http://cyrex.hu">érdekel »</a>
    </div>

</body>
</html>

CSS forráskód


.banner {
    width: 160px;
    height: 600px;
    overflow: hidden;
    margin: 20px auto;
    background: url('bg.png');
    text-align: center;
    position: relative;
    font-family: 'Roboto', sans-serif
}
.banner .logo {
    width: 120px;
    margin: 30px auto 10px auto;
    animation: zoom 1s 1s linear;
    opacity: 0;
    animation-fill-mode: forwards
}
.banner .product-name {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    opacity: 0;
    animation: zoom 1s 1s linear;
    animation-fill-mode: forwards
}
.banner .image {
    position: absolute;
    left: -5px;
    top: 150px;
    animation: zoom 1s linear;
    animation-fill-mode: forwards;
    opacity: 0
}
.banner .price {
    position: absolute;
    top: 480px;
    left: 20px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1px;
    background: #d81212;
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    opacity: 0;
    animation: price 1s 3s linear;
    animation-fill-mode: forwards
}
.banner .price span {
    font-size: 15px;
    letter-spacing: 0px
}
.banner .cta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(#088bd5,#0379bc);
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    display: block;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0,0,0,0.2);
    opacity: 0;
    animation:  cta 0.7s 4s linear, cta-pulse 3s 6s linear infinite;
    animation-fill-mode: forwards
}
.banner .cta:hover {
    background: linear-gradient(#0379bc,#088bd5);
}

@keyframes zoom {
    0%   { transform: scale(0,0) }
    100% { transform: scale(1,1); opacity: 1 }
}
@keyframes price {
    0%   { transform: scale(0,0); transform: rotate(180deg) }
    50%  { opacity: 1; transform: scale(3,3)  }
    100% { opacity: 1; transform: scale(1,1) }
}
@keyframes cta {
    0%   { height: 0 }
    50%  { height: 70px; opacity: 1 }
    100% { height: 24px; opacity: 1 }
}
@keyframes cta-pulse {
    0%   { height: 24px }
    10%  { height: 45px }
    20%  { height: 24px }
    100% { height: 24px }
}