css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- DAILY CSS IMAGES 18 - VAMPIRE -->

<div class="canvas">
	<!-- VAMPIRE -->
	<div class="vampire">
	<div class="head">
		<!-- HAIR -->
		<div class="hair">
			<div class="middle"></div>
		</div>
		<!-- EARS -->
		<div class="ears"></div>
		<!-- EYES -->
		<div class="eyes">
			<div class="left">
				<div class="inner"></div>
			</div>
			<div class="right">
					<div class="inner"></div>
				</div>
		</div>
		<!-- NOSE -->
		<div class="nose"></div>
		<!-- MOUTH -->
		<div class="mouth"></div>
		<!-- BOWTIE -->
		<div class="bowtie"></div>
	</div>
	<!-- CAPE -->
	<div class="cape"></div>
	<div class="body">
		<div class="upper">
			<div class="white">	
			</div>
			<div class="buttons"></div>
		</div>
		<div class="arms">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="lower"></div>
	</div>
		</div>
	<!-- BAT -->
	<div class="bat">
		<div class="bat-body"></div>
		<div class="bat-wings"></div>
		<div class="bat-head">
			<div class="bat-eyes">
				<div class="left">
					<div class="inner"></div>
				</div>
				<div class="right">
					<div class="inner"></div>
				</div>
			</div>
		</div>
	</div>
</div>
            
          
!
            
              /* COLORS */
$bg: #CCBBCC
$black: #3A3A3A
$white: #F2E9E4
$red: #C95746
$grey: #BFB7B3

@mixin pseudo ($position: absolute, $display: block, $content: '')
	position: $position
	display: $display
	content: ''

*
	box-sizing: border-box

body, html
	height: 100%
	width: 100%
	background: $bg

.canvas
	position: relative
	top: 18%
	margin: auto
	height: 350px
	width: 350px
	background: $bg

/* VAMPIRE */
.vampire
	opacity: 1
	position: absolute
	height: 100%
	width: 100%
	animation-name: disappear
	animation-duration: 7s
	animation-delay: 3s
	animation-iteration-count: infinite
/* BAT */

.bat
	opacity: 0
	animation-name: appear
	animation-duration: 7s
	animation-delay: 3s
	animation-iteration-count: infinite

/* HEAD AND HAIR */
.head
	position: absolute
	top: 0
	left: 37.5%
	height: 30%
	width: 25%
	background: $white
	border-radius: 10% 10% 30% 30%
	z-index: 3

	&::before
		@include pseudo
		top: -2px
		left: 0
		height: 15px
		width: 45px
		background: $black
		z-index: 3
		border-radius: 50% 50% 0 0
	
	&::after
		@include pseudo
		top: -2px
		right: 0
		height: 15px
		width: 55px
		background: $black
		z-index: 3
		border-radius: 50% 50% 0 0

	.hair
		position: absolute
		height: 0
		width: 100%
		background: $black
	
		&::before
			@include pseudo
			top: 35px
			left: 33px
			height: 1px
			width: 20px
			background: $grey
		&::after
			@include pseudo
			top: 39px
			left: 28px
			height: 1px
			width: 30px
			background: $grey
		
	.middle
		position: absolute
		top: 10px
		left: 0
		border-top: 20px solid $black
		border-left: 43px solid transparent
		border-right: 43px solid transparent
		z-index: 3
		&::before
			@include pseudo
			top: -20px
			left: -43px
			border-top: 50px solid $black
			border-right: 10px solid transparent
		&::after
			@include pseudo
			top: -20px
			right: -44px
			border-top: 50px solid $black
			border-left: 10px solid transparent
	
/* EARS */

%ears
	top: 40%
	height: 30px
	width: 15px
	background: $white
	z-index: 0

.ears
	&::before
		@include pseudo
		@extend %ears
		left: -10px
		border-radius: 0 90% 0 90%
	&::after
		@include pseudo
		@extend %ears
		right: -10px
		border-radius: 90% 0 90% 0
		
/* EYES */
%eye
	position: absolute
	top: 50%
	height: 20px
	width: 20px
	background: #fff
	border: 3px solid $black
	border-radius: 50%
	z-index: 3

%inner
	position: absolute
	top: 23%
	height: 8px
	width: 8px
	background: $red
	border-radius: 50%

%eyebrows
	top: -5px
	height: 5px
	width: 20px
	background: $black

.eyes
	.left
		@extend %eye
		left: 22%
	
		.inner
			@extend %inner
			left: 25%
	
		&::before
			@include pseudo
			@extend %eyebrows
			right: -2px
			transform: rotate(20deg)
			border-radius: 0 2px 2px 80%
	
	.right
		@extend %eye
		right: 22%
	
		.inner
			@extend %inner
			right: 25%
	
		&::before
			@include pseudo
			@extend %eyebrows
			left: -2px
			transform: rotate(-20deg)
			border-radius: 2px 0 80% 2px
	
/* NOSE */
.nose
	position: absolute
	bottom: 23%
	left: 40%
	height: 10%
	width: 20%
	border-radius: 60%
	border-top: 2px solid transparent
	border-bottom: 2px solid transparent
	border-left: 2px solid $black
	border-right: 2px solid $black

/* MOUTH */
%teeth
	top: 1px
	border-top: 5px solid #fff
	border-left: 3px solid transparent
	border-right: 3px solid transparent

.mouth
	position: absolute
	bottom: 8%
	left: 35%
	height: 10px
	width: 30%
	background: $black
	border-radius: 0 0 50% 50% / 0 0 100% 100%

	&::before
		@include pseudo
		@extend %teeth
		left: 6px
	&::after
		@include pseudo
		@extend %teeth
		right: 6px
	
/* BOWTIE */
%bow
	top: -3px
	border-top: 8px solid transparent
	border-bottom: 8px solid transparent

.bowtie
	position: absolute
	bottom: -9px
	left: 42.5%
	height: 10%
	width: 15%
	background: $red
	border-radius: 50%

	&::before
		@include pseudo
		@extend %bow
		left: -20px
		border-left: 36px solid $red
	&::after
		@include pseudo
		@extend %bow
		right: -20px
		border-right: 36px solid $red

/* CAPE */
.cape
	position: absolute
	bottom: 37%
	left: 10%
	height: 33%
	width: 80%
	background: $red
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 13%, 95% 30%, 85% 40%, 90% 60%, 50% 100%, 50% 100%, 10% 60%, 15% 40%, 5% 30%, 5% 30%, 10% 13%)
	border-radius: 5px
	z-index: 0

/* BODY */
%buttons
	border-radius: 50%
	background: $black
	height: 100%
	width: 100%

.body
	position: absolute
	bottom: 35%
	left: 30%
	height: 35%
	width: 40%

	/* UPPER */
	.upper
		position: absolute
		top: 0
		left: 20%
		height: 50%
		width: 60%
		background: $black
		-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)
	
		.white
			position: absolute
			left: 28.5%
			border-top: 55px solid #fff
			border-left: 18px solid transparent
			border-right: 18px solid transparent
			
	.buttons
		position: absolute
		left: 48%
		top: 39%
		@extend %buttons
		height: 5%
		width: 4%
		
		&::before
			@include pseudo
			@extend %buttons
			top: -8px
		&::after
			@include pseudo
			@extend %buttons
			top: 8px
			
			
	/* LOWER */
	.lower
		position: absolute
		bottom: 1%
		left: 20%
		height: 50%
		width: 60%
		background: $black
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%)
	
/* ARMS */
%arm
	position: absolute
	top: 5px
	height: 22px
	width: 40px
	background: $black
%hand
	height: 100%
	width: 12px
	background: $white

.arms
	.left
		@extend %arm
		left: 5px
	
		&::before
			@include pseudo
			@extend %hand
			left: -10px
			border-radius: 50% 0 0 50%
	
	.right
		@extend %arm
		right: 5px
	
		&::before
			@include pseudo
			@extend %hand
			right: -10px
			border-radius: 0 50% 50% 0
	
/* BAT */
%bat-wings
	top: -30px
	background: $bg
	height: 50px
	width: 110px

%wing-circles
	top: 30px
	height: 60px
	width: 70px
	background: $bg
	border-radius: 50%

%bat-ears
	bottom: 50%
	border-bottom: 35px solid $black
	
%bat-eye
	position: absolute
	top: 20%
	height: 10px
	width: 10px
	background: #fff
	border-radius: 50%
	z-index: 3

%bat-inner
	position: absolute
	top: 30%
	height: 5px
	width: 5px
	background: $red
	border-radius: 50%

%bat-eyebrows
	top: -5px
	height: 2px
	width: 5px
	background: $black

%bat-teeth
	bottom: 35%
	border-top: 5px solid #fff
	border-left: 2px solid transparent
	border-right: 2px solid transparent

.bat
	opacity: 0
	position: absolute
	top: 10%
	height: 100%
	width: 100%

	&::before
		@include pseudo
		top: -13%
		left: 40%
		height: 20%
		width: 20%
		background: $bg
		border-radius: 50%
		z-index: 1
	
.bat-body
	position: absolute
	top: 0
	left: 15%
	height: 20%
	width: 70%
	background: $black

	&::before
		@include pseudo
		@extend %bat-wings
		left: -8%
		transform: rotate(-15deg)
		
	&::after
		@include pseudo
		@extend %bat-wings	
		right: -8%
		transform: rotate(15deg)
	
.bat-wings 
	&::before
		@include pseudo
		@extend %wing-circles
		left: 25px
		box-shadow: 66px 22px 0 $bg
		
	&::after
		@include pseudo
		@extend %wing-circles
		right: 25px
		box-shadow: -66px 22px 0 $bg

.bat-head
	position: absolute
	left: 45%
	height: 45px
	width: 10%
	background: $black
	border-radius: 50%
	z-index: 2
	
	&::before
		@include pseudo
		@extend %bat-ears
		left: 0
		border-right: 15px solid transparent
			
	&::after
		@include pseudo
		@extend %bat-ears
		right: 0
		border-left: 15px solid transparent

.bat-eyes
	.left
		@extend %bat-eye
		left: 15%
	
		.inner
			@extend %bat-inner
			left: 25%
	
		&::before
			@include pseudo
			@extend %bat-eyebrows
			right: -2px
			transform: rotate(20deg)
			border-radius: 0 2px 2px 80%
	
	.right
		@extend %bat-eye
		right: 15%
	
		.inner
			@extend %bat-inner
			right: 25%
	
		&::before
			@include pseudo
			@extend %bat-eyebrows
			left: -2px
			transform: rotate(-20deg)
			border-radius: 2px 0 80% 2px
	
	&:before
		@include pseudo
		@extend %bat-teeth
		left: 30%
		
	&:after
		@include pseudo
		@extend %bat-teeth
		right: 30%
	
	
@keyframes disappear
	100%
		opacity: 1
		transform-origin: top
		transform: scale(1) rotate(0)
	70% 
		opacity: 1
		transform-origin: top
		transform: scale(1) rotate(0)

	66%
		transform-origin: top
		transform: scale(0) rotate(360deg)
	
	25%, 65% 
		opacity: 0
		transform-origin: top
		transform: scale(0) rotate(360deg)

	24%
		transform-origin: top
		transform: scale(0) rotate(360deg)
	
	20% 
		opacity: 1
		transform-origin: top
		transform: scale(1) rotate(0)
	
		
	
@keyframes appear
	100%
		opacity: 0
		transform-origin: top
		transform: scale(0) rotate(0)
	70% 
		opacity: 0
		transform-origin: top
		transform: scale(0) rotate(0)

	66%
		transform-origin: top
		transform: scale(1) rotate(360deg)
	
	25%, 65% 
		opacity: 1
		transform-origin: top
		transform: scale(1) rotate(360deg)

	24%
		transform-origin: top
		transform: scale(1) rotate(360deg)
	
	20% 
		opacity: 0
		transform-origin: top
		transform: scale(0) rotate(0)
		

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console