V7.0版本 怎么实现页面加载时图片自动滑进效果

http://www.bcpharm.com/

参考这个网页

观美善怀 发表于 2021-7-5 17:14
http://www.bcpharm.com/

参考这个网页

这个需要写CSS实现，具体的做法的话，参考您提供的网页就可以了：

CSS代码：

1. .image_animation{
   
2.     animation:fadeInLeft 5s;
   
3.         -webkit-animation:fadeInLeft 5s; /* Safari and Chrome */
   
4.     -webkit-animation-duration: 1s;
   
5.     animation-duration: 1s;
   
6.     -webkit-animation-fill-mode: both;
   
7.     animation-fill-mode: both;
   
8. }
   
9. 
   
10. @keyframes fadeInLeft
    
11. {
    
12.         0% {
    
13.         opacity: 0;
    
14.         -webkit-transform: translate3d(-100%,0,0);
    
15.         -ms-transform: translate3d(-100%,0,0);
    
16.         transform: translate3d(-100%,0,0);
    
17.     }
    
18.     100% {
    
19.         opacity: 1;
    
20.         -webkit-transform: none;
    
21.         -ms-transform: none;
    
22.         transform: none;
    
23.     }
    
24. }
    
25. 
    
26. @-webkit-keyframes fadeInLeft /* Safari and Chrome */
    
27. {
    
28.     0% {
    
29.         opacity: 0;
    
30.         -webkit-transform: translate3d(-100%,0,0);
    
31.         -ms-transform: translate3d(-100%,0,0);
    
32.         transform: translate3d(-100%,0,0);
    
33.     }
    
34.     100% {
    
35.         opacity: 1;
    
36.         -webkit-transform: none;
    
37.         -ms-transform: none;
    
38.         transform: none;
    
39.     }
    
40. }

复制代码

1.把写好的CSS上传到这里；

2.然后给图片设置上我们写好的CSS类名image_animation就好了；

运行效果：

工程文件：

为什么同时用两个css文件，不同的类名，也只能识别加载一个

观美善怀 发表于 2021-7-6 16:22
为什么同时用两个css文件，不同的类名，也只能识别加载一个

因为CSS中的动画效果用了相同的名字；

改个名字就好啦~

记得设置最佳答案哟，良好的社区环境需要大家共同维护~

高手的世界不懂

Aa金砂 发表于 2021-7-9 20:20
高手的世界不懂

简单的学一下前端的知识就好啦~加油~

哪里网站能学有基础前端知识

夏雪冬阳 发表于 2021-7-11 12:33
哪里网站能学有基础前端知识

基础入门的话，你可以看一下菜鸟教程或者w3school，个人意见，仅供参考哟~
菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)
w3school 在线教程
你可以先学HTML，然后CSS，最后学习JavaScript
还要一些其他的学习网站，你可以百度一下呢~