ነፃ የገንቢ መሣሪያ

CSS እነማ ገንቢ

የ CSS ቁልፍ ፍሬም እነማዎችን በእይታ ይገንቡ። እነማዎችን በቅጽበት ይመልከቱ እና የፈጠረውን የሲኤስኤስ ኮድ በቅጽበት ይቅዱ።

ቅድመ እይታ

ቆይታ2s

መደጋገም

የጊዜ ተግባር

አቅጣጫ

Keyframes

መተርጎምX (px)

ትርጉምY (px)

አሽከርክር (ዲግሪ)

ልኬት

ግልጽነት

ቀለም

መተርጎምX (px)

ትርጉምY (px)

አሽከርክር (ዲግሪ)

ልኬት

ግልጽነት

ቀለም

መተርጎምX (px)

ትርጉምY (px)

አሽከርክር (ዲግሪ)

ልኬት

ግልጽነት

ቀለም

Generated CSS

.animated-element {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  animation-name: my-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: normal;
}

@keyframes my-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
  50% {
    transform: translateX(80px) translateY(-40px) rotate(180deg) scale(1.2);
    opacity: 0.7;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
}

ስላዚህ መሳሪያ

በቀጥታ በአሳሽዎ ውስጥ ይዘትን በCss Animation Builder ይፍጠሩ እና ያብጁ። ምርጫዎችዎን ያዋቅሩ፣ ውጤቱን ይፍጠሩ እና ውጤቱን ያውርዱ ወይም ይቅዱ። ሁሉም ነገር ከደንበኛ-ጎን ነው የሚሰራው - የእርስዎ ውሂብ ሚስጥራዊ ሆኖ ይቆያል እና ማቀናበሩ ፈጣን ነው።

እንዴት ይጠቀሙ

ከፍላጎቶችዎ ጋር የሚዛመዱ ቅንብሮችን እና አማራጮችን ያዋቅሩ።

ውፅዓትዎን ለመፍጠር አመንጪን ጠቅ ያድርጉ።

ውጤቱን አስቀድመው ይመልከቱ እና አስፈላጊ ከሆነ ማስተካከያ ያድርጉ.

የውጤት ፋይሉን ያውርዱ ወይም ወደ ቅንጥብ ሰሌዳዎ ይቅዱት።

በተደጋጋሚ የሚጠየቁ ጥያቄዎች

የተፈጠረውን ውጤት ማበጀት እችላለሁ?

አዎ። መሣሪያው ውጤቱን ለእርስዎ ልዩ ፍላጎቶች ለማስማማት የተለያዩ የማበጀት አማራጮችን ይሰጣል። ከማፍለቅዎ በፊት ቅንብሮችን ያስተካክሉ፣ ወይም በተለያዩ አማራጮች ያድሱ።

የመነጨው ይዘት ለመጠቀም ነፃ ነው?

አዎ። በዚህ መሣሪያ የሚያመነጩት ማንኛውም ነገር ያለ ምንም ገደብ ወይም የእውቅና መስፈርቶች ለግል፣ ትምህርታዊ ወይም ለንግድ ዓላማ ለመጠቀም የእርስዎ ነው።

ይሄ መለያ ያስፈልገዋል?

አይ. መሳሪያው ያለ ምንም ምዝገባ፣ ኢሜል እና ምዝገባ ሳይኖር ወዲያውኑ ለመጠቀም ዝግጁ ነው። ልክ ገጹን ይክፈቱ እና ማመንጨት ይጀምሩ።

የእኔ ግቤት ውሂብ ሚስጥራዊ ነው?

አዎ። ሁሉም ሂደት በአሳሽዎ ውስጥ ይከሰታል። የእርስዎ የግቤት ውሂብ እና የመነጨ ውፅዓት ወደ ማንኛውም ውጫዊ አገልጋይ በጭራሽ አይላኩም።

CSS እነማ ገንቢ

ቅድመ እይታ

Keyframes

Generated CSS

ተዛማጅ መሣሪያዎች

CSS ሚኒፋየር

CSS ፍሌክስቦክስ አቀማመጥ ጄኔሬተር

የሲኤስኤስ ፍርግርግ አቀማመጥ ጄኔሬተር

CSS ቅልመት ጀነሬተር

ስላዚህ መሳሪያ

እንዴት ይጠቀሙ

በተደጋጋሚ የሚጠየቁ ጥያቄዎች

Related Articles

Essential Developer Tools: JSON, Base64, RegEx, and More

Hashing, Encryption, and Encoding Explained: A Developer's Security Guide

Spreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk