Beispiel:CSS-object-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" >
    <title>Art Direction  mit object-fit und object-position</title>
    <style>
img {
	animation: direction 5s infinite alternate linear;
}

@keyframes direction { 
  0% { 
	object-fit: cover;
	object-position: 50% 50%;
	width: 50em;
	height: auto;
  } 
  95% { 
	object-fit: cover;
	object-position: 100% 50%;
	width: 15em;
	height: 20em;	
  } 
  100% { 
	object-fit: cover;
	object-position: 100% 50%;
	width: 15em;
	height: 20em;	
  } 
}
    </style>
</head>
<body>
  <h1>Art Direction mit object-fit und object-position</h1>

  <article>
    <h2>Monument Valley</h2>
    <p>
        <img src="https://wiki.selfhtml.org/images/6/62/John_Ford%27s_Point_Monument_Valley_Luca_Galuzzi_2007.jpg" alt="Ford's Point in Monument Valley, by Luca Galuzzi">
    </p>  
  </article>
  
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-object-3.html&oldid=86987“