html+css制作一个浪漫爱心表白网页 表白网页在线制作 最浪漫的表白网页

.heart::after{ position: absolute; top:0; left:0; transform: translateY(-50%);}@keyframes{ 0%{ transform: scale(0.8) rotate(45deg); opacity: 0.8; } 50%{ transform: scale(1) rotate(45deg); opacity: 1; } 100%{ transform: scale(0.8) rotate(45deg); opacity: 0.8; }}.textCon .item{ position: absolute; opacity: 0; background-color:#cc2a5d; transform: rotate(45deg); animation: hearts 3s ease-in infinite;}.textCon .item::before,.textCon .item::after{ content:''; width:100%; height:100%; background-color:#cc2a5d; position: absolute; top:0; left:0; border-radius: 50%;}.textCon .item::before{ transform: translateX(-50%);}.textCon .item::after{ transform: translateY(-50%);}@keyframes{ 0%{ opacity: 0; transform: translateY(0%) rotate(45deg); } 20%{ opacity: 0.8; transform: translateY(-20%) rotate(45deg); } 100%{ opacity: 0; transform: translateY(-1000%) rotate(45deg); }}.days-label { font-size: 30px;}

.seconds { margin-top: 10px; font-size: 32px; font-family: "Monda_bo", Georgia, sans-serif; width: auto; text-align: center;}

.seconds-label { margin-top: 32px; font-size: 32px; font-family: "Monda_no", Georgia, sans-serif; width: auto; text-align: center;}

.container { position: absolute;}.days { font-size: 40px; width: auto; text-align: center;}.words { font-size: 50px; font-family: 'Regular', cursive; width: auto; text-align: center;}