當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML+CSS+JS实现 ❤️六边形圆柱弹性动画特效❤️

發布時間：2025/3/12 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS实现 ❤️六边形圆柱弹性动画特效❤️ 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

??效果演示：??

???代碼目錄：

主要代碼實現：

部分CSS樣式：

:root {--w: 8vmin;/*** change width ***/--h: 15vmin;/*** change height ***/--m: 8vmin;/*** change margin ***/--s: 1.25s;/*** change speed ***/ }body {margin: 0;padding: 0;background: radial-gradient(#311d54 15%, #000000 100%);font-family: 'Averia Sans Libre', Arial, sans-serif;overflow: hidden; }.content {height: 100vh;width: 100vw;text-align: center;box-sizing: border-box;display: flex;justify-content: center;align-items: center; }.pipe {width: var(--w);height: var(--w);background: linear-gradient(90deg, #be9aff, #673ab7);position: absolute;animation: grow var(--s) ease-in-out 0s infinite alternate;z-index: 50;box-shadow: 1vmin 15vmin 5vmin 0vmin #00000020;filter: hue-rotate(-15deg); }.pipe:before, .pipe:after {content: "";width: 100%;height: calc(var(--w) / 2);background: #be9aff;position: absolute;left: 0;top: calc(calc(var(--w) / 4) * -1);border-radius: 100%; }.pipe:after {top: inherit;bottom: calc(calc(var(--w) / 4) * -1);background: linear-gradient(90deg, #be9aff, #673ab7); }@keyframes grow {0% {height: var(--w);filter: hue-rotate(-15deg) brightness(0.85);}100% {height: var(--h);filter: hue-rotate(-25deg) brightness(1.15);} }.pipe:nth-child(1n+2) {animation-delay: 0.2s }.pipe:nth-child(1n+8) {animation-delay: 0.4s }.pipe:nth-child(1n+20) {animation-delay: 0.6s }.pipe:nth-child(1n+38) {animation-delay: 0.8s }.pipe:nth-child(1n+62) {animation-delay: 1s }

HTML代碼 :

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Hexagonal Breathing Grid - Pure CSS</title><link rel="stylesheet" href="css/style.css"></head><body><div class="content"><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div><div class="pipe"></div></div></body></html>

源碼獲取

查看博主主頁或私信博主獲取

精彩推薦更新中：

HTML5大作業實戰100套

??打卡文章更新? 39??/? 100天

大家可以點贊、收藏、關注、評論我啦、需要完整文件隨時聯系我或交流喲~！

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️六边形圆柱弹性动画特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于java springboot+my
下一篇： mysql模糊查询 or_mysql的模