中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html如何實現毛毛蟲爬行動畫

發布時間:2020-09-29 16:47:59 來源:億速云 閱讀:150 作者:小新 欄目:web開發

這篇文章主要介紹了html如何實現毛毛蟲爬行動畫,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

毛毛蟲兒時大家都有見過,今天想起來寫一個爬行的動作,具體代碼如下所示:

html代碼:

<p class='container'>
  <p class='hide left'></p>
  <p class='hide right'></p>
  <p class='hide bottom'></p>
  <p class='circle-container'>
    <p class='circle'></p>
  </p>
</p>

css代碼:

 <style>
body {
  background-color: #1B6CB2;
  margin: 0;
}
.container {
  position: absolute;
  width: 600px;
  height: 400px;
  overflow: hidden;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
}
.hide {
  height: 100%;
  width: 150px;
  background: #1B6CB2;
  position: absolute;
  z-index: 2;
}
.hide.left {
  left: 0;
}
.hide.right {
  right: 0;
}
.hide.bottom {
  bottom: 0;
  width: 100%;
  height: 50%;
}
.circle {
  position: absolute;
  height: 75px;
  width: 150px;
  border: 3px solid white;
  border-radius: 50%/100% 100% 0 0;
  border-bottom: none;
  top: 40%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: translate(-50%, -50%);
  animation: magic 1.8s ease infinite;
}
@keyframes magic {
  0% {
    transform: rotate(-170deg) translate(-50%, -50%);
  }
  50% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(180deg) translate(-50%, -50%);
  }
}
.circle-container {
  position: absolute;
  height: 75px;
  width: 150px;
  top: 40%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: translate(-50%, -50%);
  animation: power 1.8s ease-out infinite;
}
@keyframes power {
  0% {
    margin-left: 20px;
  }
  50% {
    margin-left: -55px;
  }
  99.9% {
    margin-left: -130px;
  }
  100% {
    margin-left: 20px;
  }
}
  </style>

感謝你能夠認真閱讀完這篇文章,希望小編分享html如何實現毛毛蟲爬行動畫內容對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,遇到問題就找億速云,詳細的解決方法等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

曲阜市| 长垣县| 乐至县| 富锦市| 邳州市| 景德镇市| 平潭县| 大名县| 潼关县| 汝城县| 新宁县| 颍上县| 台安县| 河源市| 论坛| 湘阴县| 额敏县| 遂川县| 黄大仙区| 河南省| 博乐市| 昌吉市| 西城区| 和林格尔县| 鹤山市| 保靖县| 芦山县| 苍溪县| 林芝县| 遵义县| 兴宁市| 赣州市| 白山市| 刚察县| 屏东县| 韶山市| 土默特右旗| 洛扎县| 靖宇县| 康定县| 哈巴河县|