என்றாலும் அனிமேஷன் செய்யப்பட்ட பனியை ஒரு பக்கத்தில் வைக்கவும்எங்களிடமிருந்தோ அல்லது வாடிக்கையாளரிடமிருந்தோ, இது எல்லாவற்றையும் விட பழைய வடிவமைப்பு நடைமுறை போல் தெரிகிறது, உண்மை என்னவென்றால் அனிமேஷன் இந்த சந்தர்ப்பத்தில் நாங்கள் முன்வைக்கிறோம் நேர்த்தியான கடல். உங்களுக்கு ஜாவாஸ்கிரிப்ட் தேவையில்லை, இது எளிது CSS3.
முதல் விஷயம் பாருங்கள் அனிமேஷன்.
மிகவும் நன்றாக இருக்கிறது, இல்லையா? இதை நடைமுறைக்குக் கொண்டுவர நாம் வெள்ளை புள்ளிகளுடன் மூன்று படங்களை உருவாக்கி அவற்றை சொத்தைப் பயன்படுத்தி உயிரூட்ட வேண்டும் @keyframes CSS3 இன் பின்வருமாறு:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
வித்தியாசத்தைச் சேர்த்தல் வெவ்வேறு உலாவிகளுக்கான முன்னொட்டுகள், பின்னர் எங்கள் உடலுக்கு நிறுவுதல்:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
தேவையான முன்னொட்டுகளையும் சேர்ப்பது. விரிவான விளக்கங்களுடன் முழு நடைமுறையும், யோசுவா ஜான்சனின் மரியாதை, அவரது வலைப்பதிவில் காணலாம்.
மேலும் தகவல் - CSS3 சாய்வு ஜெனரேட்டர், CSS3 சாய்வு ஜெனரேட்டர்
ஆதாரம் - வடிவமைப்பு ஷேக்