css+js实现点击摇动蜂巢蜜蜂跟随鼠标飞舞交互动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现点击摇动蜂巢蜜蜂跟随鼠标飞舞交互动画效果代码
代码标签: css js 点击 摇动 蜂巢 蜜蜂 跟随 鼠标 飞舞 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap"); body { display: flex; justify-content: center; margin: 0; height: 100vh; background-color: #F5FCCD; overflow: hidden; cursor: none; } .hive-line { position: absolute; width: 0.2rem; height: 3rem; background-color: #12486B; box-shadow: 2rem -0.5rem 1rem 0 rgba(0, 0, 56, 0.5); } .hive-line--provoked { transform-origin: 50% -2rem; animation: swing; animation-duration: 1s; animation-iteration-count: 2; } @keyframes swing { 0%, 100% { transform: rotate(0deg); } 33.33% { transform: rotate(-10deg); } 66.66% { transform: rotate(10deg); } } .hive-text { position: absolute; top: 1rem; left: calc(50vw - 8rem); width: 5rem; font-family: "Archivo Black", sans-serif; color: #12486B; } .hive-text:before { content: ""; position: absolute; bottom: -2rem; left: 3rem; width: 0.2rem; height: 2rem; background-color: #12486B; transform: rotate(-45deg); } .hive { position: relative; width: 8rem; height: 10rem; margin-top: 3rem; border-radius: 50%; background: radial-gradient(circle at 0 0, #FFF -20%, orange); overflow: hidden; box-shadow: 2rem 1rem 2rem 0 rgba(0, 0, 56, 0.5); } .hive--provoked { transform-origin: 50% -4rem; animation: swing; animation-duration: 1s; animation-iteration-count: 2; } @keyframes swing { 0%, 100% { transform: rotate(0deg); } 33.33% { transform: rotate(-10deg); } 66.66% { transform: rotate(10deg); } } .hive__division { position: absolute; width: 100%; height: 0.2rem; background: linear-gradient(90deg, #ff7d66, #000038 300%); } .hive__division:nth-child(1) { top: 10%; } .hive__division:nth-child(2) { top: 30%; } .hive__division:nth-child(3) { top: 50%; } .hive__division:nth-child(4) { top: 70%; } .hive__division:nth-child(5) { top: 90%; } .hive__door { position: absolute; left: 2.5rem; bottom: 2rem; width: 3rem; height: 3rem; border-top: 0.3rem solid #ff7d66; border-radius: 50%; background: linear-gradient(#12486B -100%, #000038); } .bee { position: absolute; top: 9rem; left: calc(50vw - 0.4rem); width: 0.8rem; height: 0.5rem; border-radius: 50%; background: linear-gradient(90deg, orange, orange 20%, #000038 20%, #000038 40%, orange 40%, orange 60%, #000038 60%, #000038 80%, orange 80%); box-shadow: 2rem 1rem 1rem 0 rgba(0, 0, 56, 0.6); transition-property: top, left; transition-duration: 0.5s; animation: flying; animation-duration: 10s; animation-iteration-count: infinite; } .bee:before, .bee:after { content: ""; position: absolute; top: -0.3rem; width: 0.3rem; height: 0.3rem; background: rgba(255, 255, 255, 0.6); } .bee:before { left: 0; border-radius: 0 0.2rem 0 0.2rem; } .bee:after { left: 0.3rem; border-radius: 0.2rem 0 0.2rem 0; } @keyframes flying { 0% { top: 9rem; left: calc(50vw - 0.4rem); opacity: 0; } 5% { opacity: 1; } 10%, 70% { top: min(calc(var(--top) + 1rem), calc(80vh - 1rem)); left: calc(var(--left) + 1rem); } 15%, 75% { top: min(calc(var(--top) + 3rem), calc(80vh - 1rem)); left: calc(var(--left) - 0.5rem); } 20%, 50% { top: min(calc(var(--top) + 1rem), calc(80vh - 1rem)); left: calc(var(--left) - 1.5rem); } 30%, 60% { top: min(calc(var(--top) - 2rem), calc(80vh - 1rem)); left: calc(var(--left) + 0.5rem); } 40%, 80% { top: min(var(--top), calc(80vh - 1rem)); left: calc(var(--left) - 2.5rem); } 35%, 95% { top: min(calc(var(--top) - 0.5rem), calc(80vh - 1rem)); left: calc(var(--left) - 3rem); } 50%, 90% { top: min(calc(var(--top) - 1rem), calc(80vh - 1rem)); left: calc(var(--left) + 0.5rem); } 100% { top: min(calc(var(--top) - 1rem), calc(80vh - 1rem)); left: calc(var(--left) + 1.5rem); } } .bee:nth-child(4n) { animation: flying2; animation-duration: 12s; animation-iteration-count: infinite; } @keyframes flying2 { 0% { top: 9rem; left: calc(50vw - 0.4rem); opacity: 0; } 5% { opacity: 1; } 20%, 90% { top: min(calc(var(--top) + 1rem), calc(80vh - 1rem)); left: calc(var(--left) + 5rem); } 15%, 75% { top: min(calc(var(--top) - 3rem), calc(80vh - 1rem)); left: calc(var(--left) - 6rem); } 30%, 80% { top: min(calc(var(--top) + 4rem), calc(80vh - 1rem)); left: calc(var(--left) - 1.5rem); } 25%, 65% { top: min(calc(var(--top) - 2rem), calc(80vh - 1rem)); left: calc(var(--left) + 5rem); } 90%, 80% { top: min(calc(var(--top) + 4rem), calc(80vh - 1rem)); left: calc(var(--left) - 3.5rem); } 35%, 95% { top: min(calc(var(--top) - 0.5rem), calc(80vh - 1rem)); left: calc(var(--left) - 3rem); } 50%, 40% { top: min(calc(var(--top) - 5rem), calc(80vh - 1rem)); left: calc(var(--left) + 0.5rem); } 100% { top: min(calc(var(--top) - 3rem), calc(80vh - 1rem)); left: calc(var(--left) + 1.5rem); } } .bee:nth-child(4n+1) { animation: flying3; animation-duration: 20s; animation-iteration-count: infinite; } @keyframes flying3 { 0% { top: 9rem; left: calc(50vw - 0.4rem); opacity: 0; } 5% { opacity: 1; } 15%, 90% { top: min(calc(var(--top) - 6rem), calc(80vh - 1rem)); left: calc(var(--left) + 5rem); } 15%, 75% { top: min(calc(var(--top) - 1rem), calc(80vh - 1rem)); left: calc(var(--left) - 8rem); } 30%, 80% { top: min(calc(var(--top) + 2rem), calc(80vh - 1rem)); le.........完整代码请登录后点击上方下载按钮下载查看
网友评论0