CSS3 пайдалану арқылы анимация жасау 1
HTML коды
Осында пайдаланған кодпен суреттерді толығымен мына жерден жүктей аласыздар
CSS коды
<!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 пікір
— Салмағы ауырлау;
— Браузердегі стандарт өлшемінен ауытқыса, сапасы бұзылып, позициясынан айрылып қалады.
Сосын бір сұрағым бар еді. Мысалға, картаға басқанда әр облыстың аумағы ерекшеленетіндей қылып jquery-де жасауға болады ма?
Мынау дайын скрипт па?