堆栈内存溢出
  简体   繁体   English

在css中并排对齐项目

[英]Aligning items side by side in css

 原文  2022-06-04 15:47:22  7   4    javascript/ html/ jquery/ css/ animation

问题描述

I have the code:我有代码： 

 $(window).scroll(function() { $('.container p').each(function() { var scrollTop = $(window).scrollTop(), elementOffset = $(this).offset().top, distance = (elementOffset - scrollTop), windowHeight = $(window).height(), breakPoint = windowHeight * 0.9; if (distance > breakPoint) { $(this).addClass("more-padding"); } if (distance < breakPoint) { $(this).removeClass("more-padding"); } }); });
 .wrap { position: relative; font-size: 18px; color: black; z-index: -1; } h1 { font-size: 2em; text-align: center; margin: 20px 0 40px; padding: 0; } .container { background: transparent; right: 100%; margin: 0 auto; overflow: auto; padding: 2%; } .right-content, .left-content { float: left; display: block; width: 40%; padding: 1% 2%; } .left-content { border-right: 5px dotted #666; text-align: right; } .left-content p { margin: 150px 0 0; } .right-content p { margin: 80px 0 150px; } .container p { -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7 ease-in-out; -ms-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .left-content .more-padding { padding-right: 100px; } .right-content .more-padding { padding-left: 100px; } .icon-wrapper { display: flex; width: 200px; height: 200px; background: orange; padding: 2.9em; margin: 2em auto; border-radius: 50%; overflow: hidden; } h1 { text-align: center; } .cls-1 { fill: #fff; } .cls-2 { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; } .icon-wrapper #air { stroke-dashoffset: 66; stroke-dasharray: 33; transition: all 2s ease; } .icon-wrapper:hover #air { stroke-dashoffset: 0; } .icon-wrapper #ball { transition: all 1.5s ease; transform: rotate(0); transform-origin: center; } .icon-wrapper:hover #ball { transform: rotate(360deg); }
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&amp;amp" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin,latin-ext" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <div class="wrap"> <div class="container"> <h1>Hobbies</h1> <div class="left-content"> <p>Content 01</p> <p>Content 02</p> <p>Content 03</p> <p>Content 04</p> <p>Content 05</p> <p>Content 06</p> <p>Content 07</p> <p>Content 08</p> <p>Content 09</p> <p>Content 10</p> </div> <div class="right-content"> <p>Content 01</p> <p>Content 02</p> <p>Content 03</p> <p>Content 04</p> <p>Content 05</p> <p>Content 06</p> <p>Content 07</p> <p>Content 08</p> <p>Content 09</p> <p>Content 10</p> </div> </div> </div> <div class="icon-wrapper"> <svg id="netball-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <title>Netball</title> <path id="ball" class="cls-1" d="M70.44,32.78A32,32,0,0,0,55.28,24.3l-.37-.08A32.57,32.57,0,0,0,42.09,24l-.32,0A32,32,0,1,0,70.44,78a32.26,32.26,0,0,0,5.47-7.3l.27-.5h0A32.24,32.24,0,0,0,70.44,32.78Zm-1.77,1.77A29.19,29.19,0,0,1,77,51.28a11,11,0,0,1-5.38,5.39,47.16,47.16,0,0,0-.71-12.11,30.91,30.91,0,0,0-4.55-11.45c-.35-.5-.71-1-1.08-1.48A31.27,31.27,0,0,1,68.67,34.55ZM54.54,26.69c7.42,3,12.1,9.14,13.91,18.33A44.25,44.25,0,0,1,69,57.52a19.92,19.92,0,0,1-5,.38A95,95,0,0,0,59.5,41.82a43.19,43.19,0,0,0-6.65-11.93,19,19,0,0,0-4.43-4A30,30,0,0,1,54.54,26.69Zm-12.35-.24c7.23.33,12.13,9,15,16.27a91.23,91.23,0,0,1,4.31,15,56.07,56.07,0,0,1-13-3.78l-.76-.3c-.8-11.8-3.87-19.55-9.12-23a11.46,11.46,0,0,0-3.74-1.65A29.24,29.24,0,0,1,42.19,26.45ZM27,34.55a29.23,29.23,0,0,1,4-3.32,8,8,0,0,1,1.31-.1,8.84,8.84,0,0,1,4.67,1.32,36.37,36.37,0,0,0-8.6,5.09A32.06,32.06,0,0,0,18.9,49.75,29.53,29.53,0,0,1,27,34.55Zm-5.5,34.08a29.12,29.12,0,0,1-2.67-8A29.16,29.16,0,0,1,29.86,39.52a33.11,33.11,0,0,1,9.28-5.24A16.1,16.1,0,0,1,41.7,38.1,75.82,75.82,0,0,0,29,50.24a34.87,34.87,0,0,0-6.94,12.68A18.6,18.6,0,0,0,21.47,68.63Zm8.63,3.09c0,.23-.08.49-.13.79l-.06.33A12.59,12.59,0,0,0,30,78.9a30.79,30.79,0,0,1-3-2.66l-.62-.62C22,69.06,23.54,61,31,51.82A74.15,74.15,0,0,1,42.72,40.47a48.19,48.19,0,0,1,2.5,13.19,19.72,19.72,0,0,0-5,2.94c-3,2.35-7.1,6.83-10.12,15ZM47.82,84.86a29.67,29.67,0,0,1-13.41-3.21,8.54,8.54,0,0,1-2.17-7.48,67.13,67.13,0,0,0,8.58,4.07,44.67,44.67,0,0,0,15.47,3.22,26.2,26.2,0,0,0,5.72-.6c.4-.09.8-.19,1.19-.3A29.24,29.24,0,0,1,47.82,84.86Zm25.9-15.37a19.06,19.06,0,0,1-12.25,8.92,23.25,23.25,0,0,1-5.18.55c-10.12,0-20.21-5.42-23.5-7.37a38.69,38.69,0,0,1,2.3-4.89,96.31,96.31,0,0,0,17.6,4.59,43.78,43.78,0,0,0,14.67.1,19.35,19.35,0,0,0,6.73-2.6C74,69,73.84,69.26,73.72,69.49Zm-6.84-.56a41.32,41.32,0,0,1-13.81-.11,94.1,94.1,0,0,1-16.64-4.3,26.25,26.25,0,0,1,5.33-5.92,16.32,16.32,0,0,1,4.83-2.77l.78.31.19.07c2.68,1.08,9,3.61,15.28,4.12s11.31-1.13,14.45-4.89a29.3,29.3,0,0,1-1,7.61C74.47,66.07,71.3,68,66.88,68.93Z" /> <g id="air"> <line class="cls-2" x1="68.86" y1="27.95" x2="86.42" y2="10.4" /> <line class="cls-2" x1="73.42" y1="31.34" x2="85.74" y2="19.02" /> <line class="cls-2" x1="76.68" y1="36.31" x2="82.13" y2="30.86" /> </g> </svg> </div> <h1>Netball Icon Animation</h1>

When you run the code and scroll down, you will see a sports logo animation.当您运行代码并向下滚动时，您将看到一个体育标志动画。 I would like that sports logo to be displayed at this position:我希望该运动标志显示在此位置：

在此处输入图像描述

How can I achieve this?我怎样才能做到这一点？ I would like the logo to be displayed on the side, so how can I edit the CSS of the logo animation accordingly?我希望徽标显示在侧面，那么如何相应地编辑徽标动画的 CSS？

Any suggestions would greatly help.任何建议都会有很大帮助。 Thanks.谢谢。

4 个解决方案

解决方案1
 2  2022-06-04 15:55:07

 $(window).scroll(function() { $('.container p').each(function() { var scrollTop = $(window).scrollTop(), elementOffset = $(this).offset().top, distance = (elementOffset - scrollTop), windowHeight = $(window).height(), breakPoint = windowHeight * 0.9; if (distance > breakPoint) { $(this).addClass("more-padding"); } if (distance < breakPoint) { $(this).removeClass("more-padding"); } }); });
 .addThisClass { display:flex; } .wrap { position: relative; font-size: 18px; color: black; z-index: -1; width:70vw; } h1 { font-size: 2em; text-align: center; margin: 20px 0 40px; padding: 0; } .container { background: transparent; right: 100%; margin: 0 auto; overflow: auto; padding: 2%; } .right-content, .left-content { float: left; display: block; width: 40%; padding: 1% 2%; } .left-content { border-right: 5px dotted #666; text-align: right; } .left-content p { margin: 150px 0 0; } .right-content p { margin: 80px 0 150px; } .container p { -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7 ease-in-out; -ms-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .left-content .more-padding { padding-right: 100px; } .right-content .more-padding { padding-left: 100px; } .icon-wrapper { display: flex; height: 30vw; width:30vw; background: orange; padding: 2.9em; margin: 2em auto; border-radius: 50%; overflow: hidden; } h1 { text-align: center; } .cls-1 { fill: #fff; } .cls-2 { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; } .icon-wrapper #air { stroke-dashoffset: 66; stroke-dasharray: 33; transition: all 2s ease; } .icon-wrapper:hover #air { stroke-dashoffset: 0; } .icon-wrapper #ball { transition: all 1.5s ease; transform: rotate(0); transform-origin: center; } .icon-wrapper:hover #ball { transform: rotate(360deg); }
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&amp;amp" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin,latin-ext" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <div class= "addThisClass"> <div class="wrap"> <div class="container"> <h1>Hobbies</h1> <div class="left-content"> <p>Content 01</p> <p>Content 02</p> <p>Content 03</p> <p>Content 04</p> <p>Content 05</p> <p>Content 06</p> <p>Content 07</p> <p>Content 08</p> <p>Content 09</p> <p>Content 10</p> </div> <div class="right-content"> <p>Content 01</p> <p>Content 02</p> <p>Content 03</p> <p>Content 04</p> <p>Content 05</p> <p>Content 06</p> <p>Content 07</p> <p>Content 08</p> <p>Content 09</p> <p>Content 10</p> </div> </div> </div> <div class="icon-wrapper"> <svg id="netball-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <title>Netball</title> <path id="ball" class="cls-1" d="M70.44,32.78A32,32,0,0,0,55.28,24.3l-.37-.08A32.57,32.57,0,0,0,42.09,24l-.32,0A32,32,0,1,0,70.44,78a32.26,32.26,0,0,0,5.47-7.3l.27-.5h0A32.24,32.24,0,0,0,70.44,32.78Zm-1.77,1.77A29.19,29.19,0,0,1,77,51.28a11,11,0,0,1-5.38,5.39,47.16,47.16,0,0,0-.71-12.11,30.91,30.91,0,0,0-4.55-11.45c-.35-.5-.71-1-1.08-1.48A31.27,31.27,0,0,1,68.67,34.55ZM54.54,26.69c7.42,3,12.1,9.14,13.91,18.33A44.25,44.25,0,0,1,69,57.52a19.92,19.92,0,0,1-5,.38A95,95,0,0,0,59.5,41.82a43.19,43.19,0,0,0-6.65-11.93,19,19,0,0,0-4.43-4A30,30,0,0,1,54.54,26.69Zm-12.35-.24c7.23.33,12.13,9,15,16.27a91.23,91.23,0,0,1,4.31,15,56.07,56.07,0,0,1-13-3.78l-.76-.3c-.8-11.8-3.87-19.55-9.12-23a11.46,11.46,0,0,0-3.74-1.65A29.24,29.24,0,0,1,42.19,26.45ZM27,34.55a29.23,29.23,0,0,1,4-3.32,8,8,0,0,1,1.31-.1,8.84,8.84,0,0,1,4.67,1.32,36.37,36.37,0,0,0-8.6,5.09A32.06,32.06,0,0,0,18.9,49.75,29.53,29.53,0,0,1,27,34.55Zm-5.5,34.08a29.12,29.12,0,0,1-2.67-8A29.16,29.16,0,0,1,29.86,39.52a33.11,33.11,0,0,1,9.28-5.24A16.1,16.1,0,0,1,41.7,38.1,75.82,75.82,0,0,0,29,50.24a34.87,34.87,0,0,0-6.94,12.68A18.6,18.6,0,0,0,21.47,68.63Zm8.63,3.09c0,.23-.08.49-.13.79l-.06.33A12.59,12.59,0,0,0,30,78.9a30.79,30.79,0,0,1-3-2.66l-.62-.62C22,69.06,23.54,61,31,51.82A74.15,74.15,0,0,1,42.72,40.47a48.19,48.19,0,0,1,2.5,13.19,19.72,19.72,0,0,0-5,2.94c-3,2.35-7.1,6.83-10.12,15ZM47.82,84.86a29.67,29.67,0,0,1-13.41-3.21,8.54,8.54,0,0,1-2.17-7.48,67.13,67.13,0,0,0,8.58,4.07,44.67,44.67,0,0,0,15.47,3.22,26.2,26.2,0,0,0,5.72-.6c.4-.09.8-.19,1.19-.3A29.24,29.24,0,0,1,47.82,84.86Zm25.9-15.37a19.06,19.06,0,0,1-12.25,8.92,23.25,23.25,0,0,1-5.18.55c-10.12,0-20.21-5.42-23.5-7.37a38.69,38.69,0,0,1,2.3-4.89,96.31,96.31,0,0,0,17.6,4.59,43.78,43.78,0,0,0,14.67.1,19.35,19.35,0,0,0,6.73-2.6C74,69,73.84,69.26,73.72,69.49Zm-6.84-.56a41.32,41.32,0,0,1-13.81-.11,94.1,94.1,0,0,1-16.64-4.3,26.25,26.25,0,0,1,5.33-5.92,16.32,16.32,0,0,1,4.83-2.77l.78.31.19.07c2.68,1.08,9,3.61,15.28,4.12s11.31-1.13,14.45-4.89a29.3,29.3,0,0,1-1,7.61C74.47,66.07,71.3,68,66.88,68.93Z" /> <g id="air"> <line class="cls-2" x1="68.86" y1="27.95" x2="86.42" y2="10.4" /> <line class="cls-2" x1="73.42" y1="31.34" x2="85.74" y2="19.02" /> <line class="cls-2" x1="76.68" y1="36.31" x2="82.13" y2="30.86" /> </g> </svg> </div> </div> <h1>Netball Icon Animation</h1>

解决方案2
 2  2022-06-04 16:05:59

You can use position: absolute property with top and right properties to tell your icon-wrapper where to position relative to its parent.您可以使用position: absolute属性和top和right属性来告诉您的icon-wrapper的位置。 in this case your page body .在这种情况下，您的页面body 。

.icon-wrapper{
    /* The rest of your code*/
    position: absolute;
    top: 150px;
    right: 150px;
}

Also, to make this responsive you could use % values insted of px so it doesn't break on different screen sizes.此外，为了使这个响应你可以使用px的%值，这样它就不会在不同的屏幕尺寸上中断。

解决方案3
 1  2022-06-04 16:03:56

If you dont mind that the ball will be fixed in the screen you can add:如果您不介意球将固定在屏幕上，您可以添加：

.icon-wrapper {
  display: flex;
  width: 200px;
  height: 200px;
  background: orange;
  padding: 2.9em;
  margin: 2em auto;
  border-radius: 50%;
  overflow: hidden;  

  /* ADDED HERE */
  position: fixed;
  right: 50px;
  top: 20px;
}

Other solution is to float the hobbies to the left, so that is frees space in the right:其他解决方案是将爱好浮动到左侧，这样可以释放右侧的空间：

.wrap {
  position: relative;
  font-size: 18px;
  color: black;
  z-index: -1;

  /* ADDED HERE */
  float: left;
  width: 60%; 
}

解决方案4
 1  2022-06-04 16:08:03

I see your problem and solve it, you just add .right-content, .left-content width 45% and add icon-wrapper class margin: 0 auto;我看到你的问题并解决它，你只需添加.right-content, .left-content宽度 45% 并添加icon-wrapper类margin: 0 auto; then it will work as you maybe want, hope it will help you :)然后它会按您的意愿工作，希望对您有所帮助:)

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&amp;amp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<div class="wrap">
  <div class="container">
    <h1>Hobbies</h1>
    <div class="left-content">
      <p>Content 01</p>
      <p>Content 02</p>
      <p>Content 03</p>
      <p>Content 04</p>
      <p>Content 05</p>
      <p>Content 06</p>
      <p>Content 07</p>
      <p>Content 08</p>
      <p>Content 09</p>
      <p>Content 10</p>
    </div>
    <div class="right-content">
      <p>Content 01</p>
      <p>Content 02</p>
      <p>Content 03</p>
      <p>Content 04</p>
      <p>Content 05</p>
      <p>Content 06</p>
      <p>Content 07</p>
      <p>Content 08</p>
      <p>Content 09</p>
      <p>Content 10</p>
    </div>
  </div>
</div>

<div class="icon-wrapper">
  <svg id="netball-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <title>Netball</title>
      <path id="ball" class="cls-1" d="M70.44,32.78A32,32,0,0,0,55.28,24.3l-.37-.08A32.57,32.57,0,0,0,42.09,24l-.32,0A32,32,0,1,0,70.44,78a32.26,32.26,0,0,0,5.47-7.3l.27-.5h0A32.24,32.24,0,0,0,70.44,32.78Zm-1.77,1.77A29.19,29.19,0,0,1,77,51.28a11,11,0,0,1-5.38,5.39,47.16,47.16,0,0,0-.71-12.11,30.91,30.91,0,0,0-4.55-11.45c-.35-.5-.71-1-1.08-1.48A31.27,31.27,0,0,1,68.67,34.55ZM54.54,26.69c7.42,3,12.1,9.14,13.91,18.33A44.25,44.25,0,0,1,69,57.52a19.92,19.92,0,0,1-5,.38A95,95,0,0,0,59.5,41.82a43.19,43.19,0,0,0-6.65-11.93,19,19,0,0,0-4.43-4A30,30,0,0,1,54.54,26.69Zm-12.35-.24c7.23.33,12.13,9,15,16.27a91.23,91.23,0,0,1,4.31,15,56.07,56.07,0,0,1-13-3.78l-.76-.3c-.8-11.8-3.87-19.55-9.12-23a11.46,11.46,0,0,0-3.74-1.65A29.24,29.24,0,0,1,42.19,26.45ZM27,34.55a29.23,29.23,0,0,1,4-3.32,8,8,0,0,1,1.31-.1,8.84,8.84,0,0,1,4.67,1.32,36.37,36.37,0,0,0-8.6,5.09A32.06,32.06,0,0,0,18.9,49.75,29.53,29.53,0,0,1,27,34.55Zm-5.5,34.08a29.12,29.12,0,0,1-2.67-8A29.16,29.16,0,0,1,29.86,39.52a33.11,33.11,0,0,1,9.28-5.24A16.1,16.1,0,0,1,41.7,38.1,75.82,75.82,0,0,0,29,50.24a34.87,34.87,0,0,0-6.94,12.68A18.6,18.6,0,0,0,21.47,68.63Zm8.63,3.09c0,.23-.08.49-.13.79l-.06.33A12.59,12.59,0,0,0,30,78.9a30.79,30.79,0,0,1-3-2.66l-.62-.62C22,69.06,23.54,61,31,51.82A74.15,74.15,0,0,1,42.72,40.47a48.19,48.19,0,0,1,2.5,13.19,19.72,19.72,0,0,0-5,2.94c-3,2.35-7.1,6.83-10.12,15ZM47.82,84.86a29.67,29.67,0,0,1-13.41-3.21,8.54,8.54,0,0,1-2.17-7.48,67.13,67.13,0,0,0,8.58,4.07,44.67,44.67,0,0,0,15.47,3.22,26.2,26.2,0,0,0,5.72-.6c.4-.09.8-.19,1.19-.3A29.24,29.24,0,0,1,47.82,84.86Zm25.9-15.37a19.06,19.06,0,0,1-12.25,8.92,23.25,23.25,0,0,1-5.18.55c-10.12,0-20.21-5.42-23.5-7.37a38.69,38.69,0,0,1,2.3-4.89,96.31,96.31,0,0,0,17.6,4.59,43.78,43.78,0,0,0,14.67.1,19.35,19.35,0,0,0,6.73-2.6C74,69,73.84,69.26,73.72,69.49Zm-6.84-.56a41.32,41.32,0,0,1-13.81-.11,94.1,94.1,0,0,1-16.64-4.3,26.25,26.25,0,0,1,5.33-5.92,16.32,16.32,0,0,1,4.83-2.77l.78.31.19.07c2.68,1.08,9,3.61,15.28,4.12s11.31-1.13,14.45-4.89a29.3,29.3,0,0,1-1,7.61C74.47,66.07,71.3,68,66.88,68.93Z" />
      <g id="air">
          <line class="cls-2" x1="68.86" y1="27.95" x2="86.42" y2="10.4" />
          <line class="cls-2" x1="73.42" y1="31.34" x2="85.74" y2="19.02" />
          <line class="cls-2" x1="76.68" y1="36.31" x2="82.13" y2="30.86" />
      </g>
  </svg>
</div>
<h1>Netball Icon Animation</h1>


.wrap {
  position: relative;
  font-size: 18px;
  color: black;
  z-index: -1;
}

h1 {
  font-size: 2em;
  text-align: center;
  margin: 20px 0 40px;
  padding: 0;
}

.container {
  background: transparent;
  right: 100%;
  margin: 0 auto;
  overflow: auto;
  padding: 2%;
}

.right-content,
.left-content {
  float: left;
  display: block;
  width: 45%;
  padding: 1% 2%;
}

.left-content {
  border-right: 5px dotted #666;
  text-align: right;
}

.left-content p {
  margin: 150px 0 0;
}

.right-content p {
  margin: 80px 0 150px;
}

.container p {
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7 ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.left-content .more-padding {
  padding-right: 100px;
}

.right-content .more-padding {
  padding-left: 100px;
}

.icon-wrapper {
  display: flex;
  width: 200px;
  height: 200px;
  background: orange;
  padding: 2.9em;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

h1 {
  text-align: center;
}

.cls-1 {
  fill: #fff;
}

.cls-2 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.icon-wrapper #air {
  stroke-dashoffset: 66;
  stroke-dasharray: 33;
  transition: all 2s ease;
}

.icon-wrapper:hover #air {
  stroke-dashoffset: 0;
}

.icon-wrapper #ball {
  transition: all 1.5s ease;
  transform: rotate(0);
  transform-origin: center;
}

.icon-wrapper:hover #ball {
  transform: rotate(360deg);
}


$(window).scroll(function() {
  $('.container p').each(function() {
    var scrollTop = $(window).scrollTop(),
      elementOffset = $(this).offset().top,
      distance = (elementOffset - scrollTop),
      windowHeight = $(window).height(),
      breakPoint = windowHeight * 0.9;

    if (distance > breakPoint) {
      $(this).addClass("more-padding");
    }
    if (distance < breakPoint) {
      $(this).removeClass("more-padding");
    }
  });
});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 并排对齐图像（css + html） - aligning image side by side position (css + html) HTML CSS对齐在图像的右侧 - Html css aligning on the right side of image 将Img标签与每个图像下方的p标签并排对齐-CSS - Aligning Img tag side by with p tag below each image - CSS 并排显示CSS框 - Display CSS boxes side by side 两个输入并排 CSS - Two Inputs side by side CSS 在 HTML/CSS 中并排显示图像 - Images Side by Side in HTML/CSS CSS 容器中的项目未正确对齐 - Items not aligning properly in CSS container 关于仅以一个文本溢出并排对齐两个范围 - Regarding aligning two spans side by side with only one text overflow 我正在尝试并排对齐电影卡。 但他们在列中对齐 - I am trying to align movieCards side by side. But they are aligning in a column 并排对齐两个图形（饼图和条形图）:: d3 js - Aligning two graphs(Pie and Bar) side by side :: d3 js
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM