[HTML] The way to get started

While learning, take notes.

Full Screen Code

<table style= "position:absolute;left:0px;top:0px;width:100%;height:1500px;background:red;" border= "0" cellpadding= "0" cellspacing= "0" ><td><center><table border= "0" cellpadding= "0" cellspacing= "0" Style= "Width:1000px;height:1500px;background: #000;" ><td> Here start writing code, height 1500px width 1000px Please note control size </td></table></td></table><p style= " height:1400px; " ></p>

Line: <p style= "Width:3px;height:200px;background: #000;" ></p>

The horizontal line will be exchanged for the size of the width and height.

Slash: <p style= "Width:3px;height:200px;background: #000; transform:rotate (45deg);-webkit-transform:rotate (45deg);" ></p>

Circle:<style> #ta {width:100px;height:100px;border-radius:50px;background: #000;} </style><p id= "Ta" ></P> the

Border-radius is to have the corners of the bounding rectangle produce radians, where the 50px is exactly half the length of the width.

Here the Border-radius is the shorthand property, the declaration order is clockwise, starting from the upper left corner.

<STYLE> #kxy {width:100px;height:100px;border-radius:50px;border:2px solid #000;} </style><p id= "Kxy" ></P>

"Hollow Circle" changes the background to a border declaration

To keep the animation in a state when it suddenly terminates, use the Animation-play-state property.

div {animation:spin 1s linear infinite; animation-play-state:paused;} div:hover {animation-play-state:running;}

Currently, IE 10 and Firefox (>= 16) Support animation without a prefix, and chrome does not, so you must use the WebKit prefix.

In practice, the code must be written in the following manner.

Div:hover {-webkit-animation:1s rainbow; animation:1s Rainbow;}

@-webkit-keyframes Rainbow {0% {background: #c00;} 50% {background:orange;} 100% {background:yellowgreen;}}

@keyframes Rainbow {0% {background: #c00;} 50% {background:orange;} 100% {background:yellowgreen;}}

The KeyFrames keyword is used to define the various states of an animation, and it is quite free to do so.

@keyframes Rainbow {0% {background: #c00} 50% {Background:orange} 100% {Background:yellowgreen}}

0% can be represented by from, 100% can be represented by to, so the above code is equivalent to the following form.

@keyframes Rainbow {from {background: #c00} 50% {Background:orange} to {Background:yellowgreen}}

Div:hover {animation:1s Rainbow;}

CSS animation need to specify the duration of the animation for a period, and the name of the animation effect.

The code above indicates that when the mouse hovers over a DIV element, an animated effect named Rainbow is generated with a duration of 1 seconds. To do this, you also need to use the KeyFrames keyword to define the rainbow effect.

@keyframes Rainbow {0% {background: #c00;} 50% {background:orange;} 100% {background:yellowgreen;}}

The above code shows a total of three states for the rainbow Effect, starting (0%), Midpoint (50%), and End (100%), respectively. If necessary, you can insert more states completely.

By default, animations play only once. Add the Infinite keyword to allow the animation to play indefinitely.

Div:hover {animation:1s rainbow Infinite;}

You can also specify how many times the animation will play, such as 3 times.

Div:hover {animation:1s Rainbow 3;}

When the animation finishes, it jumps from the end state to the start state immediately. If you want to keep the animation in the end state, you need to use the Animation-fill-mode property.

Div:hover {animation:1s rainbow forwards;}

(1) None: Default value, back to the state when the animation does not start.

(2) Backwards: Let the animation return to the state of the first frame.

(3) Both: Apply forwards and backwards rules in turn according to Animation-direction (see later).

Like transition, animation is also a shorthand form.

div:hover {animation:1s 1s rainbow linear 3 forwards normal;}

div:hover {animation-name:rainbow; animation-duration:1s; animation-timing-function:linear; animation-delay:1s; Animation-fill-mode:forwards; Animation-direction:normal; Animation-iteration-count:3; }

img{height:15px; width:15px;} img:hover{height:450px; width:450px;}

When the mouse is placed on top of the thumbnail, the thumbnail will quickly become larger.

img{Transition:1s;}

The above code specifies that the image amplification process takes 1 seconds.

img{transition:1s height;}

Only height changes take 1 seconds to implement, and other changes (mostly width) are still instantaneous

img{transition:1s height, 1s 1s width;}

The above code specifies that width is changed after 1 seconds, that is, latency (delay) of 1 seconds

The real meaning of delay is that it specifies the order in which animations occur, so that multiple different transition can be linked together to create complex effects.

img{transition:1s Ease;}

Transition state Change Speed (also known as timing function), the default is not uniform, but gradually slowed down, this is called ease.

(1) Linear: constant speed

(2) Ease-in: accelerating

(3) Ease-out: Deceleration

(4) Cubic-bezier function: Custom Speed mode

The last cubic-bezier can be customized using the tools website. http://cubic-bezier.com/#.17,.67,.83,.67

img{transition:1s 1s height ease;} Shorthand

img{transition-property:height; transition-duration:1s; transition-delay:1s; transition-timing-function:ease;} [Full spell]

Limitations of Transition:

(1) Transition requires event triggering, so it can't happen automatically when the page is loaded.

(2) Transition are disposable and cannot be repeated unless triggered repeatedly.

(3) Transition can only define the start and end states, and cannot define an intermediate state, that is, there are only two states.

(4) A transition rule that defines only one property change and cannot involve multiple attributes.

@keyframes dx1{0%{width:100px;} 100%{width:200px;}}

KeyFrames keyframes, which are the basis for animation generation, the browser accomplishes the animation by achieving a smooth transition between artificially set keyframes.

0% is the beginning of the animation, at this time to limit the width of an element of 100px
100% when the animation is complete, the limit width is 200px

<style>a:hover{border-bottom:solid 1px #000000;} </style>

<a href= "" Target=_blank> links </a>

The mouse hovers over the link and the underline appears

<font style= "Color:rgba (0,0,0,1); font-size:100px;line-height:100%;" > Color Change </font>

The final A in Rgba (255,0,0,0.4) Rgba is alpha transparency, which only accepts 0~1

<TABLE><TD style= "font-size:16px;line-height:100%;" > Hello </td></table>

<table> Forms <td> Table contents

[HTML] The way to get started