在css中并排對齊專案-有解無憂

我有代碼：

$(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>

當您運行代碼并向下滾動時，您將看到一個體育標志影片。我希望該運動標志顯示在此位置：

在css中并排對齊專案

我怎樣才能做到這一點？我希望徽標顯示在側面，那么如何相應地編輯徽標影片的 CSS？

任何建議都會有很大幫助。謝謝。

uj5u.com熱心網友回復：

您可以使用position: absolute帶有top和right屬性的屬性來告訴您icon-wrapper相對于其父級的位置。在這種情況下，您的頁面body。

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

此外，為了使這個回應你可以使用%insted 的值，px這樣它就不會在不同的螢屏尺寸上中斷。

uj5u.com熱心網友回復：

$(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>

uj5u.com熱心網友回復：

如果您不介意球將固定在螢屏上，您可以添加：

.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;
}

其他解決方案是將愛好浮動到左側，這樣可以釋放右側的空間：

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

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

uj5u.com熱心網友回復：

我看到你的問題并解決它，你只需添加.right-content, .left-content寬度 45% 并添加icon-wrapper類margin: 0 auto; 然后它會按您的意愿作業，希望對您有所幫助:)

<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");
    }
  });
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/488234.html

標籤：javascript html jQuery css 动画

上一篇：如何使用Javascript將新創建的元素存盤到localStorage或Cookie？

下一篇：Matplotlib圖在y軸上顯示2個標簽