js+css实现图像预览与上传按钮提示代码
代码语言:html
所属分类:上传
代码描述:js+css实现图像预览与上传按钮提示代码
代码标签: js css 图像 预览 上传 按钮 提示 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --primary: color-mix(in srgb, red 20%, blueviolet); } body { background-color: #f5f5f5; height: 100vh; display: grid; place-items: center; } input { opacity: 0; width: 0px; } img { max-width: 250px; border-radius: 999px; outline: 2px solid var(--primary); cursor: pointer; transition: 200ms ease-in-out; /* prevents uploaded image from distortion: */ aspect-ratio: 1; object-fit: cover; } img:hover { outline: 8px solid var(--primary); } #snackbar { visibility: hidden; min-width: 100px; margin-left: -125px; background-color: var(--primary); color: whitesmoke; text-align: center; border-radius: 8px; padding: 12px; position: fixed; z-index: 1; right: 5%; top: 30px; } #snackbar.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; } @keyframes fadein { from {top: 0; opacity: 0;} to {top: 30px; opacity: 1;} } @keyframes fadeout { from {top: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0