照片手风琴悬浮显示效果
代码语言:html
所属分类:选项卡
代码描述:照片手风琴悬浮显示效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { width: 800px; height: 400px; } .items-row { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; width: 100%; height: 100%; } .item { margin: 2px; border: 1px solid #dddddd; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-flex: 1 1 20%; -ms-flex: 1 1 20%; flex: 1 1 20%; transition: flex 0.4s ease; } .item:hover { -webkit-flex: 0.000000001 0.00000001 400px; -ms-flex: 0.000000001 0.00000001 400px; flex: 0.000000001 0.00000001 400px; background-size: 100% 100% } .img1 { background-image: url('http://repo.bfw.wiki/bfwrepo/image/5d653b1fc8bc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90'); background-repeat: no-repeat; } .img2 { background-image: url('http://repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process.........完整代码请登录后点击上方下载按钮下载查看
网友评论0