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

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/style.css"/>
    </head>
    <body>
        <div class="left">
            <div class="box animated"></div>
            <div class="animated_div transition">
                animated div
            </div>
            <div class="box small transition rotate">
                rotated div
            </div>
            <div class="box small transition zoomout">
                zoom out
            </div>
            <div class="box small transition zoomin">
                zoom in
            </div>
        </div>
        <div class="right">
            <div class="box">
                <div class="btn blue">
                    <a href="#">first</a>
                </div>
            </div>
        </div>
    </body>
</html>

Осында пайдаланған кодпен суреттерді толығымен мына жерден жүктей аласыздар
CSS коды
body{
    background-image: url('image/bg.png');
    background-size: cover;
}
.box{
    border:1px black solid;
    box-shadow: 5px 2px 10px 1px purple;
    position: relative;
    font-weight: bold;
    font-size: 190%;
    padding-left: 10px;
    width: 500px;
    height: 200px;
    background-color: rgba(50,10,50,0.7);
    margin-top: 20px;
    border-radius: 10px;
}
/*.box a:last-child{
    color:blue;
}*/
.box.animated{
    background-image: url('image/add.png'),
        url('image/clock.png'),
        url('image/calendar.png');
    background-position: 50px 50px,
        200px 50px,
        350px 50px;
    background-repeat: no-repeat;
    -webkit-animation: myanimation 5s;/*animation ұзақтығы,бұл жерде біз 5 секундтық уақыт белгіленген*/
}

@-webkit-keyframes myanimation { 
    0% {
    background-position: 100px 50px, 100px 50px, 100px 50px;
}
100% {
    background-position: 50px 50px, 200px 50px, 350px 50px;
}
}
.animated_div
{
    width:100px;
    height:50px;
    background:highlight;
    color:#ffffff;
    font-weight:bold;
    font-size:15px;
    padding:10px;
    margin:5px;
    border-radius:5px;
    opacity:0.5;
}
.animated_div:hover
{
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity:1;
    background:pink;
    width:200px;
    height:100px;
    color:black;
    font-size:30px;
}

.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;
}
.box.small{
    width: 150px;
    height:50px;
    display: inline-block;
}
.box.small:hover {
    box-shadow: 5px 5px 15px 5px pink;
    background-color: rgba(0,0,100,0.5) ;
}
.box.rotate:hover{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
}
.box.zoomout:hover{
    transform: scale(0.5);
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -o-transform:scale(0.5);
    -ms-transform:scale(0.5);
}
.box.zoomin:hover{
    transform: scale(1.5);
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -o-transform:scale(1.5);
    -ms-transform:scale(1.5);
}

.btn{
    width: 50px;
    border-radius: 7px;
    margin: 6px;
}
.btn:first-child{
    color:white;
    font-weight: normal;
    padding-left: 5px;
    text-decoration: none;
    font-size: 90%;
}
.btn.blue{
    background-color: #8c9cbf;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8c9cbf), color-stop(50%, #546a9e), color-stop(50%, #36518f), color-stop(100%, #3d5691));
  background-image: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -ms-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
    border-bottom: solid 2px #111; 
    -moz-box-shadow:inset 0 0 15px #000000;
    -webkit-box-shadow:inset 0 0 15px #000000; 
    box-shadow:inset 0 0 15px #000000; 
}
.left{
    float: left;
    width: 45%;
    margin-left: 20px;
}
.right{
    width: 45%;
    margin-left: 20px;
    float: right;
}

13 пікір

AL-ASTER
О, тамаша!!! Рахмет! Осыны jQuery'мен байланыстырып, дыбыс қосып www.inspiremedia.kz сайтындағы шапканы осы анимация көмегімен жасап шығу керек. анау флеш шапканың дизайны жақсы болғанымен, минус жақтары:
— Салмағы ауырлау;
— Браузердегі стандарт өлшемінен ауытқыса, сапасы бұзылып, позициясынан айрылып қалады.
Janibek
Ия негізі жасап шығуға болады
Соңғы өңделген уақыты:
ereke_enu
Амигос, мындатіркелің.

Сосын бір сұрағым бар еді. Мысалға, картаға басқанда әр облыстың аумағы ерекшеленетіндей қылып jquery-де жасауға болады ма?
AL-ASTER
Data Visualization with CSS деп аталатын болуы керек
Abylai
Амиго IE тоғызыншы ұрпағына дейін еңіреп жылайд мына кодттарыңа. Үлкен жобаларға әзір экспериментировать етуді рекомендтемеймін.
ereke_enu
Хэдерды қатырыпсың)) Html, сss арқылы сүреттің белгілі бір аумағын белгілеу тек тіктөртбұрыш арқылы болатын болғандықтан флэшты таңдадың ба?
AL-ASTER
Иә амиго, солай. Жалпы сайттың «резиновый» болғанын қалаймын. Сондықтан дизайнын сол қалпы қалдырып, технологиясына толық өзгерту жасау керек болып тұр.
Abylai
Ура css3. Мен де қайта жаза бастайм ау дим. Жаза түс. Меннен +
Мынау дайын скрипт па?
Janibek
Рахмет Абылай. Негизи CSS3 де мүмкіндіктер көп ғой, әр түрлі интернет ресурстарын пайдаланып жазылған ғой
serjan
Нәтижесін көруге мүмкіндік болса.
Yasin
не деген бастар мынаны жазып жатқан
Соңғы өңделген уақыты:
Jako
Мен де тәнті болып,қайран қалып отырмын, жарайсыңдар, білімдерің шарықтай берсін!
Соңғы өңделген уақыты:
Janibek
Бұларды бізден ақылды адамдар ойлап тапқан ғой, біз оларды тек пайдаланушымыз:))
Тек тіркелген қолданушылар ғана пікір қалдыра алады.