AOS.js using and imitating Millet's demo display

AOS.js is a tool library used to present element animation when the page scrolls, similar to WOW.JS, but AOS is a CSS3 animation driven library, which can make elements move when scrolling the page, and when the page rolls back to the top, elements can return to the previous state, which can achieve the effect of circular animation. code ...

Posted by TripleDES on Tue, 05 May 2020 04:42:29 -0700

CSS rotating text around the sphere - 3D effect

Code download address: http://www.demodashi.com/demo/12482.html Screenshot of project file structure Only one html file is needed: Project screenshot: Code implementation principle: The implementation process of this example is very simple, mainly using CSS3 perspective, 3D rotation, displacement, gradient ...

Posted by Guernica on Sun, 03 May 2020 04:47:50 -0700

Five ways to achieve CSS element horizontal center, practical and simple!

1. General method - fixed width element html part: <div class="container"> <div class="center"></div> </container> CSS part: /*public*/ body,div{ margin: 0; } .container{ background: beige; height: 1000px; } /*Centered*/ .center{ width:300px; height:300px; margin:auto; background: aqua; } Disadvantage of thi ...

Posted by Smasher on Fri, 01 May 2020 07:06:45 -0700

Practical skills of sharing css pseudo elements in web front end training series of good programmers

Practical skills of sharing css pseudo elements in web front end training series of good programmers1. Definition: pseudo elements are used to create and style elements that are not in the document tree. For example, we can add some text before and after an element through: before: after, and add styles to the text. Although the user can see th ...

Posted by pazzy on Sun, 26 Apr 2020 01:40:48 -0700

JavaScript DOM-style operations

JavaScript style operations include controlling the inline style of an element through the style attribute, getting the effective style of an element through the getComputedStyle method, changing the pseudo element style by changing the element class name, and animating the style through a timer style attribute DOM cannot manipulate CSS fil ...

Posted by NSH on Sun, 05 Apr 2020 18:38:21 -0700

Realization of small ball flying into shopping cart by animation of css3

I. thinking 1. Add 5 elements under the body and locate them absolutely, and display:none;(5 elements are to prevent users from clicking continuously) 2. Locate the dom of the first dispaly:none; in a single location on the single page 3. Use css3 to move the located dom to the target, remove the style, and set display:none ...

Posted by lehara on Fri, 03 Apr 2020 08:13:42 -0700

The usage of:: before:: after in css

I. Introduction : before and:: after are pseudo elements. (in CSS3, in order to distinguish them from pseudo classes, pseudo elements are written with double colons. However, due to compatibility issues, most of them are now unified single colons, such as: first line,: first letter,: before,: after, e ...

Posted by tonga on Sun, 15 Mar 2020 04:30:45 -0700

Animation script encapsulated with jquery (no animation, css3 animation, js animation)

Self packaged showhide.js Including no animation, css3 animation, js animation Including: fade (fade in and fade out) slideUpDown (slide up and down), slideLeftRight (slide left and right), fadeSlideUpDown (fade in and fade out + slide up and down), fadesleleftright (fade in and fade out + slide left and right) (function($){ var transition ...

Posted by BDKR on Tue, 25 Feb 2020 07:37:31 -0800

css animation - 3D effect

css animation - 3D effect 1, 3D conversion 3D flip method rotate 3D displacement translate 3D sight distance perspective 3D conversion (3D scale flip) scaleZ 2, 3D animation Create animation @ keyframes Animation attribute animation case Internet Explorer 10 and Firefox support 3D, Chrome and ...

Posted by tim_perrett on Mon, 24 Feb 2020 07:03:16 -0800

Header layout, search verification and AJAX automatic search prompt are encapsulated into components to improve code reusability

index.html header structure and style Design sketch   Static style Part of index.html <!-- head --> <div class="header"> <div class="container"> <!-- h1 Tag is for search engine optimization, indicating importance But don't show too much in the page --> <h1 class=" ...

Posted by laurajohn89 on Sat, 22 Feb 2020 23:51:28 -0800