UPGRADE YOUR business for less than $5 per month!

* LIMITED TIME OFFER *
UPGRADE YOUR business for less than $5 per month!

CSS3 Animated Robot

Funny CSS robot free for your use, just copy the code and paste it in to your site. Enjoy!

CSS3 Tricks | Free Online Web & SEO Tools

CSS3 Animated Robot

| | | | | | | | |

+

+

+

+

+

+

To add the robot to your site - Copy/Paste the following code to your site:

<style>@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');.text{font-family:'Press Start 2P',cursive;}#robotcanvas{margin:0 auto;height:500px;width:500px;position:relative;zoom:125%;margin-top:0px;padding-right:30px;background-color:#222;}#element-1-1{margin:0 auto;height:20px;width:20px;border-radius:50%;border:2px solid #FFFFFF;position:absolute;left:238px;top:60px;}#element-1-3{width:40px;height:25px;border-radius:50%;border-top:3px dotted #fff9aa;position:absolute;left:230px;top:30px;}#element-1-4{width:30px;height:20px;border-radius:50%;border-top:3px dotted #FFFFFF;position:absolute;left:235px;top:40px;}#element-1-5{width:20px;height:10px;border-radius:50%;border-top:3px dotted #FFFFFF;position:absolute;left:240px;top:50px;}#element-1-6{ width:0;height:45px;position:absolute;left:249px;top:83px;border-left:2px dotted #fff9aa;}#element-1-7{margin:0 auto;height:90px;width:120px;border-radius:10px;border:2px solid #fff9aa;position:absolute;left:189px;top:127px;}#element-1-8{margin:0 auto;height:20px;width:20px;border-radius:50%;border:2px solid #FFFFFF;position:absolute;left:216px;top:142px;text-align:center;color:#fff;font-size:small;line-height:inherit;}#element-1-9{margin:0 auto;height:20px;width:20px;border-radius:50%;border:2px solid #FFFFFF;position:absolute;left:261px;top:142px;text-align:center;color:#fff;font-size:small;line-height:inherit;}#element-1-10{margin:0 auto;height:30px;width:30px;border-radius:50%;border:2px dotted #FFFFFF;position:absolute;left:211px;top:137px;-webkit-animation:spin 2.5s linear infinite;-moz-animation:spin 2.5s linear infinite;animation:spin 2.5s linear infinite;}#element-1-11{margin:0 auto;height:30px;width:30px;border-radius:50%;border:2px dotted #fff9aa;position:absolute;left:256px;top:137px;-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;animation:spin 5s linear infinite;}#element-1-12{margin:0 auto;height:40px;width:20px;border-radius:10px;border-left:2px solid #fff9aa;border-top:2px solid #fff9aa;border-bottom:2px solid #fff9aa;position:absolute;left:169px;top:150px;}#element-1-13{margin:0 auto;height:40px;width:20px;border-radius:10px;border-right:2px solid #fff9aa;border-top:2px solid #fff9aa;border-bottom:2px solid #fff9aa;position:absolute;left:312px;top:150px;}#element-1-14{width:0;height:0;border-top:5px solid transparent;border-right:35px solid #FFFFFF;border-bottom:5px solid transparent;position:absolute;left:135px;top:167px;}#element-1-15{width:0;height:0;border-top:5px solid transparent;border-left:35px solid #FFFFFF;border-bottom:5px solid transparent;position:absolute;left:334px;top:167px;}#element-1-16{margin:0 auto;height:14px;width:14px;border-radius:50%;border:2px solid #FFFFFF;position:absolute;left:370px;top:163px;}#element-1-17{margin:0 auto;height:14px;width:14px;border-radius:50%;border:2px solid #FFFFFF;position:absolute;left:117px;top:163px;}#element-1-18{margin:0 auto;height:10px;width:10px;border-radius:50%;border:2px solid #fff9aa;position:absolute;left:390px;top:165px;}#element-1-19{margin:0 auto;height:10px;width:10px;border-radius:50%;border:2px solid #fff9aa;position:absolute;left:101px;top:165px;}#element-1-20{margin:0 auto;height:17px;width:86px;border-radius:10px;border:2px solid #FFFFFF;position:absolute;left:205px;top:184px;color:#FFFFFF;text-align:center;font-size:9px;}#element-1-21{width:0;height:30px;position:absolute;left:271px;top:97px;border-left:2px dotted #fff;}#element-1-22{width:0;height:30px;position:absolute;left:226px;top:97px;border-left:2px dotted #fff;}#element-1-24{margin:0 auto;height:90px;width:160px;border-radius:10px;border:2px solid #FFFFFF;position:absolute;left:169px;top:229px;}#element-1-25{margin:0 auto;height:46px;width:46px;border-radius:50%;border:5px dotted #FFFFFF;position:absolute;left:189px;top:239px;color:#FFFFFF;text-align:center;font-size:38px;font-weight:bold;-webkit-animation:spin 4s ease-in-out infinite;-moz-animation:spin 4s ease-in-out infinite;animation:spin 4s ease-in-out infinite; font-size:27px;}#element-1-26{ margin:0 auto;height:30px;width:30px;border-radius:50%;border:5px dotted #FFFFFF;position:absolute;left:247px;top:262px;color:#FFFFFF;text-align:center;font-size:26px;font-weight:bold;-webkit-animation:spin 2s ease-in-out infinite;-moz-animation:spin 2s ease-in-out infinite;animation:spin 2s ease-in-out infinite;}#element-1-27{margin:0 auto;height:20px;width:20px;border-radius:50%;border:5px dotted #fff9aa;position:absolute;left:278px;top:264px;color:#FFFFFF;text-align:center;font-size:18px;font-weight:bold;-webkit-animation:spin 4s ease-in-out infinite;-moz-animation:spin 4s ease-in-out infinite;animation:spin 4s ease-in-out infinite;}#element-1-28{margin:0 auto;height:14px;width:14px;border-radius:50%;border:5px dotted #fff9aa;position:absolute;left:235px;top:284px;color:#FFFFFF;text-align:center;font-size:13px;font-weight:bold;-webkit-animation:spin 2s ease-in-out infinite;-moz-animation:spin 2s ease-in-out infinite;animation:spin 2s ease-in-out infinite;}#element-1-29{ margin:0 auto;height:40px;width:20px;border-radius:10px;border-right:2px solid #FFFFFF;border-top:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;position:absolute;left:333px;top:252px;}#element-1-30{margin:0 auto;height:30px;width:20px;border-radius:10px;border-right:2px solid #fff9aa;border-top:2px solid #fff9aa;border-bottom:2px solid #fff9aa;position:absolute;left:353px;top:256px;}#element-1-31{margin:0 auto;height:20px;width:30px;border-radius:10px;border:2px solid #FFFFFF;position:absolute;left:373px;top:261px;}#element-1-32{ margin:0 auto;height:70px;width:14px;border-radius:5px;border:2px solid #FFFFFF;position:absolute;left:381px;top:283px;}#element-1-33{ margin:0 auto;height:40px;width:20px;border-radius:10px;border-left:2px solid #FFFFFF;border-top:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;position:absolute;left:147px;top:252px;}#element-1-34{margin:0 auto;height:30px;width:20px;border-radius:10px;border-left:2px solid #FFFFFF;border-top:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;position:absolute;left:126px;top:256px;}#element-1-35{margin:0 auto;height:20px;width:30px;border-radius:10px;border:2px solid #fff9aa;position:absolute;left:94px;top:261px;}#element-1-36{margin:0 auto;height:50px;width:14px;border-radius:5px;border:2px solid #fff9aa;position:absolute;left:102px;top:209px;}#element-1-37{margin:0 auto;height:30px;width:200px;border-radius:10px;border:2px solid #fff9aa;position:absolute;left:149px;top:336px;}#element-1-38{margin:0 auto;height:20px;width:20px;border-radius:50%;border:2px solid #fff9aa;position:absolute;left:239px;top:341px;color:#FFFFFF;text-align:center;font-size:17px;font-weight:bold;-webkit-animation:spin 8s ease-in-out infinite;-moz-animation:spin 8s ease-in-out infinite;animation:spin 8s ease-in-out infinite;}#element-1-39{margin:0 auto;height:20px;width:20px;border-radius:50%;border:2px solid #fff9aa;position:absolute;left:209px;top:341px;color:#fff9aa;text-align:center;font-size:17px;font-weight:bold;-webkit-animation:spin 4s ease-in-out infinite;-moz-animation:spin 4s ease-in-out infinite;animation:spin 4s ease-in-out infinite;}#element-1-40{margin:0 auto;height:20px;width:20px;border-radius:50%;border:2px solid #fff9aa;position:absolute;left:179px;top:341px;color:#FFFFFF;text-align:center;font-size:17px;font-weight:bold;-webkit-animation:spin 8s ease-in-out infinite;-moz-animation:spin 8s ease-in-out infinite;animation:spin 8s ease-in-out infinite;}#element-1-41{margin:0 auto;height:20px;width:20px;border-radius:50%;border:2px solid #fff9aa;position:absolute;left:269px;top:341px;color:#fff9aa;text-align:center;font-size:17px;font-weight:bold;-webkit-animation:spin 4s ease-in-out infinite;-moz-animation:spin 4s ease-in-out infinite;animation:spin 4s ease-in-out infinite;}#element-1-42{margin:0 auto;height:20px;width:20px;border-radius:50%;border:2px solid #FFFFFF;position:absolute;left:299px;top:341px;color:#FFFFFF;text-align:center;font-size:17px;font-weight:bold;-webkit-animation:spin 8s ease-in-out infinite;-moz-animation:spin 8s ease-in-out infinite;animation:spin 8s ease-in-out infinite;}#element-1-43{margin:0 auto;height:40px;width:210px;border-radius:15px;border:2px dotted #fff9aa;position:absolute;left:144px;top:331px;}#element-1-44{width:30px;height:20px;border-radius:50%;border-top:3px dotted #fff9aa;position:absolute;left:96px;top:199px;}#element-1-45{width:30px;height:20px;border-radius:50%;border-bottom:3px dotted #FFFFFF;position:absolute;left:375px;top:343px;}#element-1-45{margin:0 auto;height:30px;width:50px;border-radius:10px;border-bottom:2px solid #fff9aa;position:absolute;left:186px;top:378px;}#element-1-46{margin:0 auto;height:30px;width:50px;border-radius:10px;border-bottom:2px solid #FFFFFF;position:absolute;left:266px;top:378px;}#element-1-47{margin:0 auto;height:20px;width:30px;border-radius:10px;border:2px solid #fff9aa;position:absolute;left:275px;top:380px;}#element-1-48{margin:0 auto;height:20px;width:30px;border-radius:10px;border:2px solid #FFFFFF;position:absolute;left:194px;top:380px;}@-moz-keyframes spin{100%{-moz-transform:rotate(360deg);}}@-webkit-keyframes spin{100%{-webkit-transform:rotate(360deg);}}@keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@media only screen and (max-width:600px){ #robotcanvas{margin:0 auto;height:500px;width:500px;position:relative;zoom:50%;margin-top:0px;padding-right:30px;background-color:#222;}}</style><div id="robotcanvas"><div id="element-1-1"></div><div id="element-1-2"></div><div id="element-1-3"></div><div id="element-1-4"></div><div id="element-1-5"></div><div id="element-1-6"></div><div id="element-1-7"></div><div id="element-1-8"></div><div id="element-1-9"></div><div id="element-1-10"></div><div id="element-1-11"></div><div id="element-1-12"></div><div id="element-1-13"></div><div id="element-1-14"></div><div id="element-1-15"></div><div id="element-1-16"></div><div id="element-1-17"></div><div id="element-1-18"></div><div id="element-1-19"></div><div id="element-1-20">| | | | | | | | |</div><div id="element-1-21"></div><div id="element-1-22"></div><div id="element-1-23"></div><div id="element-1-24"></div><div id="element-1-25">+</div><div id="element-1-26"></div><div id="element-1-27"></div><div id="element-1-28"></div><div id="element-1-29"></div><div id="element-1-30"></div><div id="element-1-31"></div><div id="element-1-32"></div><div id="element-1-33"></div><div id="element-1-34"></div><div id="element-1-35"></div><div id="element-1-36"></div><div id="element-1-37"></div><div id="element-1-38">+</div><div id="element-1-39">+</div><div id="element-1-40">+</div><div id="element-1-41">+</div><div id="element-1-42">+</div><div id="element-1-43"></div><div id="element-1-44"></div><div id="element-1-45"></div><div id="element-1-46"></div><div id="element-1-47"></div><div id="element-1-48"></div><div id="element-1-49"></div><div id="element-1-50"></div><div id="element-1-51"></div><div id="element-1-52"></div><div id="element-1-53"></div><div id="element-1-54"></div><div id="element-1-55"></div><div id="element-1-56"></div><div id="element-1-57"></div><div id="element-1-58"></div><div id="element-1-59"></div><div id="element-1-50"></div></div>

Tags: CSS CSS tricks CSS3

Influence of Artificial Intelligence in Web Design & Development

How to Make Your Website More Converting?

Best Websites For Learning Front-End Development

Choosing The Right Web Hosting Provider

Top 10 Web Design Trends for 2019

Skills You Need To Become a Front-end Developer

‘Elementor Form - Custom Webhook’ plugin

Domain Sale! from $0.99!

CSS3-Generator Text-Shadow

CSS3 Tricks

CSS3 Generator – Text Shadow

CSS3 Generator Text Shadow Generator With our CSS3 Button Generator you’ll be able to add text-shadow property to any text. Use the options below to design your text shadow – Copy the CSS code and add

css compressor

CSS3 Tricks

CSS Compressor

CSS Compressor Compressed CSS means a faster loading website which all equates to a better visitor experience to your site. Equally as important is that Google now factors in load times into your sites page

word counter tool

Free Online Web & SEO Tools

Word Counter Tool

Word Counter One of the most important factors in improving your SEO is to get quality backlinks. One of the best ways to get those backlinks is to submit articles to high PR ranking article

dns_lookup

Free Online Web & SEO Tools

DNS Lookup

Our DNS Lookup tool allows you to check all dns records of any domain name. Look for domain NS, A, AAAA, MX, SOA, TXT and more.

ip lookup

Free Online Web & SEO Tools

What’s my IP?

What’s my IP? An IP address is assigned to every computer on an Ethernet network. Like the street address for your home, an IP address identifies network computers. It helps traffic flow between computers because

CSS3-Generator Box-Shadow

CSS3 Tricks

CSS3 Generator – Box Shadow

CSS3 Generator – Box Shadow The box shadow property attaches shadows to an HTML elements (eg. DIV, SPAN and so). Copy the CSS code and add it to your style. To add this tool to

elementor-pro-‘Elementor-Form-Custom-Webhook’-plugin

Free Online Web & SEO Tools

‘Elementor Form – Custom Webhook’ plugin

Redirect FORM parameters to URLs that use GET function to display page content.

whatsapp

Free Online Web & SEO Tools

Send WhatsApp message to any number

Use the form to send WhatsApp message without saving the contact.

pure css cute robot

CSS3 Tricks

CSS3 Animated Robot

Funny CSS robot free for your use, just copy the code and paste it in to your site. Enjoy!

CSS3-Generator Button-Generator

CSS3 Tricks

CSS3 Generator – Button Generator

CSS3 Button Generator With our CSS3 Button Generator you’ll be able to create beautiful CSS buttons and to add them to your site, landing page, Email Template and more. Use the options below to design

ip lookup

Free Online Web & SEO Tools

Domain IP Lookup

Domain IP Lookup There are times you may want to find the IP address associated with a domain name – our free tool can find the IP (or multiple IP addresses) associated with any domain

BuyDomain.Name

Free Online Web & SEO Tools

Domain Sale! from $0.99!

SALE!!! SALE!!! SALE!!!
*** FROM $0.99 PER DOMAIN NAME ***
https://buydomain.name/
*Sale pricing for new domain registrations only, not for renewals or transfers.Sale Pricing ends at 12/31/2019

.ico generator

Free Online Web & SEO Tools

Favicon Maker

Favicon Maker Favicon (Favorite Icon) is a small graphic that is associated with a page or Web site. The favicon allows the web developer to customize the site in the Web browser, both in the

CSS3-Generator Linear-box-Gradient

CSS3 Tricks

CSS3 Generator – Linear box Gradient

CSS3 Generator – Linear box Gradient Our CSS3 gradient generator allow you to display smooth transitions between two colors on an HTML elements (eg. DIV, BUTTON and so). by using CSS3 gradient you can reduce

CSS3-Generator Border-Radius

CSS3 Tricks

CSS3 Generator – Border Radius

CSS3 Generator – Border Radius The border-radius property is a shorthand property for setting the four corners of an HTML elements (eg. DIV, SPAN and so). Copy the CSS code and add it to your

htaccess generator

Free Online Web & SEO Tools

.htaccess Re-Direct Generator

htaccess Re-Direct Generator The tool generates .htaccess code to redirect www to non-www URLs, or to redirect visitors from the non-www to www version of your domain. The Redirect Generator uses search engine friendly 301

domain history

Free Online Web & SEO Tools

Domain Age Checker

Domain Age Checker A major factor in page ranking is the age of a domain – the older the domain the more ‘trustworthy’ it will appear in search engine algorithms. Whether you are just checking