Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .baymax
	.head
		.eyes
	.body
	.hand
		.finger
              
            
!

CSS

              
                $border = 12px solid #000



body
	display flex
	justify-content center
	align-items center
	min-height 100vh
	background-color #FbF9F9
	
.baymax
	animation baymax 5s infinite ease-in-out
	position relative
	overflow hidden
	width 405px
	height @width
	background-color #DD2C2A
	border-radius 50%
	border $border
	&:after
		content ''
		border-radius 50%
		box-shadow inset 0 -35px 0 rgba(#000, .2)
		position absolute
		z-index 3
		width 405px
		height @width
	


.head
	animation head 5s infinite cubic-bezier(0.230, 1.000, 0.320, 1.000)
	position absolute
	z-index 2
	width 210px
	height 170px
	border-radius 50%
	background-color #FFF
	border $border
	left 50%
	
.eyes
	position absolute
	top 60%
	left 50%
	transform translateX(-50%)
	width 100px
	display flex
	justify-content space-between
	background-color #000
	height 2px
	&:before
	&:after
		content ''
		background-color #000
		width 24px
		height @width
		border-radius 50%
	&:before
		transform translate(-50%, -60%) skewX(-5deg)
	&:after
		transform translate(50%, -60%) skewX(5deg)
	
.body
	animation body 5s infinite cubic-bezier(0.230, 1.000, 0.320, 1.000)
	position absolute
	overflow hidden
	bottom 0
	left 50%
	width 250px
	height 280px
	background-color #FFF
	border-radius 50% 50% 0 0
	border $border
	border-bottom-width 0
	
	
.hand
	animation hand 5s infinite ease
	position absolute
	z-index 1
	left 38px
	border $border
	width 70px
	height 130px
	background-color #FFF
	border-radius @width @width 0 0
		
.finger
	animation finger 5s infinite ease
	position absolute
	left 50%
	width 18px
	height 60px
	border-radius (@width*2) (@width*2) 0 0
	border $border
	border-bottom-width 0
	background-color #FFF
	transform translateX(-50%)
	&:before
	&:after
		position absolute
		bottom -6px
		content ''
		background-color #000
		width 12px
		height @width
		border-radius 50%
	&:before
		left -12px
	&:after
		right -12px
		
		

		
@keyframes baymax
	0%, 3%
		transform scale(0)
		filter blur(5px)
	11%, 82%
		transform scale(1)
		filter blur(0)
	93%, 100%
		transform scale(0)
		filter blur(5px)

@keyframes head
	0%, 11%
		transform translateX(-50%)
		bottom -100%
	39%, 92%
		bottom 170px
		transform translateX(-50%)
	93%, 100%
		bottom 170px
		transform scale(2) translateX(-50%)
		
@keyframes body
	0%, 13%
		transform translateX(-50%)
		bottom -100%
	39%, 92%
		bottom 0px
		transform translateX(-50%)
	93%, 100%
		bottom 0px
		transform translateX(-50%)
		
@keyframes hand
	0%, 40%
		bottom -100%
	62%, 93%
		bottom 0px
	100%
		bottom 0px

@keyframes finger
	0%, 50%
		top -16px
	62%, 93%
		top -50px
	100%
		top -50px
              
            
!

JS

              
                
              
            
!
999px

Console