纯css实现视觉差异图片轮换效果
代码语言:html
所属分类:幻灯片
代码描述:纯css实现视觉差异图片轮换效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; width: 100%; min-height: 45rem; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-align: center; background-color: whitesmoke; } .container { width:100%; padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto; max-width:800px } /* Basic appearance stuff ends here */ /* Parallax Horizontal Scroller - by Bree Dulmage, 2020 */ #proparallax { display: block; position: relative; overflow: hidden; min-height: 37.5rem; border: 10px solid black; box-shadow: 0px 8px 10px 8px grey; } #proparallax img { position: absolute; width: 50rem; height: 37.5rem; overflow: hidden; object-fit: cover; } @keyframes parallax_one { /* controls img.one movement */ 0% { /* .imageloaded */ height: 37.5rem; width: 50rem; left: 0rem; opacity: 1; } /* .imagehold runs from 0 to 27.77% */ 27.77% { /* .imageloaded */ width: 50rem; left: 0rem; } 27.78% { /* .imagepreunload */ width: 50rem; left: 0rem; right: 50rem; } 33.33% { /* .imageunloaded */ height: 37.5rem; width: 0rem; left: 0rem; right: 0rem; opacity: 1; } 33.34% { /* imageoff */ opacity: 0; } 94.43% { /* .imageon */ left: 0rem; opacity: 0; } 94.44% { /* .imageinitial */ height: 37.5rem; width: 0rem; left: 50rem; opacity: 1; } 100% { /* .imageloaded */ width: 50rem; left: 0rem; opacity: 1; } } @keyframes parallax_two { /* controls img.two movement */ 0% { /* .imageoff */ opacity: 0; } 27.77% { /* .imageon */ left: 0rem; opacity: 0; } 27.78% { /* .imageinitial */ width: 0rem; height: 37.5rem; left: 50rem; opacity: 1; } 33.33% { /* .imageloaded */ width: 50rem; left: 0rem; } /* .imagehold runs from 33.34% - 61.10% */ 61.10%{ /* .imageloaded */ width: 50rem; left: 0rem; } 61.11% { /* .imagepreunload */ .........完整代码请登录后点击上方下载按钮下载查看
网友评论0