css3 文字卡片折叠效果

主要代码说明

包裹字体的卡片必须display: inline-block; display: flex;
transform: skewY(-20deg); /扭曲属性/
nth:-child(odd)odd代表奇数 even代表偶数


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>

  <style>
    *{
      
      margin: 0;
      padding: 0;
    }
    html,body{
      
      width: 100%;
      height: 100%;
    }
    body{
      
      background-color: #ff90b3;
    }
    .text{
      
      width: 600px;
      margin: 250px auto 100px;
      display: inline-block;
      transition: .5s;
      display: flex;
    }
    .text span{
      
      background-color: #fff;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
      color: #a0a0a0;
      font-size: 40px;
      transition: 0.3s;
    }

    .text:hover span:nth-child(odd){
      
      transform: skewY(-20deg); /*扭曲*/
      color: #b5b5b5;
      box-shadow: 0 60px 20px rgba(0, 0, 0, 0.1);
    }
    .text:hover span:nth-child(even){
      
      transform: skewY(20deg); /*扭曲*/
      color: #b5b5b5;
      box-shadow: 0 60px 20px rgba(0, 0, 0, 0.1);
    }
  style>
head>
<body>
    <section class="text">
      <span>span>
      <span>span>
      <span>span>
      <span>span>
      <span>span>
    section>
body>
html>

css3 文字卡片折叠效果_第1张图片

你可能感兴趣的:(css,css,css3)