Simple floating effect on the right bottom of pure CSS implementation, css Implementation of floating

Simple floating effect on the right bottom of pure CSS implementation, css Implementation of floating

Simple floating effect on the right bottom of pure CSS implementation

We have seen a lot of floating Effects on the right side of the page, such as QQ contact panel and Couplet advertisement. Most of them are dynamic effects based on Javascript, today, I want to share with you a floating Effect on the right side that only requires CSS and DIV.

Online Demo

Source code download

HTML

We want the final suspension effect to be loaded, so we usually place it at the end of the HTML page. side-bar, which contains QQ online consultation, (sliding the mouse to pop up the QR code), Weibo, and Email contact information. These contents are all wrapped in a <a> label.

<Div class = "side-bar">

<A href = "#" class = "icon-qq"> QQ online consulting </a>

<A href = "#" class = "icon-chat"> <div class = "chat-tips"> <I> </I>

</div> </a>

<A target = "_ blank" href = "" class = "icon-blog"> Weibo </a>

<A href = "http://www.i7758.com/sitemap.html" class = "icon-mail"> mail </a>

</Div>

CSS

We use CSS to complete the floating, that is, the mouse slides to the pop-up effect. We pull a picture of right_bg.png, which contains several content icons, and then use the content corresponding to each icon in background-position. We use position: fixed and set the bottom and right values to fix. side-bar in the lower right corner, so that no matter how the page is scrolled,. side-bar will remain in the lower right corner. Here we need to mention that the fixed effect under ie6 needs to be handled separately, but this article will not explain it in detail. Let's quit ie6.

. Side-bar a,. chat-tips I {background: url(right_bg.png) no-repeat ;}

. Side-bar {width: 66px; position: fixed; bottom: 20px; right: 25px; font-size: 0; line-height: 0; z-index: 100 ;}

. Side-bar a {width: 66px; height: 66px; display: inline-block; background-color: # ddd; margin-bottom: 2px ;}

. Side-bar a: hover {background-color: # 669fdd ;}

. Side-bar. icon-qq {background-position: 0-62px ;}

. Side-bar. icon-chat {background-position: 0-130px; position: relative ;}

. Side-bar. icon-blog {background-position: 0-198px ;}

. Side-bar. icon-mail {background-position: 0-266px ;}

There is also the effect of moving the mouse to the icon, when the mouse hover ,. the display attribute of chat-tips is set to block and the location is set. The Code also contains the CSS syntax of an arrow:

. Side-bar. icon-chat: hover. chat-tips {display: block ;}

. Chat-tips {padding: 20px; border: 1px solid # d1d2d6; position: absolute; right: 78px; top:-55px; background-color: # fff; display: none ;}

. Chat-tips I {width: 9px; height: 16px; display: inline-block; position: absolute; right:-9px; top: 80px; background-position: -88px-350px ;}

. Chat-tips img {width: 138px; height: 138px ;}

Just a few simple lines of CSS code to complete a concise bottom right corner floating effect, please try again.

Css for image Suspension

The image should not be in the same container as the text.
The image belongs to the image, and the text is wrapped with a DIV or P ~~~ Float left
If you do not need to change the html structure, set the external container to relative, and then fill the left with at least 100px;
The image in the image is set to absolute, and the distance from left is set to zero. By default, it can be set to zero.




How can I use css to set a floating advertisement in the lower right corner?

It is good to use fixed in the position attribute. Of course, it can also be implemented using javascript.