CSS Creative Div Shape with Cool Hover Effects - HTML5 CSS3 Hover Effect - Tutorial

Hôm nay mình sẽ giới thiệu tới các bạn 1 giao diện 404 đơn giản chỉ bằng CSS3 mà ai cũng có thể làm được.

404

<div id="item-box">
    <h2>404</h2>
</div>

#item-box {
	background-color: #2196f3;
	-webkit-transition: .5s;-o-transition: .5s;transition: .5s;
	position: relative;
	width: 300px;
	height: 300px;
	border-radius: 45px;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	h2 {
		color: #fff;
		font-size: 100px;
		font-weight: bold;
		position: relative;
		z-index: 1;
		-webkit-transition: .5s;-o-transition: .5s;transition: .5s;
	}
	&:before,&:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #2196f3;
		border-radius: 45px;
		-webkit-transition: .5s;-o-transition: .5s;transition: .5s;
	}
	&:before {
		-webkit-transform: rotate(30deg);-ms-transform: rotate(30deg);transform: rotate(30deg);
	}
	&:after {
		-webkit-transform: rotate(-30deg);-ms-transform: rotate(-30deg);transform: rotate(-30deg);
	}
	&:hover {
		border-radius: 10px;
		h2 {
			color: #2196f3;
		}
		&:before,&:after {
			border-radius: 10px;
			background-color: #fff;
		}
		&:before {
			-webkit-transform: rotate(-30deg);-ms-transform: rotate(-30deg);transform: rotate(-30deg);
		}
		&:after {
			-webkit-transform: rotate(30deg);-ms-transform: rotate(30deg);transform: rotate(30deg);
		}
	}
}
@media screen and (max-width: 450px) {
	#item-box {
		width: 250px;
		height: 250px;
	}
}

0 thảo luận về CSS Creative Div Shape with Cool Hover Effects - HTML5 CSS3 Hover Effect - Tutorial

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục