vue实现图片相册悬浮三维3d放大效果代码

代码语言:html

所属分类:悬停

代码描述:vue实现图片相册悬浮三维3d放大效果代码

代码标签: vue 悬浮 放大 三维 相册

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-image: radial-gradient(circle, #fff 30%, #ccc);
      padding: 0 40px;
      font-family: "Source Sans Pro", Helvetica, sans-serif;
      font-weight: 300;
    }
    
    #grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 150px);
      grid-column-gap: 30px;
      grid-row-gap: 30px;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 700px;
    }
    #grid .card {
      background-color: #ccc;
      width: 150px;
      height: 150px;
      transition: all 0.1s ease;
      border-radius: 3px;
      position: relative;
      z-index: 1;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0);
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0