body { overflow:hidden; } div { width:100px; height:100px; background:#E88D8D; position:absolute; top:50vh; left:50vw; margin-left:-50px; transform:rotate(45deg); border-radius:20px; transition:all ease 1s; } div::before { content:''; width:100px; height:100px; position:absolute; left:-38px; top:1px; border-radius:50%; background:#E88D8D; transition:all ease 1s; } div::after { content:''; width:100px; height:100px; position:absolute; right:-1px; top:-40px; border-radius:50%; background:#E88D8D; transition:all ease 1s; } .scla { transform:rotate(45deg) scale(20); box-shadow:11px 0px 30px 9px #E87777; opacity:0.4 } /* background:white}.scla::after { background:white } .scla::before { background:white; } */ h1 { opacity:0; position:absolute; top:50vh; left:50vw; margin-left:-100px; transition:all ease 1s; color:white; font-family:"Microsoft Yahei"; font-weight:700; transform:translate(0px,-100px); } h1::before { content:'陈津,'; position:absolute; margin-top:-50px; margin-left:-10px; } .show { opacity:1; transform:translate(0,0); } .d2 { z-index:-1; opacity:0.2; animation:my 1s infinite linear; } @keyframes my { 0% { transform:scale(1) rotate(45deg); opacity:1; } 100% { transform:scale(1.65) rotate(45deg); opacity:0 } }