Native Js+css landing page for gravity simulation bounce system

Today Xiao Ying to save the JS special effects video to read again, followed by the video knock-hee, with the native JS implementation of a cool login page. What a cool way to look at the picture below and everyone will know.

：

But before we look at the code, let's look at the three properties of opacity, transition and Box-shadow in CSS.

1.opacity

Function: Sets the transparency of an element

Definition and usage

The Opacity property sets the opacity level of the element.

Default value:	1
Inheritance:	No
Version:	CSS3
JavaScript Syntax:	object. style.opacity=0.5

Grammar

value|inherit;

value	Description	Test
Value	Provide for opacity. From 0.0 (fully transparent) to 1.0 (completely opaque).	Test
Inherit	The value of the Opacity property should be inherited from the parent element.

Try it yourself-example

2.transition

Effect: The effect of gradually changing an element from one style to another.

Definition and usage

The Transition property is a shorthand property for setting four transition properties:

• Transition-property
• Transition-duration
• Transition-timing-function
• Transition-delay

Note: Always set the Transition-duration property, otherwise the duration is 0, and there is no transition effect.

Default value:	All 0 Ease 0
Inheritance:	No
Version:	CSS3
JavaScript Syntax:	object. style.transition= "width 2s"

Grammar

 Property Duration timing-function delay;

value	Description
Transition-property	Specifies the name of the CSS property that sets the transition effect.
Transition-duration	Specifies how many seconds or milliseconds to complete the transition effect.
Transition-timing-function	Speed curve that specifies the speed effect.
Transition-delay	Defines when the transition effect starts.

Try it yourself-example

3.box-shadow

Effect: Adds a shadow effect to an element.

Definition and usage

The Box-shadow property adds one or more shadows to the box.

Tip: Use the border-image-* property to construct beautiful, scalable buttons!

Default value:	None
Inheritance:	No
Version:	CSS3
JavaScript Syntax:	object. style.boxshadow= "10px 10px 5px #888888"

Grammar

H-shadow V-shadow Blur spread color inset;

Note: Box-shadow adds one or more shadows to the box. This property is a comma-delimited list of shadows, each of which is specified by a 2-4-length value, an optional color value, and an optional inset keyword. The value of the omitted length is 0.

value	Description	Test
H-shadow	Necessary. The position of the horizontal shadow. Negative values are allowed.	Test
V-shadow	Necessary. The position of the vertical shadow. Negative values are allowed.	Test
Blur	Optional. Blur distance.	Test
Spread	Optional. The size of the shadow.	Test
Color	Optional. The color of the shadow. See CSS color values.	Test
Inset	Optional. Changes the outer shadow (outset) to an inner shadow.	Test

Try it yourself-example

How to achieve it, hahaha, code look here:

<! DOCTYPE html>
Native Js+css landing page for gravity simulation bounce system