Drawtest

by m4xout

HTML

<div class="time-line-safe">
                <div class="time-line-moneybox">
                    <img src="//d34a8hm4jb41ju.cloudfront.net/assets/image/time-line-moneybox.png" alt="">
                </div>
                <div class="time-line">
                    <div class="time-line-text">
                        <div class="title">Atatürk Barajı</div>
                        <div class="lt">84.000.000 Ton</div>
                    </div>
                    <div class="time-line-text-3">
                        <div class="title">Keban Barajı</div>
                        <div class="lt">31.000.000 ton</div>
                    </div>
                    <div class="time-line-text-2">
                        <div class="title">Şimdiye kadar</div>
                        <div class="lt total-saving">13,961,941 Ton</div>
                        <div class="title">tasarruf sözü verildi</div>
                    </div>
                    <img src="//d34a8hm4jb41ju.cloudfront.net/assets/image/time-line-coor.png" alt="">
                    <div class="water-safe">
                        <div class="water-top"></div>
                        <div class="water-bottom">
                            <div class="bubbles">
                                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/88939/drop.png" class="bubble b2">
                                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/88939/drop.png" class="bubble b5">
                                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/88939/drop.png" class="bubble">
                                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/88939/drop.png" class="bubble b6">
                                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/88939/drop.png" class="bubble b3">
                                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/88939/drop.png" class="bubble b7">
                             ...

CSS

.time-line-moneybox {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    z-index: 1;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}

.time-line {
    width: 50px;
    height: 100%;
    background-image: url(../image/time-line.png);
    background-repeat: repeat-y;
    background-position: right;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 5px solid #57c0e9;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    cursor: pointer;
}

.time-line-safe:hover .time-line .time-line-text, .time-line .time-line-text-2, .time-line .time-line-text-3 {
    display: block;
    opacity: 1;
}

.time-line .time-line-text {
    position: absolute;
    top: 13%;
    font-size: 12px;
    font-weight: 600;
    color: white;
    right: 50px;
    display: none;
    z-index: 2;
}

.time-line .time-line-text-3 {
    position: absolute;
    top: 30%;
    font-size: 12px;
    font-weight: 600;
    color: white;
    right: 50px;
    display: none;
    z-index: 2;
}

.time-line .time-line-text-2 {
    position: absolute;
    top: 60%;
    font-size: 12px;
    font-weight: 600;
    color: white;
    right: 50px;
    display: none;
    z-index: 2;
}

.time-line img {
    position: absolute;
    top: 60%;
    right: 10px;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

.water-safe {
    position: absolute;
    top: 65%;
    width: 6400px;
    opacity: 1;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

.water-safe .water-top {
    width: 100%;
    height: 30px;
    background-image: url(../image/water-top.png);
    background-repeat: repeat-x;
    animation: watertop 6s linear infinite;
}
.water-safe .water-top {
  width: 100%;
  height: 30px;
  background-image: url(../image/water-top.png);
  background-repeat: repeat-x;
  animation: watertop 6s linear...