Html
    Css
    Js

    
                        
 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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

简单的生日贺卡具有鼠标悬停视差3d倾斜效果

更新时间:2019-08-22 09:21:11

简单的生日贺卡代码,供学习参考,适合新手,希望可以帮助到人

0