CSS - Elemek mozgatása
.minta_mozog { width:100%; height:100px; border:1px solid gray; background-color:#b1b1b1; position: relative; -webkit-animation-name: fentrol; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ animation-name: fentrol; animation-duration: 2s; -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */ animation-delay: 0s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes fentrol { 0% {/*background-color:red;*/ left:0px; top:-100px;} 100% {/*background-color:red;*/ left:0px; top:0px;} } /* Standard syntax */ @keyframes fentrol { 0% {/*background-color:red;*/ left:0px; top:-100px;} 100% {/*background-color:red;*/ left:0px; top:0px;} }
Nem a szöveg mozog, hanem a szöveget tartalmazó doboz.
Ez a szöveg csak akkor mozog, ha frissíted az oldalt.
Ez a szöveg csak akkor mozog, ha frissíted az oldalt.
CSS - Színátmentes kitöltés
.minta_szinatmenet { background: linear-gradient(to bottom,#6D90BA 0%,#3572B9); color:white; height:100px; width:100%; } .minta_szinatmenet:hover { background: linear-gradient(to bottom,#3572B9 0%,#6D90BA); }
A terület háttérszíne függőlegesen változik. A hover érték az érintéskori viselkedést befolyásolja, ebben az esetben megfordulnak a kitöltés színek.
CSS - Kép méretének növelése érintéskor
.minta_kep img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .minta_kep img:hover{ -webkit-transform:scale(1.25); /* Safari and Chrome */ -moz-transform:scale(1.25); /* Firefox */ -ms-transform:scale(1.25); /* IE 9 */ -o-transform:scale(1.25); /* Opera */ transform:scale(1.25); }
Tedd rá az egeret a képre!