Globe Views
500 things that everyone should know ...
Home | About Us

Howto Lag et bilde glidebryteren Med ren CSS3

Bilde glidebryteren er en populær effekt og ofte brukt i porteføljen nettsteder og blogger. De fleste av disse glidere er skapt av Javascript. Men med CSS3 styrke, kan vi gjennomføre et bilde glidebryteren med bare rene CSS3. Denne artikkelen vil lede deg til å gjøre det. 1. HTML Markup HTML-koden for bilde glideren er så enkelt som dette:
  • <div id="images">
  • <img id="image1" src="1.jpg" />
  • <img id="image2" src="2.jpg" />
  • <img id="image3" src="3.jpg" />
  • <img id="image4" src="4.jpg" />
  • <img id="image5" src="5.jpg" />
  • </div>
  • <div id="slider">
  • <a href="#image1">1</a>
  • <a href="#image2">2</a>
  • <a href="#image3">3</a>
  • <a href="#image4">4</a>
  • <a href="#image5">5</a>
  • </div>
Vi fører alle bildene i en div med id = "bilder" og lysbildet kontroll i en div med id = "slider". Hvert lysbilde kontrollknappen er en brikke med målpunkter til tilsvarende bilde. 2. Grunnleggende CSS Vi vil style bildene og lysbilde kontroll med noen grunnleggende CSS for å gjøre dem vakre:
  • #images {
  • width: 400px;
  • height: 250px;
  • overflow: hidden;
  • position: relative;
  • margin: 20px auto;
  • }
  • #images img {
  • width: 400px;
  • height: 250px;
  • position: absolute;
  • top: 0;
  • left: -400px;
  • }
  • #images img:first-child {
  • left: 0;
  • }
  • #slider a {
  • text-decoration: none;
  • background: #E3F1FA;
  • border: 1px solid #C6E4F2;
  • padding: 4px 6px;
  • color: #222;
  • }
  • #slider a:hover {
  • background: #C6E4F2;
  • }
I denne koden, angir vi fast bredde og høyde for både # bilder element og dets innhold. Vi har også satt position="relative" for #images, og position="absolute" for alle bilder så vel som deres venstre og øverst attributtet. Dette vil gjøre alle bildene blir satt på samme sted, overlay de hverandre. Legg merke til den negative venstre attributtet. Den brukes til å stille inn begynnelsen posisjon av bilder, dvs. ut av # bildene div. Hvorfor gjør vi det? Fordi vi vil at bildene lysbilde fra venstre til høyre inn på # image div boks. Men når vi lanserer manuset, er # bilder div boksen helt tom. Vi ønsker ikke det, så vi satt venstre: 0 for første bilde for å vise det i # bildene div boks. 3. CSS3 overgang for Slider Å skyve bilder med CSS3, vil vi bruke overgangen funksjonen. CSS3 overgangen har følgende syntaks: overgang: overgang eiendom overgang varighet overgang timing-funksjon overgang forsinkelse; I vårt tilfelle, må vi skyve fra venstre til høyre, så overgangen-eiendommen er igjen, men vi vil legge til noen effekt med tetthet for kjøligere effekt, så vi bruker alt for overgang eiendom. Overgangen-timing-funksjonen skal være lineær. Forsinkelsen og varighet kan være noe, jeg velger 1s. Så vil CSS3 for lysbildet effekt være:
  • #images img {
  • z-index: 1;
  • opacity: 0;
  • transition: all linear 1s;
  • -o-transition: all linear 1s;
  • -moz-transition: all linear 1s;
  • -webkit-transition: all linear 1s;
  • }
  • #images img:target {
  • left: 0;
  • z-index: 9;
  • opacity: 1;
  • }
Her bruker vi: target pseudo-kode for å målrette bildet når vi klikker på lysbildet kontrollknappen. Når bildet er målrettet, setter vi den venstre attributt til 0 for å sikre at bildet vises inne # bilder div boks. I denne koden, er det en ting som trengs for å bli lagt merke til. Det er z-index attributt. Fordi vi sette alle bildene på samme sted, så når vi trenger å vise målrettet bildet, bør vi gjøre det overlay andre ved å angi en høyere z-index. Så er den komplette CSS for bildet skyveknapp:
  • #images {
  • width: 400px;
  • height: 250px;
  • overflow: hidden;
  • position: relative;
  • margin: 20px auto;
  • }
  • #images img {
  • width: 400px;
  • height: 250px;
  • position: absolute;
  • top: 0;
  • left: -400px;
  • z-index: 1;
  • opacity: 0;
  • transition: all linear 500ms;
  • -o-transition: all linear 500ms;
  • -moz-transition: all linear 500ms;
  • -webkit-transition: all linear 500ms;
  • }
  • #images img:target {
  • left: 0;
  • z-index: 9;
  • opacity: 1;
  • }
  • #images img:first-child {
  • left: 0;
  • }
  • #slider a {
  • text-decoration: none;
  • background: #E3F1FA;
  • border: 1px solid #C6E4F2;
  • padding: 4px 6px;
  • color: #222;
  • }
  • #slider a:hover {
  • background: #C6E4F2;
  • }
En ulempe ved denne metode at det første bildet alltid vises som en bakgrunn. Hvis du virkelig ikke vil ha det, det er en løsning: ikke bruk CSS3 overgang for venstre eiendom (sett igjen: 0 for originale bilder), og bruke CSS3 overgang for opasitet bare.
Globe Views

Copyright™ 2014: «QRATOR Creative Technologies»