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

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 пікір

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

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