Create 404 error page motion with CSS3

Home » Tip » Create 404 error page motion with CSS3

One of Google's new update features to customize 404 error page. 404 (404 error) is a very common error messages, to inform the user when a web address is not found. Failure to find the things you want is an angry, to avoid annoying when readers get a message 404 dry sites often create a custom error page is beautiful or funny. This article Hong Hoa Vi will guide create a simple error page with an animation entirely in CSS3.

Be sure to check out the demo before you started to work offline

How do

1. Upgrade to a new type of interface, go to Settings / Search preferences and find a Custom Page Not Found click Edit. Click to enlarge offline

2. Copy the code below into the window that appears and click the Save is complete

<div class="box"><div class="cover_pan"></div></div>
<style type='text/css'>
.box{background:url(https://lh3.googleusercontent.com/--Spv9VuEKYE/T3WIVthTICI/AAAAAAAAC3E/o1Ng-OEp5SA/s1600/rect2996.png) no-repeat 0 0;height:486px}
.cover_pan{background:#fff url(https://lh4.googleusercontent.com/--KGP4XXtrTM/T3WIWNH6-bI/AAAAAAAAC3I/zaRC49pVYf8/s1600/image2993.png) repeat 1055px bottom;height:486px;margin-left:1px;overflow:hidden;position:relative;width:99.5%;z-index:-1;-moz-animation-name:pan;-moz-animation-duration:40s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-webkit-animation-name:pan;-webkit-animation-duration:40s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}
@-moz-keyframes pan{0%{background-position:1338px bottom}
100%{background-position:left bottom}
}
@-webkit-keyframes pan{0%{background-position:1338px bottom}
100%{background-position:left bottom}
}
</style>

Guide customization

If you do not like customization, it is enough but if you are "vóc doctor" and want to edit something, follow the instructions below. The idea here is to create two classes, a class photo on the mask (classbox ) and the background image layer motion (class cover_pan ).

1. Dimensions

You can completely customize the size of the class box and class cover_pan depending on the size of the image and the size of your blog.

2. Photo

In the above code has 2 photos, a class box background image and a background image of classcover_pan . Currently, both of these two images 800px size match the size Blog Design but you can also change the second photo.

For class photo box is required gif or png opacity necessary to mask the cover. Photos classarbitrary cover_pan , you can select any image as long as the size matches.

2. Speed

Here we give the background horizontal run continuously with endless loop. Movement speed is 40s.There are many things you can change, but I raised this discovery for you. Try to learn a little about CSS3 and seek Google directions!

I wish you success

Source by: Hong Hoa Vi

0 commentaires

Accueil