Pure CSS animated 3D Christmas tree
A Pen by Ana Travas on CodePen.
Pure CSS animated 3D Christmas tree
A Pen by Ana Travas on CodePen.
.main-wrapper | |
.tree-container | |
.star | |
.spiral-container | |
ul.spiral.one | |
- for (var x = 1; x <=43; x++) | |
li.light-wrapper( | |
class="light-wrapper-"+x | |
) | |
.stabilise: .light | |
ul.spiral.two | |
- for (var x = 1; x <=43; x++) | |
li.light-wrapper( | |
class="light-wrapper-"+x | |
) | |
.stabilise: .light | |
ul.spiral.three | |
- for (var x = 1; x <=43; x++) | |
li.light-wrapper( | |
class="light-wrapper-"+x | |
) | |
.stabilise: .light | |
.text-container | |
h2 The best is yet to come | |
h2.happy Happy Holidays |
// ------------------------------ | |
// Sorry, no JS here :) | |
// Happy Holidays from C2 | |
// http://wearec2.com | |
// ------------------------------ |
@import url('https://fonts.googleapis.com/css?family=Nothing+You+Could+Do'); | |
@itemsize: 5px; | |
.main-wrapper { | |
background: radial-gradient(bottom, #b11919 0%, #730f0f 50%, #310606 78%); | |
position: absolute; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
.tree-container { | |
display: block; | |
height: 330px; | |
margin: 0; | |
padding: 0; | |
} | |
.text-container { | |
margin: 0; | |
padding: 0; | |
position: absolute; | |
bottom: 14%; | |
left: 15%; | |
right: 15%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
flex-direction: column; | |
text-align: center; | |
h2 { | |
color: rgba(252, 251, 233, 0.85); | |
font-size: 2vw; | |
font-family: 'Nothing You Could Do', cursive; | |
margin: 0 0 .8em 0; | |
&.happy { | |
font-size: 3.1vw; | |
margin-bottom: 0.3em; | |
} | |
} | |
a.c2 { | |
@size: 40px; | |
display: block; | |
font-size: 13px; | |
width: @size; | |
height: @size; | |
background-color: rgba(252, 251, 233, 0.8); | |
border-radius: 50%; | |
color: #8c1313; | |
text-decoration: none; | |
line-height: @size; | |
} | |
} | |
.star { | |
@dimensions: 10px; | |
@color: #f7b93f; | |
@divider: 1.3; | |
border-radius: 0; | |
border-color: @color transparent transparent transparent; | |
border-style: solid; | |
border-top-width: @dimensions / @divider; | |
border-right-width: @dimensions; | |
border-left-width: @dimensions; | |
height: 0; | |
width: 0; | |
background: transparent; | |
z-index: 100; | |
animation: pulsate-star 1.4s ease-in-out infinite alternate-reverse; | |
&:before, | |
&:after { | |
border-color: @color transparent transparent transparent; | |
border-style: solid; | |
border-top-width: @dimensions / @divider; | |
border-right-width: @dimensions; | |
border-left-width: @dimensions; | |
border-bottom: 0; | |
content: ''; | |
display: block; | |
height: 0; | |
left: -@dimensions; | |
position: absolute; | |
top: -@dimensions / @divider; | |
width: 0; | |
} | |
&:before { | |
transform: translate(15.5555555%, -15.5555555%) rotate(360deg/5) translateY(50%); | |
} | |
&:after { | |
transform: translate(-15.5555555%, -15.5555555%) rotate(-360deg/5) translateY(50%); | |
} | |
} | |
.spiral-container { | |
width: 100%; | |
height: 100%; | |
display: block; | |
} | |
.spiral { | |
position: relative; | |
margin: 0; | |
padding: 0; | |
transform-style: preserve-3d; | |
&.one { | |
animation: rotate-tree 6s infinite linear both; | |
animation-delay: -1.7s; | |
.light { | |
background: #fcfbe9; | |
} | |
} | |
&.two { | |
animation: rotate-tree 7s infinite linear both; | |
animation-delay: -1s; | |
.light { | |
background: #e8a41d; | |
} | |
} | |
&.three { | |
animation: rotate-tree 8s infinite linear both; | |
animation-delay: -0.1s; | |
.light { | |
background: #f5e393; | |
} | |
} | |
> .light-wrapper { | |
border-radius: 50%; | |
position: absolute; | |
display: block; | |
width: @itemsize; | |
height: @itemsize; | |
left: 50%; | |
top: 50%; | |
margin: -@itemsize/2 0 0 -@itemsize/2; | |
} | |
.stabilise { | |
position: absolute; | |
display: block; | |
width: 100%; | |
height: 100%; | |
} | |
.light { | |
position: absolute; | |
display: block; | |
width: 100%; | |
height: 100%; | |
border-radius: 50%; | |
top: 0; | |
left: 0; | |
border-radius: 50%; | |
opacity: 1; | |
animation-name: pulsate; | |
animation-timing-function: ease-in-out; | |
animation-iteration-count: infinite; | |
animation-direction: alternate-reverse; | |
} | |
} | |
.makespiral( @className: ~".spiral"; @itemNo:3; @degrees:0; @elNo: 1; @size: 5px; @delayOffset: 0 ) when ( @elNo <= @itemNo ) { | |
@spacing: 10; | |
@currDeg: unit(@degrees,deg); | |
@correctionDeg: unit(-@degrees,deg); | |
@y: unit(cos(@currDeg) * @elNo * @elNo / 12, px); | |
@x: unit(sin(@currDeg) * @elNo * @elNo / 12, px); | |
@z: unit(@elNo * @elNo / 7, px); | |
@duration: unit(`Math.random() * 1 + 0.3 `,s); | |
@randNo: `Math.random()`; | |
@{className} { | |
.light-wrapper.light-wrapper-@{elNo} { | |
transform: translate3d( @x, @y, @z ) rotateX(90deg) rotateZ(0deg) rotateY(@correctionDeg); | |
width: (@size * (@elNo / @itemNo) * 5); | |
height: (@size * (@elNo / @itemNo) * 5); | |
.light { | |
animation-duration: @duration; | |
animation-delay: @duration; | |
} | |
} | |
} | |
.makespiral(@className; @itemNo; @degrees + @spacing; @elNo + 1; @size; @delayOffset); | |
} | |
.makespiral(@className: ~".spiral.one"; @itemNo: 43; @size: 2px); | |
.makespiral(@className: ~".spiral.two"; @itemNo: 43; @size: 3px; @delayOffset: 1); | |
.makespiral(@className: ~".spiral.three"; @itemNo: 43; @size: 2px; @delayOffset: .5); | |
@keyframes pulsate { | |
0% { | |
transform: scale(.5); | |
opacity: .4; | |
} | |
100% { | |
transform: scale(1); | |
} | |
} | |
@keyframes pulsate-star { | |
0% { | |
transform: scale(.94); | |
opacity: .8; | |
} | |
100% { | |
transform: scale(1); | |
opacity: 1; | |
} | |
} | |
@keyframes rotate-tree { | |
0% { | |
transform: rotateX(-90deg) rotateZ(0deg) rotateY(0deg); | |
} | |
100% { | |
transform: rotateX(-90deg) rotateZ(360deg) rotateY(0deg); | |
} | |
} |
When I try to compile, I get an error.
SyntaxError: Error evaluating function
unit
: the first argument to unit must be a number. Have you forgotten parenthesis? in E:\Remote Falcon\Style.less on line 208, column 1:207
208 .makespiral(@classname: ~".spiral.one"; @itemNo: 43; @SiZe: 2px);
I'm new to css and less. Can you help?