3 Cool CSS3 myndhögg áhrif
Á nútíma vefnum eru fjölmargir aðferðir sem hægt er að nota til að búa til áhugaverðar samskipti, en einfaldasta og glæsilegasta er yfirleitt CSS, og sérstaklega viðbætur sem fylgdu CSS3.
Til baka í gamla daga þurftum við að treysta á JavaScript fyrir þessa tegund af áhrifum, en þökk sé sífellt vaxandi stuðningi við CSS3 yfir vöfrum er það nú hægt að setja upp áhrif eins og þessar án skrifunar á öllum. Það eru því miður ennþá vafrar (IE9 og neðan) sem styðja ekki CSS3, þannig að þú þarft annaðhvort fallback fyrir arfleifð vafra eða til að meðhöndla áhrifina sem framsækið aukning.
Í dag erum við að fara að líta á hvernig við getum sótt um flott, en snyrtilegur sveifluráhrif til að sýna og fela myndir í myndum.
Ef þú vilt frekar að fylgja með kóðanum geturðu það sækja skrárnar hér.
Sýnishorn 1
Fyrsta kynningin er einfaldasta okkar: myndin mun fljúga til hægri til að sýna yfirskriftina.
The markup
Fyrir html seinni kynningu okkar munum við nota mjög svipaða merkingu við fyrstu kynningu okkar. En í þetta sinn munum við nota demo-2 sem bekknum og bæta við núllflokknum :
This is a cool title!
Lorem ipsum dolor sit amet.
The CSS
CSS okkar mun vera næstum því sama og fyrsta kynningin, nema að þessi tími munum við færa myndina okkar niður með því að stilla eignina neðst í -96px. Við munum líka nota umskipti CSS3 til að skapa slétt áhrif:
.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}Demo 3
Fyrir síðustu kynningu okkar munum við búa til ósvífinn kortáhrif. Þetta þýðir að þegar þú sveima músinni á myndinni mun það snúast um það á ásnum til að sýna lýsingu.