Transition Örnekleri
Örnek: Resmin üzerine gelince altındaki resmin gözükmesi
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
img{
position: absolute;
height: 900px;
width: 1600px;
}
</style>
</head>
<body>
<img src="https://images6.alphacoders.com/476/476288.jpg" alt="iki">
<img id="bir" onmouseover="Fade()" onmouseleave="UnFade()" src="https://images6.alphacoders.com/134/1346530.jpeg" alt="bir">
</body>
<script>
const resimBir = document.getElementById("bir")
function Fade(){
resimBir.style.opacity = 0;
resimBir.style.transition = "opacity 1s";
}
function UnFade(){
resimBir.style.opacity = 1;
resimBir.style.transition = "opacity 1s";
}
</script>
</html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
img{
position: absolute;
height: 900px;
width: 1600px;
}
</style>
</head>
<body>
<img src="https://images6.alphacoders.com/476/476288.jpg" alt="iki">
<img id="bir" onmouseover="Fade()" onmouseleave="UnFade()" src="https://images6.alphacoders.com/134/1346530.jpeg" alt="bir">
</body>
<script>
const resimBir = document.getElementById("bir")
function Fade(){
resimBir.style.opacity = 0;
resimBir.style.transition = "opacity 1s";
}
function UnFade(){
resimBir.style.opacity = 1;
resimBir.style.transition = "opacity 1s";
}
</script>
</html>
Yorumunuzu Ekleyin
