CSS3 மாற்றம் ஜெனரேட்டர்

மென்மையான ஒளிபுகாநிலை மாற்றம்

பிரபலமான முன்னமைவுகள்

மங்கலான விளைவு

மென்மையான ஒளிபுகாநிலை மாற்றம்

அளவுகோல் விளைவு

மிதவை மீது உறுப்பு அளவை மாற்றவும்

விளைவை சுழற்று

மிதவை மீது உறுப்பு சுழற்று

ஸ்லைடு விளைவு

உறுப்பு நிலையை நகர்த்தவும்

நிற மாற்றம்

பின்னணி வண்ண மாற்றம்

மாற்றங்கள் பற்றி

CSS மாற்றங்கள் ஒரு குறிப்பிட்ட காலப்பகுதியில் சொத்து மதிப்புகளை சீராக மாற்ற உங்களை அனுமதிக்கின்றன.

பொதுவாக அனிமேஷன் பண்புகள் பின்வருமாறு:

  • அகலம், உயரம்
  • விளிம்பு, திணிப்பு
  • ஒளிபுகாநிலை, நிறம்
  • transform (scale, rotate, translate)
  • background-color

சார்பு உதவிக்குறிப்பு: அனைத்து மாற்றங்களையும் உயிரூட்ட 'அனைத்து பண்புகளும்' விருப்பத்தைப் பயன்படுத்தவும்.

Preview

HOVER ME

உருவாக்கப்பட்ட குறியீடு

.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; }  .element:hover { /* Hover styles will be generated here */ }

மாற்றம் கட்டுப்பாடுகள்

300
0

மிதவை விளைவுகள்

100%
100%
0px
0px
8px
8px

Related Tools

சரியான ஃப்ளெக்ஸ்பாக்ஸ் தளவமைப்புகளை உருவாக்கவும்

எங்கள் உள்ளுணர்வு இழுத்தல் மற்றும் இடைமுகத்துடன் CSS ஃப்ளெக்ஸ்பாக்ஸ் குறியீட்டைக் காட்சிப்படுத்தவும், தனிப்பயனாக்கவும் மற்றும் உருவாக்கவும்.

CSS மாற்றிக்கு ஸ்டைலஸ்

உங்கள் SCSS குறியீட்டை CSS ஆக மாற்றவும். வேகமானது, எளிதானது மற்றும் பாதுகாப்பானது.

CSS மாற்றி SCSS

உங்கள் SCSS குறியீட்டை CSS ஆக மாற்றவும். வேகமானது, எளிதானது மற்றும் பாதுகாப்பானது.

Base64 குறியாக்கி கருவி

WordPress க்கான பாதுகாப்பான கடவுச்சொல் ஹேஷ்களை உருவாக்கவும்

RGB முதல் CMYK வரை

அச்சு வடிவமைப்பிற்கான RGB வண்ணங்களை CMYK மதிப்புகளாக மாற்றவும்

அழகான CSS ஏற்றிகள் உருவாக்க

எங்கள் உள்ளுணர்வு இழுத்தல் மற்றும் இடைமுகத்துடன் நொடிகளில் தனிப்பயன் CSS ஏற்றுதல் அனிமேஷன்களை உருவாக்கவும். குறியீட்டு முறை தேவையில்லை!