Mouse transform
Do you want to achieve this on the home page? When you move the mouse over the words "site help", the shape will turn into the form of help. When you move to a hyperlink that may take a long wait, the shape of the mouse will turn into a wait. If you don't believe it, copy the following code to a text editor and save it as a webpage file. Then I will explain the meaning of the code to you.
| The code is as follows: | Copy code |
| <Html> <Head> <Title> cursor </title> </Head> <Body> <P style = cursor: hand> hand shape </p> <P style = cursor: move> move flag </p> <P style = cursor: wait> waiting status </p> <P style = cursor: crosshair> positioning indication </p> <P style = cursor: help> ask for help </p> </Body> </Html> |
|
This code is very simple. You only use the "cursor" attribute in CSS to set the value of the "style = cursor: value" statement. For example, when the value is "hand", when you move the mouse over the corresponding text or image, it will become the hand shape of the hyperlink; when the value is "move, when you move the mouse over a text or image, it will become the top, bottom, left, and right with a direction arrow shape, other shape of the mouse and "cursor" value.
Shadow effect
This shadow text is written with several lines of code instead of the inserted image in "stacked style form-CSS", which saves much space for inserting images. The source code of this page is as follows:
| The code is as follows: | Copy code |
| <Html> <Head> <Title> shadow </title> <Style type = text/css> <! -- P {position: absolute; Top: 130; Left: 50; Filter: DropShadow (Color = pink, OffX = 4, OffY = 4, positive = 1 );} --> </Style> </Head> <Body> <P style = font-size: 48; font-weight: bold; color: red;> shadow effect </p> </Body> </Html> |
|
This effect uses the "DropShadow" attribute in the CSS filter. The code is: {filter: DropShadow (Color = pink, OffX = 4, OffY = 4, positive = 1)}. Among them, the "color" parameter indicates the shadow color. "OffX" and "OffY" indicate the offset of the shadow in the X and Y directions, the positive parameter can be set to "0" or "1". If the value is "0", it indicates that the shadow is set to "1" for transparent pixels, sets the shadow for an opaque pixel.
When using the "DropShadow" attribute, note that the value of the "position" attribute must be "absolute". Otherwise, the shadow cannot determine the direction of the offset. The code for adding a shadow to a graph is exactly the same as the code for setting a shadow for a text.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
