给大家的一封信 – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>给大家的一封信</title> <style type="text/css"> html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } a { text-decoration: none; color: inherit; } img { max-width: 100%; } a, button { background: none; border: none; -webkit-tap-highlight-color: transparent; } a:checked, a:visited, a:active, a:focus, button:checked, button:visited, button:active, button:focus { outline: 0; } html, body { height: 100%; } body { background-color: #e3e3e3; background: linear-gradient(30deg, #c3d9ef, #add0e6); display: flex; justify-content: center; align-items: center; overflow: hidden; } .envelope { width: 500px; height: 310px; display: flex; position: relative; cursor: pointer; transition: transform linear 0.4s; } .envelope:hover { transform: translateY(25%); } .envelope:hover .triangle_top { top: 1px; transform: rotate3d(1, 0, 0, 180deg); z-index: 31; } .envelope:hover #top { fill: #f2f2f2; filter: url(#topsh); } #envelope { z-index: 30; } .triangle_top { width: 100%; height: 100%; position: absolute; z-index: 30; transform-origin: top; transition: transform linear 0.4s, top linear 0.4s; } .clicked.env { opacity: 0; transform: translateY(250%); transition: 0.3s opacity linear 3s, transform linear 0.4s; } .clicked.triangle_top { z-index: 19; transform: translate(0%, 250%) rotate3d(1, 0, 0, 180deg); } .clicked #top { fill: #f2f2f2; filter: url(#topsh); } .envelope-bg { position: absolute; width: 100%; height: 100%; background-color: #f2f2f2; transition: transform linear 0.4s; } #left-right { fill: #f06242; } #bottom { fill: #f06a4c; } #top { fill: #f17255; transition: 0s fill linear 0.2s, 0s filter linear 0.2s; } .paper { width: 400px; height: 297.6px; background-color: #fff; position: absolute; box-shadow: 0 0 5px #d1d1d1; padding: 25px; left: 10%; overflow: hidden; z-index: 20; } .paper p { font-size: 16px; line-height: 1.1; font-family: serif; text-align: justify; } </style> </head> <body> <div class="envelope"> <svg id="envelope" version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 340 230" preserveaspectratio="none" height="100%" width="100%" class="env"> <defs> <filter id="left-right-shadow" x="0" y="0" width="200%" height="200%"> <feoffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feoffset> <fecolormatrix result="matrixOut" in="offOut" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"></fecolormatrix> <fegaussianblur result="blurOut" in="matrixOut" stddeviation="2"></fegaussianblur> <feblend in="SourceGraphic" in2="blurOut" mode="normal"></feblend> </filter> <filter id="topsh" x="0" y="0" width="200%" height="200%"> <feoffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feoffset> <fecolormatrix result="matrixOut" in="offOut" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></fecolormatrix> <fegaussianblur result="blurOut" in="matrixOut" stddeviation="6"></fegaussianblur> <feblend in="SourceGraphic" in2="blurOut" mode="normal"></feblend> </filter> </defs> <g id="env"> <polygon id="left-right" filter="url(#left-right-shadow)" points="0,230 0,10 170,115 340,10 340,230 "></polygon> <path id="bottom" filter="url(#left-right-shadow)" d="M0,230h340v-10L178,102c-4.4-3.1-11.6-3.1-16,0L0,220L0,230"></path> </g> </svg> <div class="envelope-bg env"></div> <div class="triangle_top env"> <svg id="envelope_top" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 340 230" enable-background="new 0 0 340 230" xml:space="preserve" preserveaspectratio="none" height="100%" width="100%"> <path id="top" filter="url(#left-right-shadow)" d="M340,0H0v10l162,118c4.4,3.1,11.6,3.1,16,0L340,10V0"></path> </svg> </div> <div class="paper"> <h2>大家好，我是新来的。</h2> <p>大家好，我这个人不太会说话，如果有什么说的不对的地方-.-，来打我呀！_</p> </div> </div> </body> <script type="text/javascript"> var env = document.querySelectorAll('.env'); var envelope = document.querySelector('.envelope'); function addclass(){ envelope.style.pointerEvents= 'none'; for (var i = 0; i < env.length; i++) { env[i].classList.add("clicked"); } } envelope.addEventListener('click', addclass, false) </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 给大家的一封信