js可视化展示冒泡排序过程动画效果代码
代码语言:html
所属分类:动画
代码描述:js可视化展示冒泡排序过程动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { min-height: 100vh; display: grid; grid-template-columns: repeat(30, 1fr); grid-template-rows: 1fr auto; gap: 2px; background-color: #1f2020; margin: 0; } .item { grid-row: 1; grid-column: var(--col); box-sizing: border-box; transition: 1s ease; background-color: #535150; position: relative; --ht: 10; } .item:before { content: attr(data-val); position: absolute; box-sizing: border-box; padding-top: 0.5em; text-align: center; width: 100%; height: calc(var(--ht) * 1%); bottom: 0; left: 0; background-color: coral; color: #FBF7F4; } .but-grp { font-size: 1.3rem; grid-column: 1/-1; padding: 0.3em 1em; } .but-grp button { all: unset; background-color: #AEE1CD; padding: 0.3em 1em; border-radius: 0.3em; color: #1f2020; } .but-grp #reset { background-color: #BA0C2E; color: #FBF7F4; } .but-grp button:disabled, .but-grp #reset:disabled { background-color: #535150; color: #1f2020; } </style> </head> <body> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item" data-val=""></div> <div class="item&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0