Daily UI #006 User Profile

daily-ui-006-user-profile.markdown

Daily UI #006 User Profile

A Pen by XiChen on CodePen.

License.

index.pug

//- Daily UI #006 User Profile
.profile
	.photo
		img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/764024/profile/profile-512.jpg")
	.content
		.text
			h3 Kelly Chen
			h6 Front-end Web Designer
		.btn
			span
	.box
		i.fa.fa-codepen
		i.fa.fa-facebook
		i.fa.fa-github
		i.fa.fa-tumblr
		i.fa.fa-twitter
		
		

script.coffeescript

$('.btn').click ->
	$(this).toggleClass 'active'
	$('.box').toggleClass 'open'

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.sass

@import 'https://fonts.googleapis.com/css?family=Raleway'
=size($w, $h)
	width: $w
	height: $h
=bdrs($bdrs)
	border-radius: $bdrs
*
	outline: none
	user-select: none
body, html
	margin: 0
	background: #ddd
	color: #7a7b7c
body
	font-family: 'Raleway', 'Microsoft JhengHei', Arial, sans-serif
.profile
	+size(330px, 100px)
	position: absolute
	top: 50%
	left: 50%
	transform: translate(-50%, -50%)
	+bdrs(5px)
	background-color: #fafafa
	box-shadow: 0 0 2rem #babbbc
	animation: show-profile .5s forwards ease-in-out
	@keyframes show-profile
		0%
			width: 0
	.photo, .content
		box-sizing: border-box
	.photo
		+size(100px, 100px)
		+bdrs(50%)
		overflow: hidden
		border: 5px solid #fafafa
		background-color: #fafafa
		margin-left: -50px
		box-shadow: 0 0 .5rem #babbbc
		animation: rotate-photo .5s forwards ease-in-out
		@keyframes rotate-photo
			100%
				transform: rotate(-360deg)
		img
			width: 100%
	.content
		padding: 10px
		overflow: hidden
		position: absolute
		+size(100%, 100%)
		top: 0
		left: 0
		&::before
			content: ''
			position: absolute
			+size(230px, 150px)
			background-color: #e9f3e6
			left: 0
			top: -20px
			z-index: -1
			transform: rotate(-8deg)
		.text
			margin-top: 20px
			margin-left: 50px
			h3, h6
				font-weight: normal
				margin: 3px 0
				letter-spacing: .5px
				white-space: nowrap
		.btn
			background-color: #abc
			+size(50px, 50px)
			position: absolute
			right: 25px
			top: 25px
			+bdrs(50%)
			z-index: 1
			cursor: pointer
			transition-duration: .3s
			animation: pop-btn .3s both ease-in-out .5s
			@keyframes pop-btn
				0%
					transform: scale(0)
				80%
					transform: scale(1.2)
				100%
					transform: scale(1)
			&:hover
				box-shadow: 0 0 0 5px rgba(#abc, .5)
			span
				+size(60%, 2px)
				position: absolute
				background-color: white
				top: 50%
				left: 20%
				transform: translateY(-50%)
				animation: to-hamburger .3s forwards ease-in-out
				&::before, &::after
					content: ''
					+size(100%, 2px)
					position: absolute
					background-color: white
					transition-duration: .3s
					transform: rotate(0deg)
					right: 0
				&::before
					margin-top: -7px
				&::after
					margin-top: 7px
			&.active
				span
					animation: to-arrow .3s forwards ease-in-out
					&::before, &::after
						width: 60%
						right: -1px
					&::before
						transform: rotate(45deg)
					&::after
						transform: rotate(-45deg)
		@keyframes to-hamburger
			from
				transform: translateY(-50%) rotate(-180deg)
		@keyframes to-arrow
			from
				transform: translateY(-50%) rotate(0deg)
			to
				transform: translateY(-50%) rotate(180deg)
	.box
		+size(150px, 150px)
		opacity: 0
		+bdrs(50%)
		background-color: rgba(white, .7)
		position: absolute
		top: 50%
		right: -40%
		transform: translate(-50%, -50%)
		transition-duration: .3s
		i
			+size(50px, 50px)
			+bdrs(50%)
			background-color: #ececec
			font-size: 26px
			text-align: center
			line-height: 50px
			position: absolute
			left: 18px
			top: calc(75px - 50px/2)
			box-shadow: 0 0 .5rem #babbbc
			transition-duration: .3s
			&:hover
				transition-delay: initial !important
				box-shadow: 0 0 0 5px #babbbc
		&.open
			opacity: 1
			i
				left: 60px
				$item: 5
				@for $i from 0 through ($item - 1)
					$deg: 180deg / ($item - 1) //因圍繞半圓，為頭尾垂直對齊使item-1
					&:nth-of-type(#{$i + 1})
						transform: rotate($deg * $i - 90 ) translateX(120px) rotate(-$deg * $i + 90 )
						transition-delay: .1s * $i

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />