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
Encapsulation, implementation and optimization of display layer (no animation + css3 animation + js animation)
showhide.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>showhide</title>
<link rel="stylesheet" href="../css/base.css">
<style>
body{
width:400px;
margin:0 auto;
}
button{
width:50%;
...
Posted by chalexan on Fri, 21 Feb 2020 22:43:51 -0800
Summary: How to modify default styles for beautifying radio, checkbox, select
Now that front-end pages are becoming more and more effective, the default input component style obviously does not meet the design requirements.A few years ago, development projects happened to meet the related requirements, and in this particular collation, modify the methods of radio, CheckBox, style.
Principle: The general principle i ...
Posted by xX_SuperCrazy_Xx on Thu, 20 Feb 2020 09:22:59 -0800
What's wrong with the lack of page components in the mobile preview of applet development
A few days ago, I found a non code error in learning the wechat applet:
Upper code
<!--wxml-->
<camera class='camera-cls'>
<cover-view class='cv-cls'>Please put the car body in the viewfinder~</cover-view>
<cover-image src='carBackground.png' class='cb-cls'></cover- ...
Posted by sayedsohail on Tue, 18 Feb 2020 05:49:31 -0800
Getting started with CSS
Introduction to CSS (1)
What is CSS?
How can CSS be used?
CSS selector (Key + difficult)
Beautify web pages (text, shadows, hyperlinks, lists, gradients...)
Box model
Float
Location
Web location (special effects)
1. What is CSS
1.1 what is CSS
Cascading Style Sheet cascading styl ...
Posted by msurabbott on Mon, 10 Feb 2020 05:24:36 -0800
CSS what is CSS? Selectors, beautifying web elements
1, Understanding CSS
1.1 what is CSS?
Cascading Style Sheet
CSS function: Beautify web page (font, color, margin, height, width, background picture, web page positioning, web page floating ).
1.2 development history
CSS1.0
CSS2.0 div (block) + CSS, the idea of separating HTML and CSS structure, making ...
Posted by ruiner17 on Sun, 02 Feb 2020 03:21:44 -0800