前端练手小项目「JavaScript&&CSS」「05」

最新推荐文章于 2024-06-19 17:23:03 发布

阳树阳树

最新推荐文章于 2024-06-19 17:23:03 发布

阅读量550

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_60789461/article/details/123284886

版权

效果图：

难点：

1.边框问题梳理：

2.flex-direction

属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

flex-direction: column;

3.transition理解

 transition: 
            font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
            /* flex的变化用0.7s的渐变动画，渐变动画的时间函数是贝塞尔曲线，具体参数就和他写的似的 */
            flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
            /* 就是对于background的变化 采用0.2s的渐变动画 */
            background 0.2s;

源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Panels 💪</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
</head>
<body>
  <style>
      html {
          box-sizing: border-box;
          background: #ffc600;
          font-family:'helvetica neue';
          font-size: 20px;
          font-weight: 200;
      }
      body {
          margin: 0;
      }
      *,*:before,*:after {
          box-sizing: inherit;
      }

      .panels {
        min-height: 100vh;
        overflow: hidden;
        display: flex;
      }

      .panel {
          background: #6B0F9C;
          box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
          color: white;
          text-align: center;
          align-items: center;
          transition: 
            font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
            /* flex的变化用0.7s的渐变动画，渐变动画的时间函数是贝塞尔曲线，具体参数就和他写的似的 */
            flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
            /* 就是对于background的变化 采用0.2s的渐变动画 */
            background 0.2s;
          font-size: 20px;
          background-size: cover;
          background-position: center;
          flex: 1;
          justify-content: center;
          align-items: center;
          display: flex;
          /* 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。 */
          flex-direction: column;
      }
      .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
      .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
      .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
      .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
      .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }

      .panel > * {
          margin: 0;
          width: 100%;
          transition:transform 0.5s;
          flex:1 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .panel > *:first-child {transform: translateY(-100%)}
      .panel.open-active > * :first-child {transform:translateY(0)}
      .panel > *:last-child {transform: translateY(100%)}
      .panel.open-active > * :last-child {transform:translateY(0)}

      .panel p{
          text-transform: uppercase;
          font-family: 'Amatic SC',cursive;
          text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
          font-size: 2em;
      }
      .panel p:nth-child(2){
          font-size: 4em;
      }

      .panel.open {
          flex: 5;
          font-size: 40px;
      }

  </style>


  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>

  <script>
  const panels =document.querySelectorAll('.panel');

    function toggleOpen() {
        this.classList.toggle('open');
    }

    function toggleActive(e) {
        if(e.propertyName.includes('flex')){
            this.classList.toggle('open-active');
        }
    }

    panels.forEach(panel => panel.addEventListener('click',toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

  </script>



</body>
</html>