Html
    Css
    Js

    
                        
span:nth-child(n+1) {
	box-shadow:4px -4px 0px #000;
	background-color:#33ccb3;
	transform:rotate(5deg);
	text-shadow:5px 2px #000;
	font-family:"Luckiest Guy";
}
span:nth-child(n+2) {
	box-shadow:4px -4px 0px #000;
	background-color:#69cc33;
	transform:rotate(-12deg);
	text-shadow:5px 4px #000;
	font-family:"Monoton";
}
span:nth-child(n+3) {
	box-shadow:-9px 9px 0px #000;
	background-color:#cc3347;
	transform:rotate(13deg);
	text-shadow:5px 6px #000;
	font-family:"Press Start 2P";
}
span:nth-child(n+4) {
	box-shadow:-8px 8px 0px #000;
	background-color:#9433cc;
	transform:rotate(-2deg);
	text-shadow:5px 8px #000;
	font-family:"Special Elite";
}
span:nth-child(n+5) {
	box-shadow:-10px 10px 0px #000;
	background-color:#3370cc;
	transform:rotate(12deg);
	text-shadow:5px 10px #000;
	font-family:"Shrikhand";
}
body {
	display:grid;
	min-height:100vh;
	place-content:center;
}
body > div {
	max-width:80vw;
}
body > div p {
	max-width:60vw;
	text-align:center;
}
h1 {
	font-size:8rem;
	letter-spacing:0rem;
	display:flex;
	justify-content:center;
}
h1 span {
	outline:2px solid #222;
	padding:1rem;
	color:white;
	display:grid;
	place-content:center;
}

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

好看的css卡片标题代码

更新时间:2022-06-24 22:45:30

0