H5C 3 Learners'Notes

CSS3 1. Full screen animation plug-in fullpage Github-fullpage fullpage Introduction of Component Function Based on jQuery plug-in, it can help you make a full-screen website very convenient and easy. It supports mouse scrolling, forward and ba ...

Posted on Tue, 20 Aug 2019 20:09:18 -0700 by cosmo7

CSS: Analog Snow Effect Animation Production Tutorial

Snowfall effect is just the name of a kind of effect. It can be the movement effect of some free falling bodies, such as red envelope rain. This paper simulates the effect of snow with pure css, and more effects can be exerted by ourselves. 1. Preface Due to the activities of the company's products, ...

Posted on Mon, 22 Jul 2019 00:55:18 -0700 by moise

Angular 2 + Troubleshooting: (8) Handwriting an unreliable upload component

Preface Upload function plays an important role in any website. This article mainly talks about how to implement an upload component. Design sketch Functions Supported image format (default parameters are used without reference) Supported picture size Pictures will be compressed (front-end) - loaded asynchronously before uploading The ...

Posted on Fri, 12 Jul 2019 19:15:04 -0700 by Zooter

Realization of 3D Magic Cube Animation Rotation with CSS

1. Realization of 3D Magic Cube Here, we mainly use our div tag to implement all aspects and blocks of the magic cube. Let's start with the html code of the main body. <div id="box"> <!-- All aspects --> <div class="one"> <div></div> <div></div> ...

Posted on Thu, 04 Jul 2019 18:11:00 -0700 by JeanieTallis

Css3 Series-Learning Notes on New Features of CSS3

1. Introduction to CSS3 Learning website: http://css.doyoe.com/ 1.1. Principles Principle of Progressive Enhancement For example, rounded corners and box-shadow 2. Selector section nth-child() selector Choose the first five with nth-child(-n+5) His rule is in accordance with the expression kn+b, nth-child(5-n) is ...

Posted on Mon, 24 Jun 2019 17:10:34 -0700 by smixcer

The Way of Wechat Program Learning (2) - - Components

assembly View container view Hover-class, which specifies the style class to press down, does not specify that hover-class has no click effects hover-start-time, how long does the click state appear after holding down (default 50ms) hovar-stay-time, how long does the click state remain after loosening (default 400 ms) ...

Posted on Fri, 21 Jun 2019 15:54:06 -0700 by TheHaloEffect

freecodecamp project - twitch API

Links to the project in codepen: https://codepen.io/lightforme/pen/XgRrxG Due to the influence of security policy, the link of channel in codepen's iframe page will not jump after clicking. In the local project, there are some explanations on stack overflow: https://stackoverflow.com/questions/34426959/loading-the-facebook-api-in-jsfiddle ...

Posted on Wed, 19 Jun 2019 18:10:50 -0700 by smarlowe

js realizes lazy loading of pictures

js realizes lazy loading of pictures Reprinted Origin http://www.jianshu.com/p/4f6ea540516a Nowadays, websites contain more and more information, and pictures account for a large part of it. In this way, the whole page can be displayed in the form of combination of face, picture and text, which is more beautiful. However, the problem arises ...

Posted on Sun, 09 Jun 2019 18:33:10 -0700 by FijiSmithy

Self-Made Rotary Planting Map

Effect: The key of the rotation chart is: A. The width of the outer container is set to the width of a picture, and the width of the sub-elements is the total width of N pictures (for placing the n pictures). At this time, the width of the sub-elements is larger than the width of the outer container. Set the outer container: overflow:hidden ...

Posted on Sun, 09 Jun 2019 13:01:33 -0700 by zrueda

CSS pseudo-Class selector: before,: after use: insert characters, insert pictures, insert project number

Before: Pseudo-element selector is used to insert some content before an element Pseudo-class selector: before uses content attributes to insert characters, attributes to insert pictures <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="u ...

Posted on Wed, 05 Jun 2019 14:43:23 -0700 by touchingvirus