本帖最后由 David.Zhong 于 2021-7-5 19:50 编辑
这个需要写CSS实现,具体的做法的话,参考您提供的网页就可以了:
CSS代码:
- .image_animation{
- animation:fadeInLeft 5s;
- -webkit-animation:fadeInLeft 5s; /* Safari and Chrome */
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- }
- @keyframes fadeInLeft
- {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-100%,0,0);
- -ms-transform: translate3d(-100%,0,0);
- transform: translate3d(-100%,0,0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes fadeInLeft /* Safari and Chrome */
- {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-100%,0,0);
- -ms-transform: translate3d(-100%,0,0);
- transform: translate3d(-100%,0,0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
- }
- }
复制代码
1.把写好的CSS上传到这里;
2.然后给图片设置上我们写好的CSS类名image_animation就好了;
运行效果:
工程文件:
|