jquery实现一个不可能的三叉戟错觉动画效果代码
代码语言:html
所属分类:视觉差异
代码描述:jquery实现一个不可能的三叉戟错觉动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@300&display=swap"); :root { --line-size: 4px; --symbol-width: 200px; --symbol-height: calc(var(--symbol-width) * 2); --gradient: linear-gradient(#daa8cd, #daa8cc, #9696c8); --yellow-color: #efc66a; --neon-color: #fff; --neon-glow: #fff; --neon-shadow: 0 0 1rem var(--neon-color), inset 0 0 1rem var(--neon-color), 0 0 2rem var(--neon-glow), inset 0 0 4rem var(--neon-glow), 0 0 4rem var(--neon-glow); --animation-time: 0.5s; } * { box-sizing: border-box; margin: 0; padding: 0; transition: all calc(var(--animation-time) * 2) linear; } *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; position: absolute; content: ""; transition: all calc(var(--animation-time) * 2) linear; background: inherit; } body { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--gradient); font-family: "Bebas Neue", sans-serif; position: relative; } #symbol { width: var(--symbol-width); height: var(--symbol-height); position: relative; display: flex; flex-direction: row; justify-content: space-between; transform-origin: center center; transform: skewY(-18deg); cursor: pointer; margin-bottom: calc(var(--line-size) * 20); } #symbol .line { width: var(--line-size); height: var(--symbol-height); background: var(--neon-color); position: relative; border-radius: var(--line-size); box-shadow: var(--neon-shadow); } #symbol .line h1, #symbol .line p { position: absolute; color: var(--neon-color); white-space: nowrap; } #symbol .line p { right: 0; bottom: 0; font-size: calc(var(--line-size) * 3.5); letter-spacing: calc(var(--line-size) * 0.8); line-height: 1; margin-bottom: calc(var(--line-size) * -6); opacity: 1; transition-delay: calc(var(--animation-time) * 1); } #symbol .line h1 { right: 0; top: 0; font-size: calc(var(--line-size) * 6); letter-spacing: calc(var(--line-size) * 1); line-height: 1; margin-right: calc(var(--line-size) * 2); transition-delay: calc(var(--animation-time) * 1); transform: rotate(-90deg); transform-origin: right bottom; margin-top: calc(var(--line-size) * -6); } #symbol:hover .line p { opacity: 0; transition: all calc(var(--animation-time) * 1); } #symbol .line:before, #symbol .line:after { box-shadow: var(--neon-shadow); } #symbol:hover > .line:last-of-type, #symbol > .line:first-of-type, #symbol:hover > .line:nth-of-type(2) { top: 0; height: calc(var(--symbol-height) - calc(var(--symbol-width) / 5)); } /* SETUP */ #symbol > .line:first-of-type:after, #symbol > .line:last-of-type:after { height: var(--line-size); bottom: 0; } #symbol > .line:first-of-type:before, #symbol > .line:last-of-type:before, #symbol > .line:nth-of-type(5):before { height: var(--line-size); width: calc(var(--symbol-width) / 5); top: 0; } #symbol > .line:nth-of-type(5):before { right: calc(calc(var(--symbol-width) / 5) * 1); } #symbol > .line:last-of-type:before, #symbol > .line:last-of-type:after, #symbol > .line:nth-of-type(3):before { right: 0; } /* FLAT */ #symbol:hover > .line:first-of-type:after, #symbol > .line:last-of-type:after { transform: rotate(0deg); width: 0; } /* ANGLED */ #symbol > .line:first-of-type:after, #symbol:hover > .line:last-of-type:after, #symbol > .line:nth-of-type(4):before, #symbol:hover > .line:nth-of-type(3):before { width: calc(calc(var(--symbol-width) / 5) * 1.4); height: var(--line-size); bottom: 0; } #symbol > .line:first-of-type:after, #symbol > .line:nth-of-type(4):before { transform-origin: bottom left; transform: rotate(45deg); } #symbol:hover > .line:last-of-type:after, #symbol:hover > .line:nth-of-type(3):before { transform-origin: bottom right; transform: rotate(-45deg); right: 0; } #symbol:hover > .line:nth-of-type(4):before, #symbol:hover > .line:nth-of-type(4):after, #symbol > .line:nth-of-type(3):after, #symbol > .line:nth-of-type(3):before { width: 0; height: var(--line-size); bottom: 0; } #symbol:hover > .line:nth-of-type(3):after, #symbol > .line:nth-of-type(4):after { width: calc(var(--symbol-width) / 5); height: var(--line-size); bottom: 0; } #symbol:hover > .line:nth-of-type(3):after { transform-origin: bottom left; left: 0; } #symbol > .line:nth-of-type(4):after { right: 0; transform-origin: bottom right; } #symbol:hover { transform: skewY(18deg); } #symbol > .line:nth-of-type(3), #symbol > .line:nth-of-type(5), #symbol:hover > .line:nth-of-type(4) { height: calc(var(--symbol-height) - calc(var(--symbol-width) / 5)); } #symbol > .line:nth-of-type(4), #symbol:hover > .line:nth-of-type(3) { height: calc(var(--symbol-height) - calc(calc(var(--symbol-width) / 5)) * 2); } #symbol:hover > .line:nth-of-type(5), #symbol:hover > .line:first-of-type { height: var(--symbol-height); } #symbol > .line:nth-of-type(2):after, #symbol:hover > .line:nth-of-type(5):after { height: var(--line-size); width: calc(calc(var(--symbol-width) / 5) * 4); bottom: 0; } #symbol:hover > .line:nth-of-type(5):after, #symbol > .line:nth-of-type(5):after { right: 0; } #symbol > .line:nth-of-type(5):after, #symbol:hover > .line:nth-of-type(2):after { height: var(--line-size); width: calc(calc(var(--symbol-width) / 5) * 2); bottom: 0; } #symbol .line .shadow { position: absolute; width: calc(calc(var(--symbol-width) / 5) - calc(var(--line-size) * 1)); display: flex; top: 0; margin-left: var(--line-size); margin-top: var(--line-size); transform-origin: bottom left; padding: 0; height: calc(var(--symbol-height) - calc(var(--symbol-width) / 5)); transition: opacity calc(var(--animation-time) * 1) linear; } #symbol .line .shadow:before { top: 0; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); transform-origin: bottom left; } #symbol .line .shadow:after { bottom: 0; transform-origin: bottom left; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); } #symbol:hover .line .shadow { transition: opacity calc(var(--animation-time) * 1) linear calc(var(--animation-time) * 2); } #symbol:hover .line .shadow:before, #symbol:hover .line .shadow:after, #symbol .line:nth-of-type(4) .shadow:after, #symbol .line:first-of-type .shadow:after { transition: opacity calc(var(--animat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0