Advertisement

200.3D文章列表展示

阅读量：

Juno Solves 39-Year Old Mystery of Jupiter Lightning, NASA to Host Live Discussion on New Mars Science Results, 20 Years of Earth Data Now at Your Fingertips, Astronomers Spot a Distant and Lonely Neutron Star, Astronauts Safely in Orbit Following Launch to International Space Station, As Solar Wind Blows, Our Heliosphere Balloons, Tiny Asteroid Discovered Saturday Disintegrates Hours Later Over Southern Africa

效果 (源码网盘地址在最后)

源码

index.html

复制代码 
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>3D文章列表展示</title>
      <link href="./style.css" rel="stylesheet" />
    </head>
    <body>
      <div class="container">
      
    <div class="col">
      
      <div class="card-container">
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="card">
          <h4>Juno Solves 39-Year Old Mystery of Jupiter Lightning</h4>
          <span class"chev">&rsaquo;</span>
        </div>
      </div>
      
      <div class="card-container">
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="card">
          <h4>Engineers Solve Excessive Heat Removal from NASA’s Webb Telescope</h4>
          <span class"chev">&rsaquo;</span>
        </div>
      </div>
      
      <div class="card-container">
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="card">
          <h4>NASA Finds Ancient Organic Material, Mysterious Methane on Mars</h4>
          <span class"chev">&rsaquo;</span>
        </div>
      </div>
      
    </div>
    
    <div class="col">
      
      <div class="card-container">
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="card">
          <h4>NASA to Host Live Discussion on New Mars Science Results</h4>
          <span class"chev">&rsaquo;</span>
        </div>
      </div>
      
      <div class="card-container">
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="card">
          <h4>20 Years of Earth Data Now at Your Fingertips</h4>
          <span class"chev">&rsaquo;</span>
        </div>
      </div>
      
      <div class="card-container">
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="card">
           <h4>Astronomers Spot a Distant and Lonely Neutron Star</h4>
          <span class"chev">&rsaquo;</span>
        </div>
      </div>
      
    </div>
    
    <div class="col">
      
      <div class="card-container">
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="card">
          <h4>Astronauts Safely in Orbit Following Launch to International Space Station</h4>
          <span class"chev">&rsaquo;</span>
        </div>
      </div>
      
      <div class="card-container">
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="card">
          <h4>As Solar Wind Blows, Our Heliosphere Balloons</h4>
          <span class"chev">&rsaquo;</span>
        </div>
      </div>
      
      <div class="card-container">
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="overlay"></div>
        <div class="card">
          <h4>Tiny Asteroid Discovered Saturday Disintegrates Hours Later Over Southern Africa</h4>
          <span class"chev">&rsaquo;</span>
        </div>
      </div> 
      
    </div>
    
      </div>
    </body>
    </html>

css

复制代码 
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    
    * {
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      transform-style: preserve-3d;
      margin: 0;
      padding: 0;
    }
    
    *:focus {
      outline: none !important;
    }
    
    body {
      margin: 0;
      padding: 0;
      background: #131313;
      color: #f5f5f5;
      font-family: 'Fira Sans';
      text-align: left;
      overflow-x: hidden;
      overflow-y: hidden;
    }
    
    .container {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-flow: row;
      perspective: 1000px;
      perspective-origin: center;
    }
    
    .col {
      height: 100%;
      transition: transform 600ms cubic-bezier(0.39, 0.575, 0.565, 1),
    opacity 300ms ease;
      transform: translateZ(34px) scale(0.98);
      flex: 0 0 33.3333%;
      position: relative;
    }
    
    .col:nth-of-type(1) {
      transform: rotateY(5deg) translateZ(34px) scale(0.98);
    }
    
    .col:nth-of-type(3) {
      transform: rotateY(-5deg) translateZ(34px) scale(0.98);
    }
    
    .col:hover,
    .col:focus {
      transform: translateZ(34px);
      transition: transform 300ms cubic-bezier(0.39, 0.575, 0.565, 1),
    opacity 300ms ease;
    }
    
    .card-container {
      position: relative;
      width: calc(100% - 25px);
      height: calc(33.3% - 25px);
      margin: 17px;
      padding: 8px;
      text-align: center;
      opacity: 0.89;
    }
    
    .card-container:hover,
    .card-container:focus {
      opacity: 1;
    }
    
    .overlay {
      display: block;
      position: absolute;
      cursor: pointer;
      width: 50%;
      height: 50%;
      z-index: 1;
      transform: translateZ(34px);
    }
    
    .overlay:nth-of-type(1) {
      left: 0;
      top: 0;
    }
    
    .overlay:nth-of-type(2) {
      right: 0;
      top: 0;
    }
    
    .overlay:nth-of-type(3) {
      bottom: 0;
      right: 0;
    }
    
    .overlay:nth-of-type(4) {
      bottom: 0;
      left: 0;
    }
    
    .overlay:nth-of-type(1):hover ~ .card,
    .overlay:nth-of-type(1):focus ~ .card {
      transform-origin: right top;
      transform: rotateX(3deg) rotateY(-3deg) translateZ(0);
    }
    
    .overlay:nth-of-type(2):hover ~ .card,
    .overlay:nth-of-type(2):focus ~ .card {
      transform-origin: left top;
      transform: rotateX(3deg) rotateY(3deg) translateZ(0);
    }
    
    .overlay:nth-of-type(3):hover ~ .card,
    .overlay:nth-of-type(3):focus ~ .card {
      transform-origin: left bottom;
      transform: rotateX(-3deg) rotateY(3deg) translateZ(0);
    }
    
    .overlay:nth-of-type(4):hover ~ .card,
    .overlay:nth-of-type(4):focus ~ .card {
      transform-origin: right bottom;
      transform: rotateX(-3deg) rotateY(-3deg) translateZ(0);
    }
    
    .card {
      border-radius: 5px;
      height: 100%;
      transition: all 300ms ease-out;
      align-items: center;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      position: relative;
      z-index: 0;
      opacity: 0.89;
      padding: 13px 21px;
    }
    
    .card:before,
    .card:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0.21;
      transition: transform 300ms ease;
      transform: scale(0.98);
    }
    
    .card:before {
      background-size: cover;
      background-position: 50% 50%;
    }
    
    .card-container:hover .card:before,
    .card-container:hover .card:after,
    .card-container:focus .card:before,
    .card-container:focus .card:after {
      opacity: 0.34;
      transform: scale(1);
    }
    
    .col:nth-of-type(1) .card-container:nth-of-type(1) .card:before {
      background-image: url('./01.jpg');
    }
    
    .col:nth-of-type(2) .card-container:nth-of-type(1) .card:before {
      background-image: url('./02.jpg');
    }
    
    .col:nth-of-type(3) .card-container:nth-of-type(1) .card:before {
      background-image: url('./03.jpg');
    }
    
    .col:nth-of-type(1) .card-container:nth-of-type(2) .card:before {
      background-image: url('./04.jpg');
    }
    
    .col:nth-of-type(2) .card-container:nth-of-type(2) .card:before {
      background-image: url('./05.png');
    }
    
    .col:nth-of-type(3) .card-container:nth-of-type(2) .card:before {
      background-image: url('./06.jpg');
    }
    
    .col:nth-of-type(1) .card-container:nth-of-type(3) .card:before {
      background-image: url('./07.jpg');
    }
    
    .col:nth-of-type(2) .card-container:nth-of-type(3) .card:before {
      background-image: url('./09.jpg');
    }
    
    .col:nth-of-type(3) .card-container:nth-of-type(3) .card:before {
      background-image: url('./08.jpg');
    }
    
    .card:after {
      background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.89) 100%
      );
    }
    
    h4 {
      text-align: left;
      font-size: 18px;
      font-weight: 400;
      transform: translateY(5px);
      transition: transform 450ms cubic-bezier(0.39, 0.575, 0.565, 1);
      max-width: 320px;
      outline: 1px solid transparent;
    }
    
    .overlay:hover ~ .card h4,
    .overlay:focus ~ .card h4 {
      transform: translateZ(144px);
    }
    
    .card > span {
      font-size: 34px;
      opacity: 0;
      transform: translateX(-3px);
      transition: all 300ms ease;
    }
    
    .card-container:hover > .card > h4,
    .card-container:focus > .card > h4 {
      transform: translateY(-13px);
    }
    
    .card-container:hover > .card > span,
    .card-container:focus > .card > span {
      opacity: 1;
      transform: translateX(3px);
      animation: slideRight 300ms ease;
    }
    
    @media (max-width: 768px) {
      body {
    overflow-y: scroll;
      }
      h4 {
    font-size: 17px;
      }
    }
    
    @media (max-width: 540px) {
      .container {
    flex-flow: column;
    perspective: none;
      }
    
      .col:nth-of-type(1),
      .col:nth-of-type(2),
      .col:nth-of-type(3),
      .col:hover {
    transform: none;
      }
    
      h4 {
    padding-bottom: 8px;
    font-size: 18px;
      }
    
      .card > span {
    display: none;
      }
    }
    
    @media (max-height: 599px) {
      .card > span {
    display: none;
      }
    }
    
    @media (max-width: 860px) and (max-height: 540px) {
      h4 {
    font-size: 14px;
      }
    }
    
    @media (max-width: 620px) and (max-height: 540px) {
      h4 {
    font-size: 13px;
      }
    }

源码地址

链接：https://pan.baidu.com/s/1nV5DCXsS8G3fTBS_wAGhXQ
提取码：5g57

全部评论 (0)

还没有任何评论哟~

相关文章推荐

200.3D文章列表展示

效果源码网盘地址在最后 源码 index.html <!DOCTYPEhtml <htmllang=en <head <metacharset=UTF8 <metahttpequiv=XUACompa...

200.3D文章列表展示

效果源码网盘地址在最后 源码 <!DOCTYPEhtml <htmllang=en <head <metacharset=UTF8 <metahttpequiv=XUACompatibleconten...

【ajax实战06】文章列表展示

目标：获取文章列表并展示 准备查询参数对象 获取文章列表数据 展示到指定的标签结构中 constsearchUrl= status:'', channelid:'', page:1, perpage:...

博客项目——用户文章列表展示

服务器端添加路由 home路由文件（home.js） 这里home是一级路由，index.js（用户文章界面展示），article.js（文章详情）是二级路由 //引入express服务器 const...

web前端 | 博客（十一）文章列表展示

文章列表展示 找到文章列表请求页面的路由请求处理函数，先将所有数据查询出来，并展示在页面当中，之后再实现分页功能。 在route/admin/下的article.js中，将文章集合的构造函数导入到当前...

用Django全栈开发——18. 首页文章列表展示

大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，我们将打磨首页的文章列表展示问题。 上一节，我们把文章详情页弄好了，这一章节，...

Vue 列表展示

用vfor遍历数组 <divid=app <ul <livfor=iteminmoviesitem</li </ul </div 引入vue: <scriptsrc=./vue.min.js</scr...

html商品列表展示,商品列表展示效果

Html Css Js 迷你犬小型犬幼犬膈肉稼 350g7kg HK859.00 MadefromCanada 立即购买 加入购物车 收藏 迷你犬小型犬幼犬膈肉稼 350g7kg HK859.00 M...

Vue2文章展示、产品展示Demo

目录 功能描述 首页： 文章列表页： 文章详情页： 产品列表页： 产品详情页： 深色浅色主题设置 功能描述 以下是对Vue2首页、文章列表页、文章详情页、产品列表页、产品详情页功能的描述： 1. 首页...

02-Vue列表展示

<!DOCTYPEhtml <htmllang=en <head <metacharset=UTF8 <metahttpequiv=XUACompatiblecontent=IE=edge <meta...