在我的网站 (www.ricpedrotti.com) 中,我使用 PrettyPhoto 进行幻灯片放映。我想通过用 css3 和最多一点 java 替换它来减轻和加快速度。我可以单独制作幻灯片并通过悬停放大图像,但我无法在节目中自动放大图像。我的问题是:如何合并这两种效果(就像在 PrettyPhoto 中一样)?PS我愿意和热情,但不是很熟练......
非常感谢您的回复。我添加我的代码,希望它不是太原始,并且img上传是正确的。
HTML[胰蛋白酶]
<link rel="stylesheet" href='css/stile.css' type="text/css" /><link href="css/stile.css" rel="stylesheet" type="text/css" /><div class="grow"><div class="container"> ![image1]="1.jpg"> ![image2]="2.jpg"> ![image3]="3.jpg"> ![image4]="4.jpg"> ![image3]="3.jpg"> ![image2]="2.jpg"> ![image1]="1.jpg"> ![image4]="4.jpg"></div>
CSS
.container { position:relative; } .container img { position:absolute; width:350px; height:150px } div { margin:200px 250px; width:600px; height:300px; background:white; transition:all 2s ease ; } .grow:hover { -webkit-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } @-webkit-keyframes xfade { 0% { opacity: 1; } 12.5% { opacity:1; } 16.5% { opacity:0; } 96% { opacity:0; } 100% { opacity:1; } } @keyframes xfade { 0% { opacity: 1; } 12.5% { opacity:1; } 16.5% { opacity:0; } 96% { opacity:0; } 100% { opacity:1; } } .container img:nth-child(8) { -webkit-animation: xfade 48s 0s infinite; animation: xfade 48s 0s infinite; } .container img:nth-child(7) { -webkit-animation: xfade 48s 6s infinite; animation: xfade 48s6s infinite; } .container img:nth-child(6) { -webkit-animation: xfade 48s 12s infinite; animation: xfade 48s 12s infinite; } .container img:nth-child(5) { -webkit-animation: xfade 48s 18s infinite; animation: xfade 48s 18s infinite; } .container img:nth-child(4) {
-webkit-animation:xfade 48s 24s 无限;动画:xfade 48s 24s 无限;} .container img:nth-child(3) { -webkit-animation: xfade 48s 30s 无限;动画:xfade 48s 30s 无限;} .container img:nth-child(2) { -webkit-animation: xfade 48s 36s 无限;动画:xfade 48s 36s 无限;} .container img:nth-child(1) { -webkit-animation: xfade 48s42s 无限;动画:xfade 120s 48s 42s 无限;}