CSS3 пайдалану арқылы анимация жасау 2

Programming Solutions /
HTML коды
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="style/style2.css"/>
    </head>
    <body>
        <div class="box animated"></div>
        <div class="box">
            <input type="text" class="customTxtfield"/>
        </div>
        <div class="animated_div transition">
            blabl
        </div>
        <div class="box small transition">
            blbalbla
        </div>
    </body>
</html>

Осында пайдаланған кодпен суреттерді толығымен мына жерден жүктей аласыздар
CSS коды
body{
    background-image: url('image/bg.png');
    background-size: cover;
}

.box{
    width: 500px;
    height: 150px;
    background: rgba(50,0,50,0.5);
    border-radius: 15px;
    box-shadow: 0px 0px 20px 5px white;
}

.box.animated{
    background-image: url('image/add.png'),
                      url('image/calendar.png'),
                      url('image/clock.png');
    background-position:20px 20px,
                        20px 20px,
                        300px 20px;
    background-repeat: no-repeat;
    -webkit-animation: myanimation 5s;
}

.box.small{
    margin-top: 20px;
    box-shadow: none;
    height: 80px;
    width: 200px;
    color:white;
    font-weight: bold;
    font-size: 150%;
}
.box.small:hover{
    transform: scale(2.5);
    -webkit-transform:scale(2.5);
    -moz-transform:scale(2.5);
    -o-transform:scale(2.5);
    -ms-transform:scale(2.5);
}
@-webkit-keyframes myanimation { 
    100% {
        background-position: 50px 50px, 200px 50px, 350px 50px;
    }
}

.animated_div{
    background-color: rgba(50,50,50,0.5);
/*    opacity: 0.5;*/
    border-radius: 5px;
    color:white;
    font-weight: bold;
    font-size: 120%;
    width: 150px;
    height: 100px;
    margin-top: 20px;
}

.animated_div:hover{
    color:black;
    background-color: red;
    width: 300px;
    height: 150px;
    box-shadow: 0px 0px 15px 2px grey;
    -moz-transform: rotate(80deg);
    -webkit-transform: rotate(80deg);
    -o-transform: rotate(80deg);
    transform: rotate(80deg);
}

.customTxtfield,.transition{
    -webkit-transition: all 0.7s linear 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 1s ease 0s;
}

.customTxtfield{
    border-radius: 5px;
    height: 20px;
    width: 50px;
    outline: none;
}

.customTxtfield:focus{
    background-color: black;
    width: 150px;
    color:white;
}

6 пікір

Kan
Түк түсінбедім. кешір. Сенің постыңды түсіну үшін арнайы маман керекау деймін
Janibek
Ия дұрыс айтасыз тым құрығанда СSS,HTML-ден бастапқы мағұлыматыныз болуы керек
serjan
Нәтижені қалай көреміз.
Janibek
мына жерден жүктеп алып архивден шығарсаңыз index.html және index2.html деген веб парақшалар бар соларды ашу арқылы нәтижесін көре аласыз.
islambek
Ақындардың сайты
Құрақ көрпелер сайты
Хтмлчиктер сайты
Тек тіркелген қолданушылар ғана пікір қалдыра алады.