@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');
/*閲嶇疆娴忚鍣ㄦ牱寮�*/
* {
    margin: 0;
    padding: 0;
}
/*
    浣夸富浣撳眳涓�
    vw锛氳绐楀搴︾殑鐧惧垎姣旓紙1vw 浠ｈ〃瑙嗙獥鐨勫搴︿负 1%锛�
    vh锛氳绐楅珮搴︾殑鐧惧垎姣�
*/
body {
    height: 100vh;
    width: 100vw;
    background: url(3.png) no-repeat;
      background-size: cover;
				background-attachment: fixed;
    font-family: 'Pangolin', cursive;
    font-size: 1vmin;
    /*寮规€у竷灞€*/
    display: flex;
    /*璁剧疆flex瀛愰」鍦ㄦ瘡涓猣lex琛岀殑浜ゅ弶杞翠笂鐨勪腑蹇冨榻愶紝浜ゅ弶杞存柟鍚戜负column锛屽嵆鍨傜洿鏂瑰悜**/
    align-items: center;
    /*璁剧疆flex瀛愰」鍦ㄤ富杞翠笂鐨勪腑蹇冨榻�*/
    justify-content: center;
}
/*
浣跨敤鐩稿瀹氫綅锛堜粈涔堟椂鍊欑敤鐩稿瀹氫綅鎴栫粷瀵瑰畾浣嶏紵鍦ㄦ枃妗ｆ祦涓浉瀵瑰畾浣嶇殑鍏冪礌鍗犳湁浣嶇疆锛岃€屼笖浼氬奖鍝嶅悗闈㈢殑鍏冪礌锛堝潡鍏冪礌銆佽鍐呭潡鍏冪礌锛夛紝姣斿涓や釜div骞舵帓锛屽彟澶栦竴涓細鎹㈣銆傝€岀粷瀵瑰畾浣嶅氨鏄妸璇ュ厓绱犱粠鏂囨。娴佷腑韪㈠嚭锛屼笉浼氬崰鐢ㄦ枃妗ｆ祦鐨勪綅缃紝涔熶笉浼氬奖鍝嶅悗闈㈢殑鍏冪礌銆傦級
vmin锛氬綋鍓� vw 鍜� vh 涓緝灏忕殑涓€涓€�
vmax锛氬綋鍓� vw 鍜� vh 涓緝澶х殑涓€涓€�
*/
.container {
    position: relative;
    top: 0vmin;
    	/* 鏃嬭浆9搴� */
				transform: rotate(9deg) scale(1.5);
				
}
/*鐩稿瀹氫綅锛屽苟璁剧疆鑳屾櫙鑹插拰澶у皬*/
.envelope {
    position: relative;
    background: #eb7885;
    height: 30vmin;
    width: 48vmin;
}
.cover {
    position: absolute;
    height: 0;
    width: 0;

    border-bottom: 15vmin solid #f5b5bb;
    border-left: 24vmin solid transparent;
    border-right: 24vmin solid transparent;
    top: 15vmin;
    z-index: 3;
}

.cover::after { /*left triangle*/
    position: absolute;
    content: '';
    border-left: 24.5vmin solid #ffbbc1;
    border-bottom: 15vmin solid transparent;
    border-top: 15vmin solid transparent;
    top: -15vmin;
    left: -24vmin;
}

.cover::before {
    position: absolute;
    content: '';
    border-right: 24.5vmin solid #ffbbc1;
    border-bottom: 15vmin solid transparent;
    border-top: 15vmin solid transparent;
    top: -15vmin;
    left: -0.5vmin;
}
@keyframes open {
    100% {
        transform: rotatex(180deg);
    }
}
/*淇′欢鍚堜笂鐨勫姩鐢�*/
@keyframes open-rev {
    from {
        transform: rotatex(-180deg);
    }
}
.lid {
    position: absolute;
    height: 0;
    width: 0;

    border-top: 15vmin solid #ff8896;
    border-left: 24vmin solid transparent;
    border-right: 24vmin solid transparent;

    top: 0;
    /*璁剧疆鏃嬭浆鍏冪礌鐨勫熀鐐逛綅缃紝涓虹洅瀛愮殑椤堕儴杈圭紭*/
    transform-origin: top;
    animation: open-rev 2s;
}

.container:hover .lid {
    animation: open 4s;
    animation-fill-mode: forwards;
}

.ds:hover {
    animation: open 0.6s;
    animation-fill-mode: forwards;
}