ಆದರೂ ಅನಿಮೇಟೆಡ್ ಹಿಮವನ್ನು ಪುಟದಲ್ಲಿ ಇರಿಸಿನಮ್ಮಿಂದ ಅಥವಾ ಕ್ಲೈಂಟ್ನಿಂದ, ಇದು ಎಲ್ಲಕ್ಕಿಂತ ಹಳೆಯದಾದ ವಿನ್ಯಾಸದ ಅಭ್ಯಾಸದಂತೆ ತೋರುತ್ತದೆ, ಸತ್ಯವೆಂದರೆ ಅದು ಅನಿಮೇಷನ್ ಈ ಸಂದರ್ಭದಲ್ಲಿ ನಾವು ಪ್ರಸ್ತುತಪಡಿಸುತ್ತಿರುವುದು ಸೊಗಸಾದ ಸಮುದ್ರವಾಗಿದೆ. ನಿಮಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿಲ್ಲ, ಇದು ಸರಳವಾಗಿದೆ CSS3.
ಮೊದಲನೆಯದು ನೋಡೋಣ ಅನಿಮೇಷನ್.
ತುಂಬಾ ಚೆನ್ನಾಗಿದೆ, ಸರಿ? ಇದನ್ನು ಕಾರ್ಯರೂಪಕ್ಕೆ ತರಲು ನಾವು ಬಿಳಿ ಚುಕ್ಕೆಗಳೊಂದಿಗೆ ಮೂರು ಚಿತ್ರಗಳನ್ನು ಮಾತ್ರ ರಚಿಸಬೇಕು ಮತ್ತು ಆಸ್ತಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಅವುಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ ಎಕೀಫ್ರೇಮ್ಗಳು 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;
}
ಅಗತ್ಯ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಕೂಡ ಸೇರಿಸಲಾಗುತ್ತಿದೆ. ವಿವರವಾದ ವಿವರಣೆಗಳೊಂದಿಗೆ ಪೂರ್ಣ ಕಾರ್ಯವಿಧಾನ, ಜೋಶುವಾ ಜಾನ್ಸನ್ ಅವರ ಸೌಜನ್ಯ, ಅವರ ಬ್ಲಾಗ್ನಲ್ಲಿ ಕಾಣಬಹುದು.
ಹೆಚ್ಚಿನ ಮಾಹಿತಿ - ಸಿಎಸ್ಎಸ್ 3 ಗ್ರೇಡಿಯಂಟ್ ಜನರೇಟರ್, ಸಿಎಸ್ಎಸ್ 3 ಗ್ರೇಡಿಯಂಟ್ ಜನರೇಟರ್
ಮೂಲ - ವಿನ್ಯಾಸ ಶಾಕ್