css实现双击长方形显示动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现双击长方形显示动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { overflow: hidden; } .wrapper, .animDiv { position: absolute; inset: 0; background-color: lightgrey; } .animDiv { -webkit-animation: wipeAnimation 700ms ease-out both, cycleColors_01 1000ms linear infinite; animation: wipeAnimation 700ms ease-out both, cycleColors_01 1000ms linear infinite; -webkit-animation-play-state: running, paused; animation-play-state: running, paused; box-shadow: 0 0 80px 0 #00000055 inset; } .animDiv:nth-of-type(2) { -webkit-animation-delay: 100ms, -30ms; animation-delay: 100ms, -30ms; } .animDiv:nth-of-type(3) { -webkit-animation-delay: 200ms, -60ms; animation-delay: 200ms, -60ms; } .animDiv:nth-of-type(4) { -webkit-animation-delay: 300ms, -90ms; animation-delay: 300ms, -90ms; } .animDiv:nth-of-type(5) { -webkit-animation-delay: 400ms, -120ms; animation-delay: 400ms, -120ms; } .animDiv:nth-of-type(6) { -webkit-animation-delay: 500ms, -150ms; animation-delay: 500ms, -150ms; } .animDiv:nth-of-type(7) { -webkit-animation-delay: 600ms, -180ms; animation-delay: 600ms, -180ms; } .animDiv:nth-of-type(8) { -webkit-animation-delay: 700ms, -210ms; animation-delay: 700ms, -210ms; } .animDiv:nth-of-type(9) { background-color: lightgrey; box-shadow: none; -webkit-animation: wipeAnimation 700ms ease-out both; animation: wipeAnimation 700ms ease-out both; -webkit-animation-delay: 800ms, 800ms; animation-delay: 800ms, 800ms; } input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 99; opacity: 0; cursor: pointer; } .animText, .moreClick { position: absolute; width: 80%; height: 80%; padding: 10%; display: flex; justify-content: center; align-items: center; text-align: center; font-family: sans-serif; font-size: 1.5em; opacity: 1; color: darkblue; -webkit-animation: textAppear 300ms linear both 1500ms; animation: textAppear 300ms linear both 1500ms; transition: opacity 200ms linear 0s; } input:checked ~ .wrapper .animDiv { -webkit-animation-name: none, cycleColors_01; animation-name: none, cycleColors_01; -webkit-animation-play-state: running, running; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0