Tag：css3
-
Time：2020-2-23
I love rolling, rolling makes me happy! Hello, I’m counter. In this chapter, Weibo mainly uses some new features of CSS3, Key frame is mainly used to make 3D graphics move, which involves some abstract ideas, three-dimensional imagination. First, I’ll show you the effect of the completion. The code is not very difficult. Every line […]
-
Time：2020-2-21
We all know the composition of box model. Content, padding, border, margin There are two standards for box model, one is standard model and the other is ie model. It is not hard to see from the above two figures that in the standard model, the width and height of the box model is just […]
-
Time：2020-2-17
“Tiktok” is also very popular, it is said that it has 700 million users. Today we will study the logo of the trembling sound, tiktok. Effect preview: Mainly use CSS3 to add attributesmix-blend-modeThere are three colors, white, red, and sky blue. OK, let’s finish a “J”. Based on the past experience, we split it into […]
-
Time：2020-2-15
When coding, we will find that a lot of things come from different ways. There are thousands of ways to solve the problem. It’s not necessary to write the code in a very high level. On the contrary, later people can’t understand it and have a headache in maintaining the basis. Therefore, the most simple […]
-
Time：2020-2-11
Those who have played king should be familiar with the effect of this page. Why do you want to achieve this effect? First: the king is so hot, the electric competition is so hot. Second: mainly to learn CSS3 linear, radial gradient, rotation, scaling and animation. Graph parsing 1. Background (radial gradient) 2. Player loads […]
-
Time：2020-2-10
CSS transformations, while cool, have not yet been applied to background images. This article provides a good solution, when you really want to rotate the background image, or keep the background image unchanged when the container element rotates. Use the CSS3 transform attribute to scale, tilt, and rotate any element. It is supported in all […]
-
Time：2020-2-9
Box sizing in CSS3 (content box and border box) The box sizing property in CSS3 allows you to specify a box model in a specific way, in two ways: Content box: standard box model, also called W3C box model, is generally used in modern browsers Border box: Weird box model, box model in low version […]
-
Time：2020-1-31
Today we are going to origami plane Basically, it’s all implemented with CSS, only a small part of JS Let’s first look at the structure of the plane Gray area is foldable area The white area is the fuselage The triangle is drawn by border and then turned into the figure above through various translation […]
-
Time：2020-1-23
CSS animation animation realizes loading state HTML <div class=”root”></div> CSS .root { width: 25px; height: 25px; border-radius: 50px; border: 2px dashed #ddeeff; animation: loading 1s infinite linear; } @keyframes loading { to { transform: rotate(180deg) } } JavaScript setTimeout(() => { $(‘.root’).css({ ‘animation-play-state’: ‘paused’ }) }, 5000)
-
Time：2020-1-22
Preface The predecessor of this article is from the project awesome GitHub Vue on GitHub. However, since the last update time of this project was June 12, 2017, many content has expired or many recent excellent components have not been included, so Xiaosi today (January 19, 2019) updated the content and created a new project […]
-
Time：2020-1-19
Crazy technology houseOriginal: https://www.smashingmagazine The first WeChat public address is jingchengyideng.Welcome to pay attention and push you fresh front-end technical articles every day abstractIn this article, you will learn how the awwwards net implements animation. This article introduces the circle element in HTML5 SVG, its stroke attribute, and how to use CSS variables and animate […]
-
Time：2020-1-19
1、 CSS implementation of left width fixed right width adaptive 1, positioning <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> < title > adaptive < / Title > <style> *{ padding: 0; margin: 0; } .left{ background: red; width: 200px; height: 200px; Position: absolute; / * positioning*/ left: 0; top:0; } .right{ background: blue; height: 200px; […]
