Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2013
    Location
    OR
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts

    How to Create this Animated Effect?

    I've been looking around and doing a lot of research about what I like and do not like. I came across this website and really like one of the ideas they have. The link can be found below:

    http://www.csszengarden.com/215/

    I really like the animated "light" around the robot. I am working on a brewery website and I think it would be cool to have a beer glass image with that light or similar kind of light surrounding the glass just like in the Robot image.

    Any ideas?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    The secret starts at line 169 in http://www.csszengarden.com/215/215.css?v=8may2013 and goes all the way down to line 268 and the actual magic is initialized in the rule starting at line 329 (most of it is repetitions for different rendering engines since this feature is still experimental), although that could as well be combined with the rule that adds the image on line 551.

  • #3
    New Coder
    Join Date
    Dec 2013
    Location
    OR
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Thank you for the info VIPStephan. I tried to paste some of the code into my page and nothing is working.

    I am an ultra-beginner so I'm thinking this sort of thing might be out of my league for now!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    No, it isn’t that hard. As a simple test case create an element (say, a div with ID “test”) and copy the CSS from that site, from line 169 to line 248, then lines 329–334 and lines 551–561.

    You’ll notice that lines 329 and 551 actually apply to the same element so these two rules can be combined like so:
    Code:
    aside:before {
      -webkit-animation: spin 8s infinite linear;
      -moz-animation: spin 8s infinite linear;
      -ms-animation: spin 8s infinite linear;
      -o-animation: spin 8s infinite linear;
      background: url('../images/starburst.png') center top no-repeat;
      background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOTIyLjU3NHB4IiBoZWlnaHQ9IjkyMS4wNzJweCIgdmlld0JveD0iMCAwIDkyMi41NzQgOTIxLjA3MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTIyLjU3NCA5MjEuMDcyIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNzQ1Ljk0NSw4MjkuMDQyIDUxNS4wNzIsNTc3LjIyMiA1NzIuNjM1LDkxMy45NzIgNDY0LjE0Niw1OTAuMDIgMzc5Ljc2Myw5MjEuMDcyIDQxMi40MjEsNTgwLjk5OSANCgkyMDAuNjgyLDg0OS4xMDggMzY4LjgzNSw1NTEuNzIxIDY2LjM1Miw3MTAuNTI2IDM0MC45MjgsNTA3LjIzOSAwLDUyOS4yOTEgMzMzLjUyLDQ1NS4yNTYgMTMuMTAxLDMzNi43MzEgMzQ3Ljg5Niw0MDQuNzU2IA0KCTEwMy4zOTMsMTY2LjE1MyAzODEuNTc2LDM2NC40NzEgMjU1LjI1Nyw0Ny4wNDUgNDI4LjcyNCwzNDEuMzY2IDQ0Mi40MzYsMCA0ODEuMTk3LDMzOS40MzUgNjMyLjU2NiwzMy4xNTcgNTI5LjkyLDM1OS4wMTIgDQoJNzkyLjc3NiwxNDAuNzgyIDU2Ni40NjgsMzk2LjcxNCA4OTUuMzU2LDMwNC4yNjQgNTg0LjUxNCw0NDYuMDIxIDkyMi41NzQsNDk1LjMzNiA1ODAuOTUxLDQ5OC40MDkgODY5LjcyNCw2ODAuOTY0IA0KCTU1Ni4zODgsNTQ0LjgxNSAiLz4NCjwvc3ZnPg0K') center top no-repeat;
      content: '';
      height: 921px;
      left: 50%;
      margin-left: -461.5px;
      position: fixed;
      top: 60px;
      width: 923px;
    }
    Now change the CSS to match your HTML:
    Code:
    #test {
      -webkit-animation: spin 8s infinite linear;
      -moz-animation: spin 8s infinite linear;
      -ms-animation: spin 8s infinite linear;
      -o-animation: spin 8s infinite linear;
      background: url('../images/your_image.png') center top no-repeat;
      content: '';
      height: ???px;
      left: 50%;
      margin-left: ???px; /* half of width */
      position: fixed;
      top: 60px;
      width: ???px;
    }
    And that should do the trick.

  • #5
    New Coder
    Join Date
    Dec 2013
    Location
    OR
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Still can't seem to get this to work..

    Is this what you're talking about?

    Code:
    <!DOCTYPE html>
    <html>
    <style><div id="test" style="width:500px">
    
    #test {
      -webkit-animation: spin 8s infinite linear;
      -moz-animation: spin 8s infinite linear;
      -ms-animation: spin 8s infinite linear;
      -o-animation: spin 8s infinite linear;
      background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9E7dFHOPfWav7lVQeNKl-3UrmmnzeyNuc5pc42jJA8D1AoREsKQ") center top no-repeat;
      
      height: 500px;
      left: 50%;
      margin-left: 500px; /* half of width */
      position: fixed;
      top: 60px;
      width: 500px;
    }
    	<head>
    		
    	</head>
    	<body></body>
    </html>

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Oh come on, don’t pretend to be more stupid than you really are. Before you try to implement advanced CSS techniques you should at least be familiar with the basic set-up of an HTML document. A typical HTML document consists of a root element (<html>) containing a document header (<head>) and body (<body>). All elements need to be properly closed (<div></div>) and nested (e. g. <strong><em></em></strong>, not <strong><em></strong></em>).

    The visible content of an HTML document belongs into the body, the header is only for meta information, styles, and scripts (and those belong inside the head, not outside, before or after).

    If you’ve got the basic mark-up right then you should also read my post again, especially the part where I wrote:
    copy the CSS from that site, from line 169 to line 248


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •