css实现可拖动改变容器大小的冰块和水效果代码
代码语言:html
所属分类:拖放
代码描述:css实现可拖动改变容器大小的冰块和水效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { font-family: "Righteous", cursive; height: 100%; } body { min-height: 100%; display: grid; grid-template: "." 1fr "g" auto "a" auto "." 1fr "f" auto; justify-items: center; align-content: center; } main { container-type: inline-size; container-name: glass; background: azure; border: thin solid slategray; border-radius: 60% 60% 40% 40% / 0.25em 0.25em 0.5em 0.5em; grid-area: g; min-width: min(8em, 80vw); max-width: min(64em, 80vw); overflow: hidden; resize: horizontal; display: grid; position: relative; } main::before { content: ""; position: absolute; top: 0; left: 0; right: 0; background: aliceblue; border: thin solid slategray; transform: translatey(-40%); border-radius: 40% / 0.25em; height: 0.5em; } @keyframes bounce { to { transform: translate3d(-0.25em, -0.25em, 0) scale(1.3); } } /* arrow goes away once it's been resized */ main:not([style])::after { animation: bounce 1s infinite alternate; color: white; content: "↘"; font-size: 2em; font-weight: bold; position: absolute; bottom: 0; right: 0; z-index: 1; opacity: 0; } main:hover::after { opacity: 0.85; } h1, section { grid-area: 1 / 1 / -1 / -1; } h1 { background: radial-gradient( ellipse 0.5em 50% at calc(100% - 0.5em), hsl(0 0% 100% / 0.5), transparent ); color: white; position: relative; display: flex; align-items: center; justify-content: center; text-transform: uppercase; text-shadow: 1px 1px 0 var(--shadow, hsl(0 0% 0% / 0.5)); margin: 0; z-index: 1; } h1 span::before { content: var(--before); } h1 span::after { content: var(--after); } section { background: linear-gradient(-182deg, azure 1em, transparent 1.1em), radial-gradient(ellipse at top right, var(--glow, cyan), transparent) var(--water, navy); display: flex; flex-wrap: wrap; margin-top: 2em; padding: 0 0.25ch 1em; place-content: center; transition: background-color 300ms; } @keyframes bubble { from { opacity: 0; transform: translatey(18em) scale(0.5); } to { opacity: 0.5; transform: translatey(0px); } } section::before, section::after { content: ""; animation: bubble 7s 3s ease-in infinite both; height: 1em; width: 1em; background: radial-gradient( ellipse at right, hsl(120 50% 100% / 1), transpar.........完整代码请登录后点击上方下载按钮下载查看
网友评论0