CSS
HTML
COMPONENTS
CODE HUB
CSS Hue-Rotate Generator
Konfiguráció
Hue-Rotate
Osztály
Előnézet
Kód
Tanulj meg kódolni Larával
Sajátítsd el a programozási alapokat lépésről lépésre az interaktív AI tutorod segítségével. Lara elmagyarázza a komplex logikát, átnézi a gyakorló feladataidat, és segít szilárd alapokat építeni a szoftverfejlesztésben.
Interaktív kódolási leckék a saját tempódra szabva.
Tanulás indítása LarávalCSS Hue-Rotate Generator
A CSS-ben a "hue-rotate" hatást a "filter" tulajdonság segítségével alkalmazhatja. A "hue-rotate" hatás lehetővé teszi, hogy egy elem színeit a színkör mentén eltolja, ami a színárnyalat változását eredményezi, miközben a telítettség és a világosság értékei változatlanok maradnak. Ez egy módja annak, hogy érdekes színváltozásokat vagy animációkat hozzon létre a webdesignban.
Íme, hogyan használhatod a "hue-rotate" hatást CSS-ben:
.hue-rotate-element {
filter: hue-rotate(90deg);
}
ebben a példában:
- A ".hue-rotate-element " osztály a "hue-rotate" hatást alkalmazza a célzott elemre.
- "hue-rotate(90deg) " 90 fokos elforgatást ad meg a színkörön. Ez azt jelenti, hogy az elem színei 90 fokkal eltolódnak, ami a színárnyalat változását eredményezi.
A szögértéket (fokban) állíthatja be, hogy szabályozza a színárnyalat elforgatásának mértékét és irányát. A pozitív értékek az óramutató járásával megegyező irányba, míg a negatív értékek az óramutató járásával ellentétes irányba forgatják a színeket.
Itt egy másik példa részleges szürkeárnyalatokkal:
.hue-rotate-element-2 {
filter: hue-rotate(-45deg);
}
Ebben az esetben a ".hue-rotate-element-2" osztály egy "hue-rotate" hatást alkalmaz -45 fokos szöggel, ami a színeknek az óramutató járásával ellentétes irányú eltolódását eredményezi.
A "hue-rotate" effektus kreatív módja a színek manipulálásának és animálásának a weboldalon, ami vizuálisan érdekessé és változatossá teszi a designt.