logo DevAnswer - Developers Answer

Dynamic Expanding / Collapsing Notification Box

7th November

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
* {
	margin: 0;padding: 0;
}
::-moz-selection {
	background: #FF6277;
	color: #fff;
}
::selection {
	background: #FF6277;
	color: #fff;
}
.page {
	position: relative;
	width: 100%;
	height: 100vh;
	background: #FF6277;
}
.wrapper,
.lines,
.line,
.open:after,
.content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
input[type="checkbox"] {
	display: none;
}
input[type="checkbox"]:checked ~ label .lines .line:first-child {
	transform: translate(-50%, -50%);
	transition: transform .4s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
input[type="checkbox"]:checked ~ label .lines .line:last-child {
	transform: translate(-50%, -50%);
	transition: transform .4s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
input[type="checkbox"]:checked ~ label:after {
	opacity: 0;
	transform: translate(-50%, -50%) scale3d(1, 1, 1);
	transition: all .5s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
input[type="checkbox"]:checked ~ .content {
	transform: translate(-50%, -50%) scale3d(1, 1, 1);
	transition: transform .5s .4s cubic-bezier(0.99, 0.04, 0.57, 1.31), box-shadow .5s .7s;
	box-shadow: 0 0 2px rgba(0, 0, 0, .3), 0 20px 10px -15px rgba(0, 0, 0, .3);
}
input[type="checkbox"]:checked ~ .content .close {
	transform: scale3d(1,1,1);
	transition: transform .5s .7s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .5s .7s, background .3s, box-shadow .3s;
	opacity: 1;
}
input[type="checkbox"]:checked ~ .content h1 {
	transform: translate(0, 0);
	transition: transform .5s .6s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .8s .8s;
	opacity: 1
}
input[type="checkbox"]:checked ~ .content p {
	transform: translate(0, 0);
	transition: transform .5s .62s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .8s .8s;
	opacity: .5
}
input[type="checkbox"]:checked ~ .content .logo .logo__line {
	opacity: 1;
	transform: translate(-50%, 0);
	transition: transform .5s .7s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .8s .8s;
}
input[type="checkbox"]:checked ~ .content .logo .logo__line:first-child {
	opacity: 1;
	transform: translate(calc(0% - 50% - 10px), 0);
	transition: transform .5s .8s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .8s .8s;
}
input[type="checkbox"]:checked ~ .content .logo .logo__line:last-child {
	opacity: 1;
	transform: translate(calc(0% - 50% + 10px), 0);
	transition: transform .5s .85s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .8s .8s;
}
.open {
	display: block;
	width: 30px;
	height: 20px;
/* 	background: rgba(245, 245, 245, .3); */
	cursor: pointer;
}
.open:after {
	content: '';
	width: 200px;
	height: 200px;
	background-color: rgba(245, 245, 245, .3);
	border-radius: 50%;
	opacity: 1;
	transform: translate(-50%, -50%) scale3d(0, 0, 0);
	transition: none;
}
.line {
	width: 4px;
	height: 30px;
	background: rgba(245, 245, 245, 1);
	border-radius: 5px;
	transition: transform .4s 1s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
.line:first-child {
	transform: translate(-15px, -50%);
}
.line:last-child {
	transform: translate(11px, -50%);
}
.content {
	width: 200px;
	height: 300px;
	background: rgba(255, 255, 255, 1);
	border-radius: 10px;
	transform: translate(-50%, -50%) scale3d(0, 0, 0);
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #384055;
	font: normal 16px/1 'Ubuntu', sans-serif;
	text-align: center;
	transition: transform .5s .5s cubic-bezier(0.99, 0.04, 0.57, 1.31), box-shadow .5s .5s;
}
.content h1 {
	padding-bottom: 20px;
	font-size: 20px;
	transition: transform .5s .02s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .5s;
}
.content p {
	line-height: 1.5;
	opacity: .5;
	font-size: 13px;
	padding-bottom: 20px;
	transition: transform .3s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .5s;
}
.content h1,
.content p {
	transform: translate(0, 60px);
	opacity: 0;
}
.close {
	position: absolute;
	bottom: 30px;
	background: #FF6277;
	border-radius: 6px;
	color: #fff;
	padding: 15px 20px;
	cursor: pointer;
	font-weight: bolder;
	opacity: 0;
	transform: scale3d(0,0,0);
	transition: transform .5s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .5s, box-shadow .3s;
	box-shadow: 0 5px 10px -5px rgba(255, 98, 119, 1);
/* 	box-shadow: 0 5px 10px -5px rgba(0, 0, 0, .5); */
}
.close:active {
	box-shadow: 0 0px 10px -5px rgba(255, 98, 119, 1);
/* 	box-shadow: 0 0px 10px -5px rgba(0, 0, 0, .5); */
}
.close:hover {
	-webkit-animation: bounce .5s;
	        animation: bounce .5s
}
.close span {
	display: inline-block;
	position: relative;
}
.close:hover span {
	-webkit-animation: bounce .5s .03s;
	        animation: bounce .5s .03s
}
.logo {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translate(-50%, 0);
}
.logo__line {
	position: absolute;
	top: 15px;
	left: 50%;
	transform: translate(-50%, -20px);
	width: 4px;
	height: 22px;
	border-radius: 6px;
	background: #FF6277;
	opacity: 0;
	transition: transform .5s .1s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .8s .1s;
}
.logo__line:first-child {
	transform: translate(calc(0% - 50% - 10px), -20px);
	transition: transform .5s .2s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .8s .2s;
}
.logo__line:last-child {
	transform: translate(calc(0% - 50% + 10px), -20px);
	transition: transform .5s .3s cubic-bezier(0.99, 0.04, 0.57, 1.31), opacity .8s .3s;
}
@-webkit-keyframes bounce {
	0% {
		transform: translate(0px, 0px); 
	}
	40% {
		transform: translate(0px, -12px);
	}
	80% {
		transform: translate(0px, 2px); 
	}
	100% {
		transform: translate(0px, 0px); 
	} 
}
@keyframes bounce {
	0% {
		transform: translate(0px, 0px); 
	}
	40% {
		transform: translate(0px, -12px);
	}
	80% {
		transform: translate(0px, 2px); 
	}
	100% {
		transform: translate(0px, 0px); 
	} 
}
</style>

</head>
<body>
<section class="page">
	<div class="wrapper">
		<input type="checkbox" id="checkbox">
		<label for="checkbox" class="open">
			<div class="lines">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
		</label>
		<!-- begin content -->
		<section class="content">
			<label for="checkbox" class="close"><span>Close Me!</span></label>
			<div class="logo">
				<div class="logo__line"></div>
				<div class="logo__line"></div>
				<div class="logo__line"></div>
			</div>
			<h1>Three Invites</h1>
			<p>
				To get one of these invites, just create the best of
				your shots and post them in yuor dribbble account
			</p>
		</section>
		<!-- end content -->
	</div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>



Other Codes

Page Notification Alert Counter with Bell . . .


Page Notification Alert Counter with Bell . . .

We have an alert notification in this code that starts counting by clicking on a button and the alarm sounds once with each count.
Automatically Display Alert Notifications


Automatically Display Alert Notifications

In this notification code, alerts are displayed by clicking a button and disappear after the display is completed. Their theme is blue and they also have . . .
Notification Alert Massages in Multiple . . .


Notification Alert Massages in Multiple . . .

In this code, we have several alert notifications with different colors, each of which can be used for a situation. Alert notifications also have a close . . .
Notification UI Design


Notification UI Design

This code is pure CSS and there are 4 types of alert notifications with different topics, along with separating line animation and light animation on . . .