Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
html {
	position:relative;
	overflow:hidden !important;
}
body {
	font-family:'Quicksand',sans-serif;
	padding:0;
	margin:0;
}
.Page {
	width:100%;
	height:100%;
	min-height:100vh;
	position:absolute;
	z-index:0;
	display:flex;
	justify-content:center;
	align-items:center;
}
.background {
	width:100%;
	height:100%;
	min-height:100vh;
	background-image:url("https://images.unsplash.com/photo-1563283805-d8bf898cd83d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1752&q=80");
	position:absolute;
	z-index:-5;
	display:flex;
	justify-content:center;
	align-items:center;
}
.background2 { 
	width:100%;
	height:100%;
	min-height:100vh;
	background-image:url("https://plus.unsplash.com/premium_photo-1674086970842-a72b3ffd004d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80");
	position:absolute;
	z-index:-4;
}
@media screen and (max-width:768px) {
	.background {
	background-size:cover;
}
.background2 {
	background-size:cover;
}
}@media screen and (max-width:1000px) {
	.background {
	background-size:140%;
} 
.background2 {
	background-size:140%;
}
}@media screen and (max-width:1500px) {
	.background {
	background-size:130%;
}
.background2 {
	background-size:130%;
}
}@media screen and (max-width:2000px) {
	.background {
	background-size:120%;
}
.background2 {
	background-size:120%;
}
}.logo_one {
	margin:auto;
	margin-top:-100px;
	width:200px;
	height:200px;
	/*background-color:rgba(255,255,255,0.4);
	border-radius:50%;
	box-shadow:0px 0px 10px #ffffff;
	*/
}
.logo_two {
	width:180px;
	height:180px;
	margin:5px 5px;
	border-radius:50%;
	border:2px solid rgba(255,255,255,0.8);
	box-shadow:0px 0px 12px rgba(255,255,255,0.9);
	transition:all 1s;
	/*box-shadow:0px 0px 10px #ffffff;
	*/
}
.logo_two:hover {
	transform:rotate(360deg);
	box-shadow:0px 0px 50px rgba(255,255,255,1);
	transition:all 1s;
	/*box-shadow:0px 0px 10px #ffffff;
	*/
}
.name {
	margin-top:5px;
	text-align:center;
	font-size:30px;
	color:white;
	font-weight:500;
	text-shadow:0px 0px 12px white;
	transition:all 0.5s;
}
.name:hover {
	text-shadow:0px 0px 30px white;
	transition:all 0.5s;
}
.slogan {
	margin:auto;
	width:600px;
	height:50px;
	background-color:rgba(255,255,255,0.1);
	border:1px solid rgba(255,255,255,0.8);
	text-shadow:0px 0px 12px #ffffff;
	box-shadow:0px 0px 12px #ffffff;
	border-radius:30px;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:all 0.5s;
	margin-top:30px;
}
.slogan:hover {
	background-color:rgba(255,255,255,0.4);
	box-shadow:0px 0px 25px #ffffff;
	transition:all 0.5s;
}
.slogan_two {
	text-align:center;
	color:rgba(255,255,255,1);
	font-size:16px;
	max-width:500px;
}
.button {
	margin-top:15px;
	margin-right:auto;
	margin-left:auto;
	width:500px;
	height:100px;
	display:flex;
	justify-content:center;
	align-items:center;
}
.button1 {
	margin-left:10px;
	margin-right:10px;
	height:50px;
	width:200px;
	border:1px solid rgba(255,255,255,0.4);
	border-radius:25px;
	background-color:rgba(255,255,255,0.1);
	color:white;
	font-size:16px;
	transition:all 0.5s;
}
.button1:hover {
	background-color:rgba(255,255,255,0.4);
	color:#ffffff;
	box-shadow:0px 0px 12px #ffffff;
	transition:all 0.5s;
}

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

简单自我简介页面代码

更新时间:2023-05-09 10:19:24

第一次发,原本已经选用好自己的图片,但是由于自己不会放入在这里,可以自行改一下图片

0