css实现玻璃质感材质天气预报动画图标效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现玻璃质感材质天气预报动画图标效果代码动画效果代码
代码标签: css 玻璃 质感 材质 天气 预报 动画 图标
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; margin: 0; overflow: hidden; } @-webkit-keyframes rotation { 100% { transform: rotate(1turn); } } @keyframes rotation { 100% { transform: rotate(1turn); } } @-webkit-keyframes snow { 0% { transform: translateY(-12rem) rotate(45deg); } 50%, 100% { transform: translateY(12rem) rotate(45deg); } } @keyframes snow { 0% { transform: translateY(-12rem) rotate(45deg); } 50%, 100% { transform: translateY(12rem) rotate(45deg); } } @-webkit-keyframes thunder { 0%, 25%, 75%, 100% { filter: drop-shadow(0px -1px 0px #cfb8e5) drop-shadow(0px 0px 0px #9a4ee7) drop-shadow(0px 0px 0px rgba(154, 78, 231, 0.3)) drop-shadow(-2px -2px 1px #3c3762) drop-shadow(4px 1px 1px #3c3762); } 50% { filter: drop-shadow(0px -1px 0px #cfb8e5) drop-shadow(0px 0px 3px #9a4ee7) drop-shadow(0px 0px 30px rgba(154, 78, 231, 0.3)) drop-shadow(-2px -2px 1px #3c3762) drop-shadow(4px 1px 1px #3c3762); } } @keyframes thunder { 0%, 25%, 75%, 100% { filter: drop-shadow(0px -1px 0px #cfb8e5) drop-shadow(0px 0px 0px #9a4ee7) drop-shadow(0px 0px 0px rgba(154, 78, 231, 0.3)) drop-shadow(-2px -2px 1px #3c3762) drop-shadow(4px 1px 1px #3c3762); } 50% { filter: drop-shadow(0px -1px 0px #cfb8e5) drop-shadow(0px 0px 3px #9a4ee7) drop-shadow(0px 0px 30px rgba(154, 78, 231, 0.3)) drop-shadow(-2px -2px 1px #3c3762) drop-shadow(4px 1px 1px #3c3762); } } @-webkit-keyframes floating { 0%, 100% { transform: translatey(0); } 50% { transform: translatey(1rem); } } @keyframes floating { 0%, 100% { transform: translatey(0); } 50% { transform: translatey(1rem); } } @-webkit-keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.9); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.9); } } @-webkit-keyframes neon { 0%, 40%, 60%, 100% { filter: brightness(1); } 50% { filter: brightness(0.9); } } @keyframes neon { 0%, 40%, 60%, 100% { filter: brightness(1); } 50% { filter: brightness(0.9); } } body { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } .weather { display: flex; align-items: center; justify-content: center; overflow: hidden; } .weather--sun { background: linear-gradient(45deg, #628aa4, #77a1b8); } .weather--thunder { background: linear-gradient(45deg, #172a44, #1f3654); } .weather--snow { background: linear-gradient(45deg, #5e6270, #82889c); } .weather--rainbow { background: linear-gradient(45deg, #1d5476, #296b8f); } .icon { position: relative; width: 18rem; height: 13rem; transform: scale(0.8); } .icon__rainbow { position: absolute; right: 0rem; top: -2rem; height: 14rem; width: 14rem; filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2)); -webkit-animation: pulse 4s infinite; animation: pulse 4s infinite; } .icon__rainbow-arc { position: absolute; inset: 0; border-radius: 50%; color: red; box-shadow: inset 2.5rem 2rem 0.3rem -3rem #000000bf, inset 0 0 0.3rem 0.25rem #ffffffb8, inset 0 0 0.2rem 0.4rem #000000a6, inset 0 0 0 0.6rem; -webkit-animation: neon 4s infinite; animation: neon 4s infinite; } .icon__rainbow-arc:nth-child(1) { color: #ff1f5d; } .icon__rainbow-arc:nth-child(2) { color: #eb8125; inset: 0.9rem; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .icon__rainbow-arc:nth-child(3) { color: #fbff0e; inset: 1.8rem; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .icon__rainbow-arc:nth-child(4) { color: #a8ef3c; inset: 2.7rem; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .icon__rainbow-arc:nth-child(5) { color: #59d9ff; inset: 3.6rem; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .icon__rainbow-arc:nth-child(6) { color: #6685f5; inset: 4.5rem; -webkit-animation-delay: 1s; animation-delay: 1s; } .icon__rainbow-arc:nth-child(7) { color: #6a38e1; inset: 5.4rem; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .icon__snow { position: absolute; top: 12.8rem; left: 0; width: 100%; height: 10rem; overflow: hidden; } .icon__snow-flakes { position: absolute; top: 0; left: 13rem; height: 0.8rem; width: 0.8rem; background: #fff; -webkit-animation: snow 3s linear infinite; animation: snow 3s linear infinite; transform: translateY(-12rem) rotate(45deg); opacity: 0.5; color: #fff; box-shadow: 1rem 2rem, 1rem 7rem, 4rem 8rem, -5rem 8rem, -2rem 4rem, 0rem 11rem, 4rem 5rem, -2rem 8rem, 4rem 3rem 0 -0.1rem, 0rem 5rem 0 -0.1rem, -4rem 5rem 0 -0.1rem, -2rem 10rem 0 -0.1rem, -1rem 3rem 0 -0.2rem, 2rem 5rem 0 -0.2rem, -2rem 11rem 0 -0.2rem, 2rem 9rem 0 -0.2rem, -4rem 3rem 0 -0.2rem; } .icon__rain { position: absolute; top: 12.8rem; left: 0; width: 100%; height: 10rem; overflow: hidden; } .icon__rain-drops { position: absolute; top: 0; left: 13rem; height: 0.6rem; width: 0.6rem; background: #7a98e9; -webkit-animation: snow 3s linear infinite; animation: snow 3s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s; transform: translateY(-12rem) rotate(45deg); opacity: 1; color: #7a98e9; box-shadow: 1rem 2rem, 1rem 7rem, 4rem 8rem, -5rem 8rem, -2rem 4rem, 0rem 11rem, 4rem 5rem, -2rem 8rem, 4rem 3rem 0 -0.1rem, 0rem 5rem 0 -0.1rem, -4rem 5rem 0 -0.1rem, -2rem 10rem 0 -0.1rem, -1rem 3rem 0 -0.2rem, 2rem 5rem 0 -0.2rem, -2rem 11rem 0 -0.2rem, 2rem 9rem 0 -0.2rem, -4rem 3rem 0 -0.2rem; border-radius: 0 1rem 1rem; } .icon__sun { position: absolute; top: 1rem; right: 3.5rem; height: 5rem; width: 5rem; background: linear-gradient(45deg, #f09559 40%, #f0ca43); border-radius: 50%; filter: drop-shadow(0 0 10px rgba(239, 218, 144, 0.4)) drop-shadow(0 0 30px rgba(240, 202, 67, 0.4)); } .icon__sun-lights { position: absolute; inset: 0; -webkit-animation: rotation 6s linear infinite; animation: rotation 6s linear infinite; } .icon__sun-light { position: absolute; top: -2.75rem; left: 50%; margin-left: -0.45rem; border-radius: 1rem; width: 0.9rem; height: 2.5rem; background: linear-gradient(45deg, #f0b343, #f0ca43); transform-origin: 50% 5.25rem; } .icon__sun-light:nth-child(2) { transform: rotate(45deg); } .icon__sun-light:nth-child(3) { transform: rotate(90deg); } .icon__sun-light:nth-child(4) { transform: rotate(135deg); } .icon__sun-light:nth-child(5) { transform: rotate(180deg); } .icon__sun-light:nth-child(6) { transform: rotate(225deg); } .icon__sun-light:nth-child(7) { transform: rotate(270deg); } .icon__sun-light:nth-child(8) { transform: rotate(315deg); } .icon__thunder { position: absolute; top: 10rem; left: 50%; margin-left: -2.4rem; width: 4.8rem; height: 8.6rem; filter: drop-shadow(0px -1px 0px #cfb8e5) drop-shadow(0px 0px 0px #9a4ee7) drop-shadow(-2px -2px 1px #3c3762) drop-shadow(4px 1px 1px #3c3762); -webkit-animation: thunder 3s infinite, floating 3s infinite; animation: thunder 3s infinite, floating 3s infinite; } .icon__thunder:before, .icon__thunder:after { content: ""; position: absolute; top: 0; left: 0; background: #645d95; height: 5rem; width: 3rem; border-radius: 0.4rem; box-shadow: inset -0.2rem -0.4rem 0.2rem #3c3762, inset -0.1rem -0.1rem 0.4rem #fff; -webkit-clip-path: polygon(100% 100%, 0% 100%, 100% 0); clip-path: polygon(10.........完整代码请登录后点击上方下载按钮下载查看
网友评论0