Interaktīvās animācijas

unknown
html_elixir
2 years ago
987 B
Indexable
Never
<!DOCTYPE html>
<html>
<head>
<style>
#virsraksts
{
    padding: 10px;
    transition: 1s;
}
#virsraksts:hover
{
    background: #123456;
    color: white;
}
#baltaiskakis
{
    height: 250px;
    transition: 1s;
}
#baltaiskakis:hover
{
    transform: scale(1.4);
}
#rizaiskakis
{
    height: 250px;
    transition: 1s;
}
#rizaiskakis:hover
{
    transform: rotate(45deg) scale(1.4);
}
#pelekaiskakis
{
    height: 250px;
    transition: 1s;
}
#pelekaiskakis:hover
{
    transform: translate(0%, -20%);
}
</style>

</head>
<body>

<div id='virsraksts'>Veidojam animācijas</div>

<img id='pelekaiskakis' src='https://images.pexels.com/photos/208984/pexels-photo-208984.jpeg?auto=compress&cs=tinysrgb&w=600'>

<img id='rizaiskakis' src='https://images.pexels.com/photos/1170986/pexels-photo-1170986.jpeg?auto=compress&cs=tinysrgb&w=600'>

<img id='baltaiskakis' src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&w=600">

</body>
</html>