css实现5种图片滤镜效果代码
代码语言:html
所属分类:其他
代码描述:css实现5种图片滤镜效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Lato:700"); * { margin: 0; box-sizing: border-box; } body { background: #2f2f31; height: 100vh; overflow: hidden; color: #f5f5f5; line-height: 1.34; } .container { width: 100%; height: 100%; } .container img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .all_label { width: 32px; aspect-ratio: 1; border-radius: 12%; position: absolute; bottom: 12px; right: 12px; background-color: #fff; box-shadow: 0 0 16px rgba(0,0,0,0.267); z-index: 50; cursor: pointer; opacity: 0.4; } .all_label::after { content: "•"; color: #f00; font-weight: bold; font-size: 1.6em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .i { opacity: 0; position: absolute; left: -100%; pointer-events: none; } .filters { width: 100%; height: 100%; position: absolute; top: 0; display: flex; pointer-events: none; } .filters .l { pointer-events: auto; width: 0%; height: 100%; transition: width 0.6s cubic-bezier(0.1, 0.65, 0.1, 1); position: relative; cursor: default; overflow: hidden; } .filters .f { width: 100%; height: 100%; position: relative; } .filters .f::before, .filters .f::after { content: ""; position: absolute; inset: 0; z-index: 5; } .filters .s { position: absolute; top: 0; left: 0; width: 100%; z-index: 5; padding-top: 15px; font-family: Lato; font-size: 12px; text-align: center; text-transform: uppercase; letter-spacing: 2px; opacity: 0.75; transition: 0.6s 0.4s cubic-bezier(0.1, 0.65, 0.1, 1); pointer-events: none; white-space: nowrap; isolation: isolate; } .filters .s::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30%; min-height: 160px; background-image: linear-gradient(to bottom, #000 15%, transparent); opacity: 0.7; z-index: -1; } .filters .i:checked + .l { width: 100%; } .filters .i:checked + .l .s { opacity: 0; padding-top: 0; transition: 0.6s 1.5s cubic-bezier(0.1, 0.65, 0.1, 1); } .a:checked + .filters .l { width: 20%; cursor: pointer; } .a:checked + .filters:hover .l { width: 19%; } .a:checked + .filters:hover .l:hover { width: 24%; } [for="f1"] .f::before { background-image: linear-gradient(189deg, #ff69b4 30%, #ff0); mix-blend-mode: screen; opacity: 0.45; } [for="f1"] .f::after { background-image: linear-gradient(189deg, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0