css布局实现悬浮图片放大差异视觉效果代码
代码语言:html
所属分类:悬停
代码描述:css布局实现悬浮图片放大差异视觉效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @charset "utf-8"; body{background-color: #1F1F1F;overflow: hidden} .container { height: 100vh; width: 100vw; max-height: 800px; max-width: 1280px; min-height: 600px; min-width: 1000px; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; } .border { height: 369px; width: 290px; background: transparent; border-radius: 10px; transition: border 1s; position: relative; } .border:hover { border: 1px solid #fff; } .card { height: 379px; width: 300px; background: #808080; border-radius: 10px; transition: background 0.8s; overflow: hidden; background: #000; box-shadow: 0 70px 63px -60px #000; display: flex; justify-content: center; align-items: center; position: relative; } .card0 { background: url("//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_600,/quality,q_90") center center no-repeat; background-size: 300px; } .card0:hover { background: url("//repo.bfw.wiki/bfwrepo/image/5fc8.........完整代码请登录后点击上方下载按钮下载查看
网友评论0