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; ba.........完整代码请登录后点击上方下载按钮下载查看
网友评论0