body,html { width:100%; height:100%; } body { display:flex; /*弹性盒模型*/ justify-content:center; /*水平对齐 盒子位于中心*/ align-items:center; /*竖直对齐 居中对齐*/ background-color:yellow; perspective:1000px; /*景深:眼到屏幕的距离*/ } body,h1,p { margin:0; } .card { width:520px; height:350px; border-radius:15px; background:linear-gradient(#020333 70%,#fff 75%); /*渐变色*/ transform:rotateX(0deg); transform-style:preserve-3d; animation:move 1.5s; } .box { width:520px; height:350px; font-family:Rockwell; transform-style:preserve-3d; transform:translateZ(88px); box-shadow:0 0 30px #000 inset; } @keyframes move { 0% { transform:scale(0); } 30% { transform:scale(1.2); } 40% { transform:scale(0.85); } 50% { transform:scale(1.15); } 60% { transform:scale(0.9); } 70% { transform:scale(1.1); } 80% { transform:scale(0.95); } 90% { transform:scale(1.05); } 100% { transform:scale(1); } }h1 { color:#fff; height:60%; font-size:46px; text-align:center; line-height:210px; } p { color:#a9467d; height:40%; font-size:24px; text-align:center; line-height:140px; }
更新时间:2019-08-22 09:21:11
简单的生日贺卡代码,供学习参考,适合新手,希望可以帮助到人