Wobbly Star

Developer
Chris Johnson
Size
4,347 Kb
Views
38,456
  1. Wobbly Star Previews
  2. Wobbly Star HTML Codes
  3. Wobbly Star CSS Codes

How do I make an wobbly star?

Quick CSS "wobble" animation. I had an idea and wanted to see how it would look with CSS animations.. What is a wobbly star? How do you make a wobbly star? This script and codes were developed by Chris Johnson on 01 October 2022, Saturday.

Wobbly Star Previews
IQ Test

Wobbly Star - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wobbly Star</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="star-container"> <svg xmlns="http://www.w3.org/2000/svg" class="star" viewBox="0 0 200 200" version="1.1"> <defs> <filter id="blurHighlight" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="7" /> </filter> <filter id="blurMids" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" /> </filter> </defs> <path id="main-shape" d="m 197.98149,74.01862 c -10.24378,17.92265 -27.46864,35.55182 -43.60206,46.61261 6.79447,18.96546 8.87595,41.26102 4.57712,67.12932 -26.89648,-6.2726 -41.80502,-14.2304 -57.80501,-27.064 -15.761293,10.9492 -39.70716,21.1389 -62.429293,25.0972 -2.576006,-20.1275 -1.080137,-43.18596 7.876597,-63.33908 C 29.195908,111.53682 12.220095,91.93035 3.4382987,70.83632 23.387994,63.08643 45.847847,59.31655 66.111313,58.75461 c 6.325068,-19.16089 20.577644,-42.15745 35.754617,-56.99907 13.36341,14.88266 24.30707,36.56496 30.85746,55.87212 20.81138,-0.31145 44.76047,5.45595 65.2581,16.39096 z" fill="#ffcc00" stroke="#181818" stroke-width="5" /> <path id="lighting-mids" d="m 177.62024,78.359873 c -8.09951,14.171015 -21.7188,28.109987 -34.47511,36.855487 5.37222,14.99554 7.018,32.62411 3.61902,53.07756 -21.26641,-4.95959 -33.05424,-11.25164 -45.70506,-21.39886 -12.462077,8.65727 -31.395507,16.71403 -49.36136,19.84376 -2.036787,-15.91434 -0.854039,-34.14611 6.227839,-50.08071 C 44.165479,108.02463 30.743106,92.522254 23.799548,75.843703 39.573299,69.716049 57.331773,66.735294 73.353616,66.290981 78.354698,51.140919 89.623872,32.958084 101.62394,21.223166 c 10.56614,11.767367 19.21903,28.911048 24.39827,44.176763 16.45506,-0.246256 35.39104,4.31389 51.59803,12.959944 z" fill="#ffdd55" filter="url(#blurMids)" /> <path id="lighting-highlights" d="m 154.60694,83.266573 c -5.67595,9.930729 -15.22005,19.698857 -24.15938,25.827497 3.76473,10.50854 4.91805,22.86225 2.53612,37.19557 -14.90302,-3.47557 -23.16367,-7.8849 -32.02907,-14.99585 -8.733148,6.06683 -22.001272,11.71282 -34.591339,13.90607 -1.427335,-11.15242 -0.598491,-23.92883 4.36433,-35.09544 -9.642762,-6.04944 -19.048861,-16.913169 -23.91475,-28.601123 11.053891,-4.294123 23.498631,-6.382969 34.72638,-6.694333 3.504646,-10.616825 11.40183,-23.358947 19.811209,-31.582515 7.40451,8.246307 13.46826,20.260214 17.09776,30.958084 11.53133,-0.172569 24.80125,3.023078 36.15874,9.082039 z" fill="#ffeeaa" filter="url(#blurHighlight)" /> <g id="face"> <ellipse cx="88.341545" cy="88.505753" rx="4.9261084" ry="11.165846" fill="#181818" /> <ellipse cx="115.59934" cy="88.505753" rx="4.9261084" ry="11.165846" fill="#181818" /> <path d="m 93.267651,116.25616 c 4.926108,-2.46736 11.494249,-2.96022 17.077169,-1.31363 -1.64203,5.58292 -4.29252,9.7255 -8.21018,10.50903 -4.926102,0.98522 -7.55336,-3.94089 -8.866989,-9.1954 z" fill="#181818" /> </g> </svg>
</div>
<div class="cta">Hover me!</div>
</body>
</html>

Wobbly Star - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:300);
body { background: #000;
}
.cta { position: absolute; left: 50%; top: 50%; color: #fff; font-family: 'Raleway', sans-serif; font-size: 30px; letter-spacing: 1px; text-transform: uppercase; -webkit-transform: translate(-50%, -50%) translateY(150px); transform: translate(-50%, -50%) translateY(150px);
}
.star-container { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.star { -webkit-animation: teeter 4000ms infinite; animation: teeter 4000ms infinite;
}
.star:hover { -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-animation: wobble 600ms 1; animation: wobble 600ms 1;
}
@-webkit-keyframes wobble { 0% { -webkit-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); } 06.25% { -webkit-transform: scaleX(1.2) scaleY(0.8); transform: scaleX(1.2) scaleY(0.8); } 18.75% { -webkit-transform: scaleX(0.8) scaleY(1.2); transform: scaleX(0.8) scaleY(1.2); } 31.25% { -webkit-transform: scaleX(1.1) scaleY(0.9); transform: scaleX(1.1) scaleY(0.9); } 43.75% { -webkit-transform: scaleX(0.9) scaleY(1.1); transform: scaleX(0.9) scaleY(1.1); } 62.50% { -webkit-transform: scaleX(1.05) scaleY(0.95); transform: scaleX(1.05) scaleY(0.95); } 81.25% { -webkit-transform: scaleX(0.95) scaleY(1.05); transform: scaleX(0.95) scaleY(1.05); } 100% { -webkit-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); }
}
@keyframes wobble { 0% { -webkit-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); } 06.25% { -webkit-transform: scaleX(1.2) scaleY(0.8); transform: scaleX(1.2) scaleY(0.8); } 18.75% { -webkit-transform: scaleX(0.8) scaleY(1.2); transform: scaleX(0.8) scaleY(1.2); } 31.25% { -webkit-transform: scaleX(1.1) scaleY(0.9); transform: scaleX(1.1) scaleY(0.9); } 43.75% { -webkit-transform: scaleX(0.9) scaleY(1.1); transform: scaleX(0.9) scaleY(1.1); } 62.50% { -webkit-transform: scaleX(1.05) scaleY(0.95); transform: scaleX(1.05) scaleY(0.95); } 81.25% { -webkit-transform: scaleX(0.95) scaleY(1.05); transform: scaleX(0.95) scaleY(1.05); } 100% { -webkit-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); }
}
@-webkit-keyframes teeter { 0% { -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 50% { -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes teeter { 0% { -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 50% { -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
Wobbly Star - Script Codes
Wobbly Star - Script Codes
Home Page Home
Developer Chris Johnson
Username jhnsnc
Uploaded October 01, 2022
Rating 4
Size 4,347 Kb
Views 38,456
Do you need developer help for Wobbly Star?

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!

Chris Johnson (jhnsnc) Script Codes
Name
Tesselation Transition
Text Effect - Optimist
HAL9000
Incremental Delaunay Triangulation Demo
Text Effect - Radius
Web Animation Test
F Loader
Headlander Title Animation
Bluemix Logo Scratch Animation
Shader Template
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!