Rufiq Cavadov
Kilopat
Daha fazla
- Cinsiyet
- Erkek
Merhabalar. Boş zaman bulunca böyle animasyonlu şeyler yapıyrum. Bu da HTML ile animasyonlu haraket eden bir araba örneğidir.
HTML kodları:
CSS kodları:
HTML kodları:
HTML:
<html>
<head>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="car">
<img src="https://cdn4.iconfinder.com/data/icons/car-silhouettes/1000/city-car-512.png" alt="">
</div>
<div class="way">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,700&subset=latin-ext');
* {
margin: 0px;
padding: 0px;
border: 0px;
list-style: none;
text-decoration: none;
outline: none;
}
body {
font-family: 'Comfortaa', cursive;
}
.container {
width: 95%;
margin: 100px auto;
}
.car {
transform: rotate(2deg);
transition: 1s;
}
.car:hover {
transition: 1s;
padding-left: 700px;
cursor: pointer;
}
.way {
margin-top: -65px;
padding: 20px;
background: #333;
transform: rotate(2deg);
}
.line {
display: inline-block;
height: 5px;
width: 130px;
background: #fff;
}
