Bowl of Trees

Developer

Size

6,121 Kb

Views

38,456

Bowl of Trees Previews
Bowl of Trees HTML Codes
Bowl of Trees CSS Codes
Bowl of Trees JS Codes

How do I make an bowl of trees?

Give the bowl a hover ;)! Uses random so that every time you'll get a different grouping of trees, with different colors, and different animation speeds. Graph #3 by Jordan Kasten-Krause. What is a bowl of trees? How do you make a bowl of trees? This script and codes were developed by Katy DeCorah on 28 July 2022, Thursday.

Bowl of Trees Previews

Bowl of Trees - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bowl of Trees</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/8e2eaced137c3f2e0ae4991a7.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bowl of Trees - Script Codes CSS Codes

body { background: -webkit-radial-gradient(#dddddd, #999999); background: radial-gradient(#dddddd, #999999); font-size: 120%; overflow: hidden;
}
body:before { content: "Graph #3 by Jordan Kasten-Krause (Dribbble shot)"; position: absolute; padding: 0.5em; font-size: 0.5em; font-family: sans-serif; bottom: 0; left: 0;
}
ul { width: 10em; position: relative; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-animation: start 0.75s cubic-bezier(0.17, 0.67, 0.52, 1.1) forwards; animation: start 0.75s cubic-bezier(0.17, 0.67, 0.52, 1.1) forwards;
}
ul:after { content: ""; position: absolute; width: 10em; height: 5em; border-radius: 0 0 10em 10em; top: 100%; background: -webkit-radial-gradient(#dddddd, #999999) 1em 0.5em; background: radial-gradient(#dddddd, #999999) 1em 0.5em; box-shadow: 0 0.1em 0.2em rgba(34, 34, 34, 0.2); border: 1px solid rgba(0, 0, 0, 0.05);
}
ul:hover { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s;
}
li { border-style: solid; border-color: transparent; position: absolute; bottom: 0; -webkit-transform-origin: bottom; transform-origin: bottom;
}
ul:hover li { bottom: 200em;
}
li:nth-child(1) { border-width: 4em 2em; border-bottom-color: rgba(26, 29, 160, 0.7); left: 3em; -webkit-animation: grow 2s infinite alternate ease-in-out 1s; animation: grow 2s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(1) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(2) { border-width: 4em 2em; border-bottom-color: rgba(26, 78, 160, 0.2); left: 4em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(2) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(3) { border-width: 1em 2em; border-bottom-color: rgba(94, 26, 160, 0.1); left: 4em; -webkit-animation: grow 3s infinite alternate ease-in-out 3s; animation: grow 3s infinite alternate ease-in-out 3s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(3) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(4) { border-width: 2em 2em; border-bottom-color: rgba(26, 51, 160, 0.7); left: 5em; -webkit-animation: grow 1s infinite alternate ease-in-out 1s; animation: grow 1s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(4) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(5) { border-width: 2em 1em; border-bottom-color: rgba(26, 96, 160, 0.6); left: 5em; -webkit-animation: grow 1s infinite alternate ease-in-out 2s; animation: grow 1s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(5) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(6) { border-width: 5em 1em; border-bottom-color: rgba(26, 160, 157, 0.7); left: 3em; -webkit-animation: grow 2s infinite alternate ease-in-out 3s; animation: grow 2s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(6) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(7) { border-width: 2em 1em; border-bottom-color: rgba(26, 45, 160, 0.5); left: 1em; -webkit-animation: grow 1s infinite alternate ease-in-out 2s; animation: grow 1s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(7) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(8) { border-width: 2em 2em; border-bottom-color: rgba(45, 26, 160, 0.4); left: 1em; -webkit-animation: grow 2s infinite alternate ease-in-out 1s; animation: grow 2s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(8) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(9) { border-width: 3em 1em; border-bottom-color: rgba(47, 26, 160, 0.2); left: 4em; -webkit-animation: grow 2s infinite alternate ease-in-out 1s; animation: grow 2s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(9) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(10) { border-width: 5em 2em; border-bottom-color: rgba(26, 38, 160, 0.3); left: 1em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.9s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.9s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(10) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(11) { border-width: 5em 1em; border-bottom-color: rgba(26, 103, 160, 0.2); left: 3em; -webkit-animation: grow 5s infinite alternate ease-in-out 1s; animation: grow 5s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(11) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(12) { border-width: 2em 2em; border-bottom-color: rgba(26, 107, 160, 0.1); left: 4em; -webkit-animation: grow 5s infinite alternate ease-in-out 2s; animation: grow 5s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(12) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(13) { border-width: 5em 2em; border-bottom-color: rgba(26, 31, 160, 0.8); left: 1em; -webkit-animation: grow 1s infinite alternate ease-in-out 3s; animation: grow 1s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(13) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(14) { border-width: 2em 2em; border-bottom-color: rgba(26, 160, 143, 0.2); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 2s; animation: grow 5s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(14) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(15) { border-width: 5em 1em; border-bottom-color: rgba(59, 26, 160, 0.6); left: 4em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(15) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(16) { border-width: 5em 1em; border-bottom-color: rgba(26, 136, 160, 0.5); left: 1em; -webkit-animation: grow 2s infinite alternate ease-in-out 3s; animation: grow 2s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(16) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(17) { border-width: 5em 1em; border-bottom-color: rgba(88, 26, 160, 0.7); left: 3em; -webkit-animation: grow 1s infinite alternate ease-in-out 3s; animation: grow 1s infinite alternate ease-in-out 3s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(17) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(18) { border-width: 1em 1em; border-bottom-color: rgba(26, 31, 160, 0.2); left: 5em; -webkit-animation: grow 5s infinite alternate ease-in-out 3s; animation: grow 5s infinite alternate ease-in-out 3s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(18) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(19) { border-width: 3em 2em; border-bottom-color: rgba(26, 34, 160, 0.4); left: 1em; -webkit-animation: grow 5s infinite alternate ease-in-out 1s; animation: grow 5s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(19) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(20) { border-width: 4em 1em; border-bottom-color: rgba(26, 141, 160, 0.5); left: 5em; -webkit-animation: grow 3s infinite alternate ease-in-out 1s; animation: grow 3s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(20) { -webkit-transition: bottom 2s linear 0.55s; transition: bottom 2s linear 0.55s;
}
li:nth-child(21) { border-width: 1em 2em; border-bottom-color: rgba(26, 130, 160, 0.5); left: 4em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(21) { -webkit-transition: bottom 2s linear 0.95s; transition: bottom 2s linear 0.95s;
}
li:nth-child(22) { border-width: 1em 1em; border-bottom-color: rgba(26, 78, 160, 0.2); left: 5em; -webkit-animation: grow 5s infinite alternate ease-in-out 1s; animation: grow 5s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.9s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.9s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(22) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(23) { border-width: 1em 2em; border-bottom-color: rgba(26, 132, 160, 0.6); left: 3em; -webkit-animation: grow 3s infinite alternate ease-in-out 2s; animation: grow 3s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(23) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(24) { border-width: 2em 2em; border-bottom-color: rgba(26, 85, 160, 0.1); left: 5em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(24) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(25) { border-width: 1em 2em; border-bottom-color: rgba(26, 81, 160, 0.1); left: 4em; -webkit-animation: grow 3s infinite alternate ease-in-out 1s; animation: grow 3s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(25) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(26) { border-width: 4em 1em; border-bottom-color: rgba(85, 26, 160, 0.2); left: 5em; -webkit-animation: grow 2s infinite alternate ease-in-out 3s; animation: grow 2s infinite alternate ease-in-out 3s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(26) { -webkit-transition: bottom 2s linear 0.95s; transition: bottom 2s linear 0.95s;
}
li:nth-child(27) { border-width: 5em 2em; border-bottom-color: rgba(26, 125, 160, 0.4); left: 5em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(27) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(28) { border-width: 2em 2em; border-bottom-color: rgba(26, 114, 160, 0.6); left: 3em; -webkit-animation: grow 3s infinite alternate ease-in-out 1s; animation: grow 3s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(28) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(29) { border-width: 1em 1em; border-bottom-color: rgba(26, 31, 160, 0.3); left: 5em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(29) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(30) { border-width: 1em 2em; border-bottom-color: rgba(26, 114, 160, 0.4); left: 2em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(30) { -webkit-transition: bottom 2s linear 0.95s; transition: bottom 2s linear 0.95s;
}
li:nth-child(31) { border-width: 5em 1em; border-bottom-color: rgba(26, 74, 160, 0.1); left: 1em; -webkit-animation: grow 3s infinite alternate ease-in-out 2s; animation: grow 3s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(31) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(32) { border-width: 3em 1em; border-bottom-color: rgba(76, 26, 160, 0.4); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 1s; animation: grow 5s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(32) { -webkit-transition: bottom 2s linear 0.55s; transition: bottom 2s linear 0.55s;
}
li:nth-child(33) { border-width: 3em 2em; border-bottom-color: rgba(26, 112, 160, 0.2); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 3s; animation: grow 5s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(33) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(34) { border-width: 3em 1em; border-bottom-color: rgba(26, 60, 160, 0.1); left: 5em; -webkit-animation: grow 5s infinite alternate ease-in-out 2s; animation: grow 5s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(34) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(35) { border-width: 5em 2em; border-bottom-color: rgba(30, 26, 160, 0.7); left: 2em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(35) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(36) { border-width: 2em 1em; border-bottom-color: rgba(52, 26, 160, 0.5); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 2s; animation: grow 5s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(36) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(37) { border-width: 1em 2em; border-bottom-color: rgba(36, 26, 160, 0.4); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 2s; animation: grow 5s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.9s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.9s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(37) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(38) { border-width: 3em 1em; border-bottom-color: rgba(26, 87, 160, 0.8); left: 1em; -webkit-animation: grow 2s infinite alternate ease-in-out 3s; animation: grow 2s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(38) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(39) { border-width: 3em 2em; border-bottom-color: rgba(26, 96, 160, 0.6); left: 4em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(39) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(40) { border-width: 4em 2em; border-bottom-color: rgba(83, 26, 160, 0.1); left: 3em; -webkit-animation: grow 3s infinite alternate ease-in-out 3s; animation: grow 3s infinite alternate ease-in-out 3s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(40) { -webkit-transition: bottom 2s linear 0.95s; transition: bottom 2s linear 0.95s;
}
li:nth-child(41) { border-width: 2em 2em; border-bottom-color: rgba(30, 26, 160, 0.3); left: 1em; -webkit-animation: grow 2s infinite alternate ease-in-out 3s; animation: grow 2s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(41) { -webkit-transition: bottom 2s linear 0.95s; transition: bottom 2s linear 0.95s;
}
li:nth-child(42) { border-width: 2em 1em; border-bottom-color: rgba(26, 143, 160, 0.3); left: 1em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(42) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(43) { border-width: 5em 2em; border-bottom-color: rgba(36, 26, 160, 0.4); left: 5em; -webkit-animation: grow 2s infinite alternate ease-in-out 1s; animation: grow 2s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(43) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(44) { border-width: 4em 2em; border-bottom-color: rgba(26, 160, 143, 0.2); left: 3em; -webkit-animation: grow 1s infinite alternate ease-in-out 2s; animation: grow 1s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(44) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(45) { border-width: 5em 2em; border-bottom-color: rgba(47, 26, 160, 0.7); left: 1em; -webkit-animation: grow 3s infinite alternate ease-in-out 2s; animation: grow 3s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(45) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(46) { border-width: 5em 1em; border-bottom-color: rgba(26, 160, 143, 0.8); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 3s; animation: grow 5s infinite alternate ease-in-out 3s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(46) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(47) { border-width: 2em 2em; border-bottom-color: rgba(26, 160, 155, 0.7); left: 2em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(47) { -webkit-transition: bottom 2s linear 0.55s; transition: bottom 2s linear 0.55s;
}
li:nth-child(48) { border-width: 5em 1em; border-bottom-color: rgba(26, 51, 160, 0.7); left: 5em; -webkit-animation: grow 5s infinite alternate ease-in-out 2s; animation: grow 5s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(48) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(49) { border-width: 4em 2em; border-bottom-color: rgba(26, 152, 160, 0.6); left: 5em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(49) { -webkit-transition: bottom 2s linear 0.95s; transition: bottom 2s linear 0.95s;
}
li:nth-child(50) { border-width: 4em 1em; border-bottom-color: rgba(26, 110, 160, 0.7); left: 5em; -webkit-animation: grow 2s infinite alternate ease-in-out 2s; animation: grow 2s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(50) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(51) { border-width: 5em 2em; border-bottom-color: rgba(26, 160, 159, 0.8); left: 1em; -webkit-animation: grow 3s infinite alternate ease-in-out 3s; animation: grow 3s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(51) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(52) { border-width: 2em 2em; border-bottom-color: rgba(26, 105, 160, 0.5); left: 1em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(52) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(53) { border-width: 5em 2em; border-bottom-color: rgba(68, 26, 160, 0.5); left: 2em; -webkit-animation: grow 2s infinite alternate ease-in-out 1s; animation: grow 2s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(53) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(54) { border-width: 3em 2em; border-bottom-color: rgba(26, 56, 160, 0.6); left: 3em; -webkit-animation: grow 1s infinite alternate ease-in-out 1s; animation: grow 1s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(54) { -webkit-transition: bottom 2s linear 0.55s; transition: bottom 2s linear 0.55s;
}
li:nth-child(55) { border-width: 2em 1em; border-bottom-color: rgba(36, 26, 160, 0.3); left: 4em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(55) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(56) { border-width: 2em 2em; border-bottom-color: rgba(26, 123, 160, 0.8); left: 1em; -webkit-animation: grow 4s infinite alternate ease-in-out 3s; animation: grow 4s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(56) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(57) { border-width: 3em 2em; border-bottom-color: rgba(76, 26, 160, 0.5); left: 5em; -webkit-animation: grow 2s infinite alternate ease-in-out 1s; animation: grow 2s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(57) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(58) { border-width: 5em 2em; border-bottom-color: rgba(26, 83, 160, 0.2); left: 3em; -webkit-animation: grow 5s infinite alternate ease-in-out 2s; animation: grow 5s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(58) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(59) { border-width: 1em 2em; border-bottom-color: rgba(26, 105, 160, 0.8); left: 4em; -webkit-animation: grow 1s infinite alternate ease-in-out 2s; animation: grow 1s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(59) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(60) { border-width: 3em 1em; border-bottom-color: rgba(26, 29, 160, 0.5); left: 4em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(60) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(61) { border-width: 4em 2em; border-bottom-color: rgba(70, 26, 160, 0.6); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 3s; animation: grow 5s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(61) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(62) { border-width: 1em 1em; border-bottom-color: rgba(26, 156, 160, 0.1); left: 3em; -webkit-animation: grow 4s infinite alternate ease-in-out 3s; animation: grow 4s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.9s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.9s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(62) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(63) { border-width: 1em 1em; border-bottom-color: rgba(88, 26, 160, 0.6); left: 2em; -webkit-animation: grow 2s infinite alternate ease-in-out 3s; animation: grow 2s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(63) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(64) { border-width: 1em 1em; border-bottom-color: rgba(26, 56, 160, 0.8); left: 3em; -webkit-animation: grow 5s infinite alternate ease-in-out 2s; animation: grow 5s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(64) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(65) { border-width: 4em 1em; border-bottom-color: rgba(26, 34, 160, 0.4); left: 3em; -webkit-animation: grow 1s infinite alternate ease-in-out 3s; animation: grow 1s infinite alternate ease-in-out 3s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(65) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(66) { border-width: 3em 2em; border-bottom-color: rgba(26, 74, 160, 0.5); left: 5em; -webkit-animation: grow 1s infinite alternate ease-in-out 1s; animation: grow 1s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(66) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(67) { border-width: 2em 2em; border-bottom-color: rgba(26, 63, 160, 0.6); left: 4em; -webkit-animation: grow 2s infinite alternate ease-in-out 3s; animation: grow 2s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(67) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(68) { border-width: 3em 1em; border-bottom-color: rgba(26, 34, 160, 0.4); left: 3em; -webkit-animation: grow 2s infinite alternate ease-in-out 2s; animation: grow 2s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(68) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(69) { border-width: 4em 2em; border-bottom-color: rgba(81, 26, 160, 0.2); left: 2em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(69) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(70) { border-width: 3em 2em; border-bottom-color: rgba(26, 63, 160, 0.2); left: 3em; -webkit-animation: grow 3s infinite alternate ease-in-out 3s; animation: grow 3s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(70) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(71) { border-width: 2em 1em; border-bottom-color: rgba(26, 121, 160, 0.4); left: 2em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(71) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(72) { border-width: 5em 1em; border-bottom-color: rgba(88, 26, 160, 0.6); left: 1em; -webkit-animation: grow 1s infinite alternate ease-in-out 1s; animation: grow 1s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(72) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(73) { border-width: 2em 2em; border-bottom-color: rgba(26, 54, 160, 0.4); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 1s; animation: grow 5s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(73) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(74) { border-width: 2em 2em; border-bottom-color: rgba(26, 65, 160, 0.5); left: 4em; -webkit-animation: grow 2s infinite alternate ease-in-out 2s; animation: grow 2s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(74) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(75) { border-width: 1em 2em; border-bottom-color: rgba(26, 145, 160, 0.5); left: 2em; -webkit-animation: grow 3s infinite alternate ease-in-out 2s; animation: grow 3s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(75) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(76) { border-width: 5em 1em; border-bottom-color: rgba(26, 38, 160, 0.4); left: 4em; -webkit-animation: grow 3s infinite alternate ease-in-out 3s; animation: grow 3s infinite alternate ease-in-out 3s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(76) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(77) { border-width: 4em 1em; border-bottom-color: rgba(26, 143, 160, 0.1); left: 1em; -webkit-animation: grow 3s infinite alternate ease-in-out 3s; animation: grow 3s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(77) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(78) { border-width: 2em 2em; border-bottom-color: rgba(26, 121, 160, 0.4); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 3s; animation: grow 5s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.9s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.9s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(78) { -webkit-transition: bottom 2s linear 0.95s; transition: bottom 2s linear 0.95s;
}
li:nth-child(79) { border-width: 4em 1em; border-bottom-color: rgba(26, 87, 160, 0.4); left: 5em; -webkit-animation: grow 3s infinite alternate ease-in-out 3s; animation: grow 3s infinite alternate ease-in-out 3s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(79) { -webkit-transition: bottom 2s linear 0.85s; transition: bottom 2s linear 0.85s;
}
li:nth-child(80) { border-width: 1em 2em; border-bottom-color: rgba(26, 141, 160, 0.2); left: 5em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(80) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(81) { border-width: 3em 2em; border-bottom-color: rgba(26, 81, 160, 0.4); left: 5em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.6s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(81) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(82) { border-width: 1em 2em; border-bottom-color: rgba(26, 51, 160, 0.5); left: 1em; -webkit-animation: grow 4s infinite alternate ease-in-out 3s; animation: grow 4s infinite alternate ease-in-out 3s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(82) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(83) { border-width: 5em 2em; border-bottom-color: rgba(26, 78, 160, 0.4); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 1s; animation: grow 5s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(83) { -webkit-transition: bottom 2s linear 0.35s; transition: bottom 2s linear 0.35s;
}
li:nth-child(84) { border-width: 2em 1em; border-bottom-color: rgba(85, 26, 160, 0.4); left: 5em; -webkit-animation: grow 3s infinite alternate ease-in-out 2s; animation: grow 3s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(84) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(85) { border-width: 2em 2em; border-bottom-color: rgba(26, 125, 160, 0.6); left: 3em; -webkit-animation: grow 5s infinite alternate ease-in-out 1s; animation: grow 5s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(85) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(86) { border-width: 2em 2em; border-bottom-color: rgba(26, 63, 160, 0.1); left: 5em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(86) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(87) { border-width: 2em 2em; border-bottom-color: rgba(85, 26, 160, 0.7); left: 4em; -webkit-animation: grow 1s infinite alternate ease-in-out 1s; animation: grow 1s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(87) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(88) { border-width: 3em 1em; border-bottom-color: rgba(26, 139, 160, 0.2); left: 2em; -webkit-animation: grow 1s infinite alternate ease-in-out 1s; animation: grow 1s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(88) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(89) { border-width: 2em 2em; border-bottom-color: rgba(47, 26, 160, 0.8); left: 2em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(89) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(90) { border-width: 2em 1em; border-bottom-color: rgba(26, 152, 160, 0.4); left: 2em; -webkit-animation: grow 1s infinite alternate ease-in-out 3s; animation: grow 1s infinite alternate ease-in-out 3s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(90) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(91) { border-width: 3em 2em; border-bottom-color: rgba(26, 148, 160, 0.3); left: 2em; -webkit-animation: grow 2s infinite alternate ease-in-out 1s; animation: grow 2s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(91) { -webkit-transition: bottom 2s linear 0.95s; transition: bottom 2s linear 0.95s;
}
li:nth-child(92) { border-width: 3em 2em; border-bottom-color: rgba(26, 148, 160, 0.2); left: 3em; -webkit-animation: grow 3s infinite alternate ease-in-out 2s; animation: grow 3s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(92) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(93) { border-width: 1em 2em; border-bottom-color: rgba(70, 26, 160, 0.1); left: 1em; -webkit-animation: grow 4s infinite alternate ease-in-out 1s; animation: grow 4s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(93) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(94) { border-width: 1em 1em; border-bottom-color: rgba(26, 160, 148, 0.4); left: 5em; -webkit-animation: grow 4s infinite alternate ease-in-out 2s; animation: grow 4s infinite alternate ease-in-out 2s; -webkit-transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(94) { -webkit-transition: bottom 2s linear 0.45s; transition: bottom 2s linear 0.45s;
}
li:nth-child(95) { border-width: 2em 2em; border-bottom-color: rgba(88, 26, 160, 0.7); left: 2em; -webkit-animation: grow 1s infinite alternate ease-in-out 1s; animation: grow 1s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.3s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(95) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(96) { border-width: 2em 1em; border-bottom-color: rgba(26, 96, 160, 0.8); left: 4em; -webkit-animation: grow 3s infinite alternate ease-in-out 1s; animation: grow 3s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(96) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(97) { border-width: 3em 2em; border-bottom-color: rgba(26, 27, 160, 0.7); left: 2em; -webkit-animation: grow 5s infinite alternate ease-in-out 1s; animation: grow 5s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(97) { -webkit-transition: bottom 2s linear 1.05s; transition: bottom 2s linear 1.05s;
}
li:nth-child(98) { border-width: 5em 1em; border-bottom-color: rgba(63, 26, 160, 0.3); left: 1em; -webkit-animation: grow 2s infinite alternate ease-in-out 1s; animation: grow 2s infinite alternate ease-in-out 1s; -webkit-transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 1.2s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(98) { -webkit-transition: bottom 2s linear 0.65s; transition: bottom 2s linear 0.65s;
}
li:nth-child(99) { border-width: 2em 2em; border-bottom-color: rgba(52, 26, 160, 0.3); left: 2em; -webkit-animation: grow 1s infinite alternate ease-in-out 1s; animation: grow 1s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.8s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(99) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
li:nth-child(100) { border-width: 3em 2em; border-bottom-color: rgba(26, 123, 160, 0.7); left: 4em; -webkit-animation: grow 2s infinite alternate ease-in-out 1s; animation: grow 2s infinite alternate ease-in-out 1s; -webkit-transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s; transition: bottom 0.7s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.75s;
}
ul:hover li:nth-child(100) { -webkit-transition: bottom 2s linear 0.75s; transition: bottom 2s linear 0.75s;
}
@-webkit-keyframes grow { to { -webkit-transform: scale(0.5); transform: scale(0.5); }
}
@keyframes grow { to { -webkit-transform: scale(0.5); transform: scale(0.5); }
}
@-webkit-keyframes start { from { bottom: 200em; } to { bottom: 0; }
}
@keyframes start { from { bottom: 200em; } to { bottom: 0; }
}

Bowl of Trees - Script Codes JS Codes

// Dribbble shot: Graph #3 by Jordan Kasten-Krause http://dribbble.com/shots/1239406

Home Page	Home
Developer	Katy DeCorah
Username	katydecorah
Uploaded	July 28, 2022
Rating	4.5
Size	6,121 Kb
Views	38,456

Do you need developer help for Bowl of Trees?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Katy DeCorah (katydecorah) Script Codes

Name	Size
Google Font Explorer	4,632 Kb
Build a store locator with Mapbox.js	3,951 Kb
CSS Haiku - Constellations	2,488 Kb
Snowflaker 2016	3,541 Kb
Map gallery	3,652 Kb
THREES App Store Button	3,417 Kb
Twinner Spinner II	2,974 Kb
Angular Contact Form	7,343 Kb
Animation Direction	4,879 Kb
Instagram	2,837 Kb

Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Coburg Banks SVG Logo	Mjtweaver	3,875 Kb
Light Switch	Bartuc	4,933 Kb
Multicolumns 2	Raphaelgoetter	1,857 Kb
Midterm dry run	Jds317	1,649 Kb
RollOver Effect 2	Lmack90	2,162 Kb
A Pen by Dalton Liu	Liudalton	12,437 Kb
Preloader	Rikki_Sixx	2,815 Kb
Drawing a Terminal with CSS	Lachlanjc	3,185 Kb
SCSS Unit Conversion	Jakob-e	8,210 Kb
LeMandinque	Aadesida	9,046 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!