CSS3时尚达人一键换装

共3个文件

png：1个

jpg：1个

html：1个

CSS3

需积分: 1 0 下载量 156 浏览量 2024-08-31 17:46:55 上传评论收藏 131KB RAR 举报

温馨提示

CSS3时尚达人一键换装

资源推荐

资源详情

资源评论

收起资源包目录

CSS换装.rar （3个子文件）

CSS换装

下载.png 22KB

dress.jpg 118KB

mask.html 2KB

共 3 条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * { margin: 0; padding: 0; } html, body, .container { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .person, .person2 { width: 256px; height: 512px; background: url(dress.jpg); } .person2 { margin: 0 10px 0 20px; position: relative; } .dress { position: absolute; inset: 0; mask: url(下载.png); background-color: var(--color); -webkit-mask: url(下载.png); mix-blend-mode: multiply; } input { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 0 } </style> <body> <div class="container"> <div class="person"> </div> <div class="person2"> <div class="dress" style="--color:aquamarine"></div> </div> <input type="color" id="colorSelector" /> </div> <script> const doms = { dress: document.querySelector('.dress'), selector: document.querySelector("#colorSelector") } doms.selector.addEventListener('input', (p) => { const color = p.target.value doms.dress.style.setProperty('--color', `${color}`); }) </script> </body> </html>

评论收藏

内容反馈