欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

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

发布时间：2025/3/12 HTML 50 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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实现 ❤️六边形圆柱弹性动画特效❤️的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。