bezahlt von CSS3 Animationen
<html>
<head>
<style type="text/css">
div.slider{
width:100%;
height: 300px;
overflow-x:hidden;
overflow-y:hidden;
border-bottom:1px solid #000000;
}
div.slider-item{
background-color:#44AAAA;
width:100%;
height:100%;
animation-name: slide-in;
animation-duration: 4s;
}
@-moz-keyframes slide-in{
0%{opacity: 0;margin-left:100%;}
20%{margin-left:0%;}
100%{opactiy:1;}
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-item"></div>
</div>
</body>
</html>
einblenden: opacity 0 auf 1
von links: margin-left 100% auf 0%
von-rechts: margin-right 100% auf 0%
wachsen lassen: scale(0) auf scale(1)
schrumpfen lassen: scale(2) auf scale(1)
Ein Snap-In Effekt:
@-moz-keyframes snap-in{
0%{transform:scale(1.2);opacity:0;}
50%{opacity:0.2;}
95%{transform:scale(0.9);opacity:1;}
100%{transform:scale(1)}
}
| User | annonyme | 2016-12-30 20:22 |
write comment: