落日斜阳余晖视觉差异滚动效果
代码语言:html
所属分类:菜单导航
代码描述:落日斜阳余晖视觉差异滚动效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* PARALLAX */ .body { margin: -5px; } .keyart, .keyart_layer { height: 1000px; } #parallax { display: block; } .keyart { position: relative; z-index: 10; } .keyart_layer { background-position: bottom center; background-size: auto 1038px; background-repeat: repeat-x; width: 100%; position: absolute; } .keyart_layer.parallax { position: fixed; } #keyart-0 { background-image: url("http://repo.bfw.wiki/bfwrepo/image/5effdc9e168ce.png"); background-color: #ffaf1b; } #keyart-1 { background-image: url("http://repo.bfw.wiki/bfwrepo/image/5effdd5414cdd.png"); } #keyart-2 { background-image: url("http://repo.bfw.wiki/bfwrepo/image/5effde930445e.png"); } #keyart-3 { background-image: url("http://repo.bfw.wiki/bfwrepo/image/5effde930445e.png"); } #keyart-4 { background-image: url("http://repo.bfw.wiki/bfwrepo/image/5effdea7e9b29.png"); } #keyart-5 { background-image: url("http://repo.bfw.wiki/bfwrepo/image/5effdebbd7b55.png"); } #keyart-6 { background-image: url("http://repo.bfw.wiki/bfwrepo/image/5effdecfb14c7.png"); } #keyart-7 { background-image: url("http://repo.bfw.wiki/bfwrepo/image/5effdee0c7132.png"); } #keyart-8 { background-image: url("http://repo.bfw.wiki/bfwrepo/image/5effdef18efbf.png"); } #keyart-scrim { background-color: #ffaf00; opacity: 0; } </style> </head> <body translate="no"> <div class="keyart" id="parallax"> <div class="keyar.........完整代码请登录后点击上方下载按钮下载查看
网友评论0