HTML+CSS+JS实现 ❤️六边形圆柱弹性动画特效❤️
2024-04-03 17:10:42
效果演示：
代码目录：
主要代码实现：
部分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实现 ❤️六边形圆柱弹性动画特效❤️相关推荐
- 短视频带货系统，HTML+CSS+JS实现宇宙星球旋转动画特效
短视频带货系统,HTML+CSS+JS实现宇宙星球旋转动画特效 主要代码实现: css样式: /*** @date 2021/1/20 16:10*//* 取消默认间距 */* {margin: 0; ...
- HTML+CSS+JS实现 ❤️3D网状球体动画特效❤️
效果演示: 代码目录: 主要代码实现: CSS样式: @property --color-position {syntax: '<length-percentage>';inherits: ...
- HTML+CSS+JS实现 ❤️ 宇宙星球旋转动画特效❤️
代码目录: 主要代码实现: css样式: /*** @date 2021/1/20 16:10*//* 取消默认间距 */* {margin: 0;padding: 0; }a {text-decor ...
- HTML+CSS+JS实现 ❤️3D方块弹跳动画特效❤️
效果演示: 代码目录: 主要代码实现: 部分CSS样式: *, *::before, *::after {padding: 0;margin: 0 auto;box-sizing: border-bo ...
- HTML+CSS+JS实现 ❤️发光糖果泡泡动画特效❤️
- HTML+CSS+JS实现 ❤️等离子球体ui动画特效❤️
- HTML+CSS+JS实现 ❤️彩色3D线条动画特效❤️
效果演示: 代码目录: 主要代码实现: HTML代码 : <!doctype html> <html><head><meta charset="ut ...
- HTML+CSS+JS实现 ❤️飞行人物图标动画特效❤️
- 使用HTML+CSS+JS模拟比赛晋级的动画功能
使用HTML+CSS+JS模拟比赛晋级的动画功能 1.需求描述 2.代码实现 3.效果演示 系统:Win10 Chrome:106.0.5249.119 演示视频:[英雄联盟]S12全球总决赛冠军预测 ...
最新文章
- pycharm设置环境变量和参数
- redis api-zset
- 已知线性表最多可能有20个元素，存储每个元素需要8字节，存储每个指针需要4字节。当元素个数为（ ）时使用单链表比使用数组存储此线性表更加节约空间。
- linux用光盘作yum源实验步骤,Linux使用系统光盘作为YUM源
- getClass()和.class的区别
- vue+elementUI开发实践问题总结
- android handler的机制和原理_第一百八十回：Android中的Handler机制九
- 一纬度横直线等于多公里_【高中物理】必修一知识点总结
- 判断 localStorage 在不同浏览器的最大支持内存
- python判定串口已连接_python的串口连接
- 电梯液晶显示控制方案
- C++课程设计：学生管理系统
- 笔记本电脑频繁假死的一个解决办法
- 内存条编号意义--怎么看内存条型号大小
- OpenCV中图像的存储格式（Python版本）
- iptables之raw表
- React全家桶+AntD 实战二
- Freeswitch如何支持G729转码开源版本
- 【vs code / idea】快速去除代码注释
- 全连接神经网络的两大缺陷
热门文章
- 软件工程详细设计说明书_软件工程导论知识点梳理之简答题
- java 旅行家的预算_洛谷 P1016 旅行家的预算 Java解法
- 时分秒 java_JAVA 时分秒累加
- java的visitor模式_java设计模式（二十一）访问者模式（Visitor）
- 小程序如何调用php程序,微信小程序调用PHP后台接口 解析纯html文本
- java可以返回微妙吗_Java开发中10个最为微妙的最佳编程实践
- python整数预测_时间序列预测全攻略（附带Python代码） | 36大数据
- 搜狗浏览器热搜怎么关 热搜关闭方法详解
- 如何实现RTMP推送Android Camera2数据
- Maven依赖排除 禁止依赖传递 取消依赖的方法