## CSS animation
### Vaja1
```css=
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #222;
}
a{
position: relative;
color: #f6b93b;
font-family: "Poetsen One", sans-serif;
text-decoration: none;
font-size: 25px;
border: 3px solid;
padding: 25px 60px;
letter-spacing: 10px;
overflow: hidden;
}
a:hover::before,a span:hover::before,a:hover::after,a span:hover::after{
top: 0%;
}
a::before{
position: absolute;
content: '';
background-color: #f6b93b;
width: 25%;
height: 100%;
top: 100%;
left: 0%;
transition: .1s all;
}
a span::before{
position: absolute;
content: '';
background-color: #f6b93b;
width: 25%;
height: 100%;
top: -100%;
left: 25%;
transition: .1s all;
transition-delay: .1s;
}
a span::after{
position: absolute;
content: '';
background-color: #f6b93b;
width: 25%;
height: 100%;
top: 100%;
right: 25%;
transition: .1s all;
transition-delay: .2s;
}
a::after{
position: absolute;
content: '';
background-color: #f6b93b;
width: 25%;
height: 100%;
top: -100%;
right: 0%;
transition: .1s all;
transition-delay: .3s;
}
```
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap" rel="stylesheet">
</head>
<body>
<a href="#"><span class="">Knof</span></a>
</body>
</html>
```
### Vaja2
#### CSS - style
```css=
body{
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
font-family: "Poetsen One", sans-serif;
}
.container{
position: relative;
width: 500px;
height: 500px;
overflow: hidden;
}
.container img{
width: 100%;
transition: .5s all;
}
.container:hover img{
transform: translateY(-30%) scale(1.3) rotate(13deg);
}
.caption{
position: absolute;
width: 100%;
height: 30%;
bottom: 0;
left: 0;
background-color: gray;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateY(100%);
transition: all .5s;
}
.container:hover .caption{
transform: translateY(0);
}
```
#### CSS - style1
```css=
body{
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
font-family: "Poetsen One", sans-serif;
}
.container{
position: relative;
width: 500px;
height: 500px;
overflow: hidden;
}
.container img{
width: 100%;
transition: .5s all;
}
.container:hover img{
transform: scale(1.3) rotate(15deg);
}
.caption{
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background-color: gray;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: all .5s;
opacity: 0;
}
.container:hover .caption{
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
}
.caption a{
color: #fff;
text-decoration: none;
font-size: 14px;
background-color: red;
border: 3px solid red;
padding: 10px;
border-radius: .5rem;
}
.caption h1{
transform: translateY(-500px);
transition: all .5s;
}
.container:hover .caption h1{
transform: translateY(0);
}
.caption p{
transform: scale(10) rotate(360deg);
transition: all .5s;
}
.container:hover .caption p{
transform: scale(1);
}
```
#### HTML
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style1.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<img src="pop-index-2020-chevrolet-corvette-c8-102-1571146873.jpg" alt="avto">
<div class="caption">
<h1>Španija</h1>
<p>Gremo v Španijo na maturantski izlet ali pa tudi ne.</p>
<p>24.2.2024 - Manchester United 1 : 2 Fulham F.C.</p>
<p>Stadium - Old Trafford</p>
<p>ManU -<br> 89' H. Maguire <br> Ful -<br> 65' C. Bessay ,<br> 90 + 7' A. Iwobi</p>
<a href="https://www.fulhamfc.com/">Prava smer ...</a>
</div>
</div>
</body>
</html>
```
### vaja3
#### css
```css=
body{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
animation: tmtotm 5s infinite;
}
@keyframes tmtotm {
0%{
transform: translate(0,0);
}
30%{
transform: translate(400px,0) rotate(180deg);
background-color: blue;
border-radius: 5rem;
}
60%{
transform: translate(400px,300px) rotate(180deg);
background-color: green;
border-radius: 0rem;
}
75%{
transform: translate(0,300px);
background-color: violet;
border-radius: 5rem;
}
100%{
transform: translate(0,0);
background-color: yellow;
}
}
```
#### html
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
```
### vaja4
#### css
```css=
body{
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
background-color: aquamarine;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
text-align: center;
text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
letter-spacing: 5px;
animation: rotation 5s infinite alternate;
}
@keyframes rotation {
from {
transform: rotate(15deg);
}
to {
transform: rotate(-15deg);
}
}
```
#### html
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Gremo na <br>morje</h2>
</body>
</html>
```
### vaja5
#### css
```css=
body{
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.cointainer{
position: relative;
width: 800px;
height: 400px;
display: flex;
align-items: center;
overflow: hidden;
}
.rac{
position: absolute;
top: 35%;
left: 65%;
animation: rot 2s infinite alternate linear;
}
.vojak{
position: absolute;
left: 10%;
top: 10%;
filter: drop-shadow(black 1rem 1rem 10px);
}
.vojak2{
position: absolute;
top: 10%;
filter: drop-shadow(black 1rem 1rem 10px);
}
.caption{
position: absolute;
left: 37%;
text-align: center;
font-size: 2em;
}
.meglica{
position: absolute;
top: 32%;
z-index: 1;
}
a{
position: absolute;
left: 45%;
top: 75%;
font-size: 18px;
border: 3px solid yellowgreen;
background-color: green;
border-radius: 1rem;
padding: 10px 15px;
text-decoration: none;
z-index: 3;
}
a::before{
position: absolute;
width: 50%;
height: 100%;
left: -50%;
}
p span:nth-child(1){color: orange;}
p span:nth-child(3){color: red;}
p span:nth-child(5){color: #fff;}
@keyframes rot {
from{transform: rotate(5deg);}
to{transform: rotate(-5deg);}
}
```
#### html
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cointainer">
<div class="caption">
<p>
<span>Naš nasvet,</span> <br><span>zaščitite</span> <br><span>svoj računalnik.</span>
</p>
</div>
<a href="#">Več ...</a>
<div class="nebo"><img src="nebo.jpg" alt=""></div>
<div class="meglica"><img src="meglica.png" alt=""></div>
<div class="rac"><img src="prenosnik-(1).png" alt=""></div>
<div class="vojak"><img src="Vojak1.png" alt=""></div>
<div class="vojak2"><img src="Vojak2.png" alt=""></div>
</div>
</body>
</html>
```
Sign in with Wallet
Connect another wallet