SegmentFault Technology Weekly -- Amazing! CSS can also achieve cool special effects

The full name of CSS is Cascading Style Sheets, Cascading Style Sheets, which is a style sheet language used to describe the styles rendered by elements of HTML or XML (including XML branch languages such as SVG and XHTML).

The editor has compiled high-quality technical articles about CSS in the Sifu community, welcome to read~

📖 文章推荐

Super cool transition animation? CSS is easy to win!

With the help of powerful CSS and some interesting tricks, we achieved these two seemingly complex transition animation effects using pure CSS, and, before, it was completely impossible to achieve using pure CSS.

CSS color-scheme and night mode

normal: Indicates that the element does not specify any color scheme and should therefore be rendered using the browser's default color scheme.
light: Indicates that the element can be rendered using the OS light color scheme.
dark: Indicates that the element can be rendered using the OS dark color scheme.

Star Wars with cool image transition effects based on CSS mask-image

In the process of developing the official website for the company, there will be a mouse-over effect involving some pictures. After the mouse is hovered, the original picture will be changed, and it will simply fade out, zoom in and out, and pan left and right can no longer meet the expectations of the product manager. I always feel that it is not amazing enough, not creative enough. In fact, as a developer, I will not be satisfied with this ordinary daily animation interaction effect. When looking for a new idea, I found that based on CSS mask-image, many good effects can be achieved. This article will implement four kinds of image transition animation effects based on this property.

Animation synthesis tips! CSS to achieve dynamic countdown effect

This is a very "dynamic" countdown effect, which is usually more common in the opening of some activities. After analyzing the entire animation process, it is not difficult to find that there are the following types of animations

1. change in numbers
2. Zoom out and zoom in
3. Transparency change

I don't know if my friends can observe it? Let's take a look at the specific implementation

Awesome Sticky Bubble Effect Using Pure CSS

Among them, if you want to use the feGaussianBlur filter in SVG flexibly, you still need a very strong SVG knowledge reserve. So, is it possible to achieve this effect with just CSS?
Hey, strong CSS is certainly possible. In this article, I will lead you step by step to use pure CSS to achieve the above effects.

Use CSS background to achieve cool hover effects

In the daily development process, you will encounter many button mouseover effects. There are many ways to achieve such hover effects. With the help of pseudo-elements, CSS3 transformations and transitions can be achieved. Today's article will use background colors to achieve a similar effect, when we have a problem and you have more than one solution in mind, I think it must be excellent, using different methods to achieve the same effect, or The problem encountered one day is solved.

How does CSS fix an element to the bottom of the container? (four ways)

If it is the bottom of the page, we can directly position: fixed; bottom: 0; directly based on browser positioning.
But the effect he wants is based on the parent container, so we have to use other means to locate
relative to limit absolute, then bottom: 0, but it will cause abnormal display when the content is too long. So we need to do inner scrolling.
If doing internal rolling, then we just need to be able to prop open the box. No need for absolute positioning

📖 问答推荐

• CSS A styling issue, an extra white area at the bottom?
• Beyond hiding uses -webkit-line-clamp: 2; why is the third line also showing a part?
• 【CSS】How to realize the chamfering of arc shape?
• How should such numbers be written in CSS?
• How does CSS implement two divs with a fixed width and the other filling the remaining space?
• How does CSS achieve dynamic loading effect?
• CSS calculate width problem
• CSS multi-line text, how to achieve adjustable distance underline?
• I would like to ask you a question about a CSS node selector
• CSS naming convention

👇 课程推荐

"Concise CSS Tutorial"
Course link: https://ke.segmentfault.com/course/1650000037473693

Course harvest

1. CSS, as one of the necessary skills in front-end web development, has many knowledge points, complex content, and is very flexible to use. If it is not systematically learned, it is very easy to cause frustration. Based on the lecturer's own experience, this series of courses systematically arranges the knowledge points in CSS, from shallow to deep, from basic to complex, from theory to practice, and introduces the most core knowledge points in CSS.
2. In practical work, extremely flexible CSS will bring unnecessary trouble to team development. In addition to introducing knowledge points, this series of courses pays more attention to the meaning of practical work, so that students can not only master the knowledge of CSS, but also grasp the points that should be paid attention to in practical work, so that theory and practice can be combined, and learning and learning can be seamlessly connected. Work.

---

PS: What technical content do you want to see, you can leave a message in the comment area~

If you have any questions, you can add Ms. WeChat~