Hur man animerar en prickad kant med CSS.
Dekorerade kanter kan pryda alla element på sidan, men CSS-kanter är begränsade när det kommer till stil. Utvecklare kommer ofta med lösningar som , SVG-gränser , flera gränser och mer för att efterlikna och uppgradera utseendet på fältkanter och dess animationer.
Idag ska vi titta på ett enklare hack för streckade kanter: streckad kantanimering. Den animerade streckade gränsen kommer att skapas med endast outline och box-shadow , och lämnar inget krångel om fallbacks, eftersom outline stöds från IE8 och framåt. På så sätt kommer användaren fortfarande att kunna se gränserna till skillnad från när SVG eller gradient används. Med detta kan du också skapa tvåfärgade streck. Låt oss ta en titt.
Skapar gränserna
Vi kommer först att skapa gränserna. För detta använder vi en streckad kontur och en boxskugga.
Banderoller (kontur: 6px streckad gul; box-skugga: 0 0 0 6px #EA3556; ...)
Konturen kommer att behöva alla dess värden; bredd, typ och färg. Box-skuggan behöver bara värdet för sprida som ska vara samma som konturens bredd och dess färg. Både konturen och box-skuggan tillsammans skapar effekten av tvåfärgade streck.
Du kan sedan justera lådans bredd eller höjd för önskad kantutseende i hörnen.
Animera gränserna
För vårt första animationsexempel kommer vi att lägga till CSS-nyckelbildsanimationer till en uppsättning banners med gränserna animerade kontinuerligt och få uppmärksamhet. För animeringseffekten byter vi helt enkelt färgerna på konturen och boxskuggan.
@keyframes animateBorder ( till ( konturfärg: #EA3556; box-shadow: 0 0 0 6px gul; ) )
Du kan rikta in dig på färgen på konturen med hjälp av egendomen outline-color longhand, men för boxskugga måste du ge alla värden till stenografiegenskapen för tillfället.
När animeringen är klar lägger du till den i rutan.
Banners (kontur: 6px streckad gul; box-shadow: 0 0 0 6px #EA3556; animation: 1s animateBorder oändlig; ...)
Övergångar På Gränserna
För övergångsexemplet lägger vi till kanter till bilder och animerar dem som svävar. Du kan också ändra kantstorleken för olika effekter.
Foton (kontur: 20px streckad #006DB5; box-shadow: 0px 0px 0px 20px #3CFDD3; övergång: alla 1:or; ... ) .photos:hover( outline-color: #3CFDD3; box-shadow: 0 0 #0 20px 006DB5;
Håll nu muspekaren över dessa bilder för att se dina streckade CSS-kanter i all sin animerade glans.
Och det är en wrap. Du kan prova att ersätta streckade kanter med prickade, men effekten kanske inte blir lika bra. Du kan också ändra konturtypen under animeringen för några fler effekter.
| 18.02.2016
CSS3 öppnar för obegränsade möjligheter för UI-designers, och den största fördelen är att nästan alla idéer enkelt kan implementeras och levandegöras utan att använda JavaScript.
Det är otroligt hur enkla saker kan liva upp en vanlig webbsida och göra den mer tillgänglig för användarna. Det handlar om om CSS3-övergångar, som kan användas för att tillåta ett element att transformera och ändra stil, till exempel vid hovring. De nio CSS3-animationsexemplen nedan hjälper dig att skapa en responsiv känsla på din webbplats, samt förbättra sidans övergripande utseende med vackra, mjuka övergångar.
För mer detaljerad information kan du ladda ner arkivet med filer.
Alla effekter fungerar med övergångsegenskapen. övergång- "transition", "transformation") och pseudo-class:hover, som bestämmer stilen på elementet när muspekaren svävar över det (i vår handledning). För våra exempel använde vi div block 500x309 pixlar i storlek, initial bakgrundsfärg #6d6d6d och övergångslängd från ett tillstånd till ett annat 0,3 sekunder.
Kropp > div ( bredd: 500px; höjd: 309px; bakgrund: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; övergång: alla 0.3s lätt )
1. Ändra färg när du håller muspekaren
En gång i tiden var det ett ganska mödosamt jobb att implementera en sådan effekt, med matematiska beräkningar av vissa RGB-värden. Nu räcker det att skriva ner CSS-stil, där du måste lägga till pseudo-class:hoveren till väljaren och set bakgrundsfärg, som smidigt (på 0,3 sekunder) kommer att ersätta den ursprungliga bakgrundsfärgen när du håller muspekaren över blocket:
Färg:hover (bakgrund:#53ea93;)
2. Ramens utseende
En intressant och slående förvandling är den inre ramen som smidigt visas när du håller musen. Väl lämpad för att dekorera olika knappar. För att uppnå denna effekt använder vi egenskapen pseudo-class:hover och box-shadow med parametern inset (ställer in skuggan inuti elementet). Dessutom måste du ställa in skuggsträckningen (i vårt fall är den 23px) och dess färg:
Border:hover ( box-shadow: infälld 0 0 0 23px #53ea93; )
3. Gunga
Denna CSS-animering är ett undantag, eftersom övergångsegenskapen inte används här. Istället använde vi:
- @keyframes är ett grundläggande direktiv för att skapa bildruta-för-bildruta CSS-animering, vilket låter dig göra den sk. storyboard och beskriv animationen som en lista med nyckelpunkter;
- animation och animation-iteration-count - egenskaper för att ställa in animationsparametrar (varaktighet och hastighet) och antalet cykler (repetitioner). I vårt fall, upprepa 1.
4. Dämpning
Fade-effekten är i huvudsak normal förändring element transparens. Animeringen skapas i två steg: först måste du ställa in det initiala transparenstillståndet till 1 - det vill säga fullständig opacitet, och sedan ange dess värde när du håller musen - 0,6:
Tona ( opacitet: 1; ) .fade:hover ( opacitet: 0,6; )
Byt värdena för motsatt resultat:
5. Förstoring
För att göra blocket större när du håller muspekaren över, kommer vi att använda egenskapen transform och ställa in den på skala(1.2) . I det här fallet kommer blocket att öka med 20 procent samtidigt som det behåller sina proportioner:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Reduktion
Att göra ett element mindre är lika enkelt som att göra det större. Om vi i den femte punkten för att öka skalan behövde specificera ett värde större än 1, då för att minska blocket kommer vi helt enkelt att ange ett värde som kommer att vara mindre än ett, till exempel scale(0.7) . Nu, när du håller musen, kommer blocket proportionellt att krympa med 30 procent av sin ursprungliga storlek:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Förvandling till en cirkel
En av de vanligaste animationerna är ett rektangulärt element som förvandlas till en cirkel när man håller muspekaren över. Genom att använda CSS-egenskaper border-radius används i samband med :hover och transition, detta kan implementeras utan problem:
Circle:hover (kantradie: 70%;)
8. Rotation
Ett roligt animationsalternativ är att rotera ett element med ett visst antal grader. För att göra detta behöver vi transformegenskapen igen, men med ett annat värde - rotateZ(20deg) . Med dessa parametrar kommer blocket att roteras 20 grader medurs i förhållande till Z-axeln:
Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )
9. 3D-skugga
Designers åsikter går isär om det är lämpligt denna effekt i platt design. Denna CSS3-animation är dock ganska original och används även på webbsidor. Uppnå tredimensionell effekt Vi kommer att använda de redan välkända box-shadow-egenskaperna (kommer att skapa en flerskiktsskugga) och transformera med parametern translateX(-7px) (kommer att säkerställa att blocket flyttas horisontellt till vänster med 7 pixlar):
Threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, #5px 3px 3px ; -webkit-transform: translateX( -7px; transform: translateX(-7px)
Webbläsarstöd
Följande webbläsare stöder för närvarande övergångsegenskapen:
| Desktop webbläsare | |
|---|---|
| Internet Explorer | Stöds av IE 10 och högre |
| Krom | Stöds från version 26 (tills version 25 fungerar med prefixet -webkit-) |
| Firefox | Stöds från version 16 (i version 4-15 fungerar det med prefixet -moz) |
| Opera | Stöds från version 12.1 |
| Safari | Stöds från version 6.1 (i version 3.1-6 fungerar det med prefixet -webkit-) |
Resten av egenskaperna som används i dessa exempel, såsom transform , box-shadow , etc., stöds också av nästan alla moderna webbläsare. Men om du ska använda dessa idéer för dina projekt rekommenderar vi starkt att du dubbelkollar kompatibiliteten mellan webbläsare.
Vi hoppas att du tyckte att dessa CSS3-animationsexempel var användbara. Vi önskar dig kreativ framgång!
Det här är ett härligt exempel på att kombinera CSS-övergångar, SVG-grafik och JavaScript för att placera händerna på en söt Pigg-urtavla.
2. CSS-ubåt
Underbar användning av den cirkulära hamnhålsformade behållaren ger denna CSS-animerade ubåt mycket charm.
3. ASCII AT-AT
Stjärnornas krig inspirerad AT-AT-personalbärare, ritad med text med färgerna cyklade i CSS. En funkig effekt.
4.SVG/CSS Loader
Denna lastare använder de skiftande färgerna för att ge intrycket av att rotera.
5. 3D CSS Tardis
CSS kan användas för att skapa fantastiska 3D-effekter. Här är en 3D-tardis:
6. Slumrande fågel
Enkel konststil och precis rätt mängd animation ger denna sömniga fågel en illusion av liv.
7. Ren CSS-kantanimering
Enkel men mycket effektiv användning av CSS-kanter för att skapa en animering i laddningsstil.
8. Star Wars: The Force Awakens
Star Wars: The Force Awakens i CSS av Donovan Hutchinson (@donovanh).
Titeln från den kommande Star Wars-filmen skapad med CSS, HTML och lite JavaScript.
9. 3D Synth
Prova nycklarna och rotera denna 3D-synth skapad med CSS. Fantastiskt jobb:
10. Cascading solsystem
En modell av vårt solsystem, komplett med skalad rotationshastighet, månar och detaljer på var och en av de större planeterna. Solen är till och med en levande bild av den äkta varan!
11. 3D-solsystem
Ännu ett solsystem, men denna gång i 3D. Vacker användning av skuggning.
12. Platt designkamera
Tryck på slutaren på den här platta kameran för att se den skapa ett foto med CSS-animation.
13. Dag- och nattövergång
Tryck på knappen för att se dag förvandlas till natt.
14. Animerad Sprite med CSS
En demonstration av hur en sekvens av bilder (sprite) kan användas för att skapa stop-motion-animationer, komplett med framåt- och bakåtrörelse.
15. Dodekaeder
Lär dig CSS: Den kompletta guiden
Vi har byggt en komplett guide för att hjälpa dig, oavsett om du precis har börjat med grunderna eller om du vill utforska mer avancerad CSS.
En CSS-kant kan dekorera vilket element som helst på sidan, men vid styling gränsegendom har ett antal begränsningar.
Utvecklare var tvungna att utöka sina möjligheter med lösningar som CSS-gradienter, SVG-ramar och några andra, som förbättrar utseendet på ramar och deras animering.
I den här artikeln kommer vi att prata om mer enkel lösning. För att skapa en animerad prickad ruta kommer vi bara att använda outline och box-shadow , utan att behöva skapa en version för flera webbläsare, eftersom outline stöds av IE8 och högre. På så sätt kommer användaren fortfarande att kunna se gränsen, till skillnad från lösningar där vi skulle använda SVG eller en gradient. Detta kan också skapa en tvåfärgad prickad linje. Låt oss ta reda på hur.
Skapa en ram
Först skapar vi en CSS-kant runt texten. För att göra detta använder vi en prickad kontur och egenskapen box-shadow:
Banderoller (kontur: 6px streckad gul; box-skugga: 0 0 0 6px #EA3556; ...)
För kontur måste du ställa in bredd, typ och färg. För box-shadow behöver du bara ställa in spridningsegenskapsvärdet, vilket ska vara samma som bredd och färg för kontur . Tillsammans kommer kontur och box-skugga att skapa en tvåfärgad prickad linjeeffekt.
Du kan sedan justera bredden eller höjden på marginalen för att få den färg du vill ha i hörnen.
Ramanimering
I det första exemplet använder vi nycklar CSS-ramar för att skapa en kontinuerlig, iögonfallande CSS-animation med dubbla ramar. För att göra detta byter vi helt enkelt kontur- och skuggfärgerna:
@keyframes animateBorder ( till ( konturfärg: #EA3556; box-shadow: 0 0 0 6px gul; ) )
Konturfärgen kan anges med den fullständiga versionen av egenskapen outline-color, medan skuggan måste specificeras med egenskapens stenografiformat.
När animeringen är klar lägger du till den i blocket:
Banners (kontur: 6px streckad gul; box-shadow: 0 0 0 6px #EA3556; animation: 1s animateBorder oändlig; ...)
Se demo
Övergångar för ramar
För övergångsexemplet lägger vi till en CSS-kantanimering runt bilden som kommer att spelas upp när du svävar. Du kan också ändra ramstorleken för olika effekter:
Foton (kontur: 20px streckad #006DB5; box-shadow: 0px 0px 0px 20px #3CFDD3; övergång: alla 1:or; ... ) .photos:hover( outline-color: #3CFDD3; box-shadow: 0 0 #0 20px 006DB5;
Håll nu musen över dessa bilder för att se de animerade prickade linjerna CSS-ramar i all ära.
Det är i princip det. Du kan prova att ersätta den streckade linjen med en prickad linje, men då kanske effekten inte ser lika snygg ut. Du kan också ändra sökvägstypen under animeringen.
Översättning av artikeln " Hur man animerar en streckad gräns med CSS"förbereddes av det vänliga projektteamet.
Bra dålig