Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. This paper making https://github.com/qq449245884/xiaozhi has been collected, the article has classified, also organize a lot of my documents, and tutorial materials.
These 66 special effects, I spent more than 4 months on YouTube followed by typing, in order to strengthen memory, each exercise, I recorded a video, here to share with you. People may joke again, you are not full of work, have time to do this. Actually, I’m pretty full of work at the moment. We go to work at 9 o ‘clock, and I basically come to work at 7:30 and teach myself, so I have an hour and a half to do this.
One of the most common things I hear about CSS, both on the forums and from people around me, is that all the bells and whistles of LEARNING CSS are useless and will not be used in real projects. Hearing these in the mind is still quite frustrated, sometimes I doubt myself, I learn the direction is not wrong. However, I was able to quickly find ideas and make special effects in several projects. I think this is due to the accumulation of special effects I have learned at ordinary times.
Now I am no longer confused by what I have learned, because learning and growing is your business, not someone else’s.
This series I will continue to learn, the first season of 66 lessons, has been more completed, all the source code is at the following address:
Blog.csdn.net/qq449245884…
This needs the money of 2 bottles of happy water, after all, sorting these is still quite lucky and bitter, interested can have a look.
01. Wave text animation
The effect
Video address 1:www.ixigua.com/i6807702906…
Video address 2:www.bilibili.com/video/BV1Y7…
02. Ripple animation
The effect
A video address: www.ixigua.com/i6807982622…
A video address: www.bilibili.com/video/BV1V7…
03. Video captions hover effects
The effect
A video address: www.bilibili.com/video/BV1f7…
Video address 2: www.ixigua.com/i6809102422…
04- New dummy radio button effect
The effect
A video address: www.ixigua.com/i6809529914…
Video address 2: www.bilibili.com/video/BV1Q7…
05- Full screen video background scroll out
The effect
A video address: www.bilibili.com/video/BV1nC…
Video address 2: www.ixigua.com/i6809937347…
06- Creative Product card
The effect
Video address 1: mp.toutiao.com/profile_v3/…
Video address 2: www.bilibili.com/video/BV1mt…
07. Creative hover effects for menu items
The effect
A video address: www.bilibili.com/video/BV1za…
Video address 2: www.ixigua.com/i6812147372…
08. How to make CSS effects with video
The effect
A video address: www.ixigua.com/i6812840842…
Video address 2: www.bilibili.com/video/BV1Le…
09. Make personalized scroll bars
A video address: www.bilibili.com/video/BV17e…
Video address 2: www.ixigua.com/i6813181916…
10.BoxShadow Beginner to Advanced effects
The effect
A video address: www.bilibili.com/video/BV1YC…
A video address: www.ixigua.com/i6814296955…
11. Animate any SVG icon using CSS only
The effect
A video address: www.bilibili.com/video/BV1AA…
Video address 2: www.ixigua.com/i6814028560…
12. Use CSS3 to implement responsive recommendation cards
The effect
A video address: www.bilibili.com/video/BV1YC…
A video address: www.ixigua.com/i6814703631…
13. A cool new analog clock
The effect
A video address: www.bilibili.com/video/BV1pQ…
A video address: www.ixigua.com/i6815132991…
14. Waterfall flow layout using CSS Grid
The effect
A video address: www.ixigua.com/i6815506102…
15.2.5D Parallax effect
A video address: www.bilibili.com/video/BV1mT…
Video address 2: www.ixigua.com/i6815871539…
16. Pure CSS3 water wave animation effects
The effect
Video address: www.ixigua.com/i6816244424…
17. Circular progress bar
The effect
A video address: www.bilibili.com/video/BV1qp…
Video address 2: www.ixigua.com/i6816614062…
18.3D perspective and layered image hover effect
The effect
A video address: www.bilibili.com/video/BV1J6…
Video address 2: www.ixigua.com/i6817737160…
19. The hidden password dialog box is displayed
The effect
A video address: www.bilibili.com/video/BV1UQ…
Video address 2: www.ixigua.com/i6818096482…
20. Pop-up cards show special effects
The effect
A video address: www.bilibili.com/video/BV1ce…
Video address 2: www.ixigua.com/i6818471295…
21. Button hover effects
The effect
Video address: www.ixigua.com/i6818851166…
22. Text portrait and mouse move parallax effect
Effect:
A video address: www.bilibili.com/video/BV1TV…
Video address 2: www.ixigua.com/i6819215565…
23. Input box verification effects
Effect:
A video address: www.bilibili.com/video/BV1Ak…
Video address 2: www.ixigua.com/i6820325547…
24. Sticky navigation effects
Effect:
A video address: www.bilibili.com/video/BV15K…
Video address 2: www.ixigua.com/i6821071022…
25. Interesting bullet sound effects
Effect:
A video presentation address: www.bilibili.com/video/BV1C5…
Video presentation address 2: www.ixigua.com/i6821449649…
26. Gradient light cards
Effect:
A video address: www.bilibili.com/video/BV1Qf…
Video address 2: www.ixigua.com/i6822923946…
27. Achieve long shadow web effects
Effect:
A video address: www.bilibili.com/video/BV1uA…
Video address 2: www.ixigua.com/i6823670426…
28. Create the special effect of radiant checkbox
Effect:
A video address: www.bilibili.com/video/BV1qz…
Video address 2: www.ixigua.com/i6824042494…
29. Cool Loading effects
Effect:
A video address: www.bilibili.com/video/BV1dK…
Video address 2: www.ixigua.com/i6825524219…
30 mouse movement colorful heart web page effects
Effect:
A video address: www.bilibili.com/video/BV1de…
Video address 2: www.ixigua.com/i6825893346…
31. Realize pricing card hover effects
Effect:
A video address: www.bilibili.com/video/BV1mK…
Video address 2: www.ixigua.com/i6826645569…
32. 3D flip card effects
Effect:
A video address: www.bilibili.com/video/BV13K…
Video address 2: www.ixigua.com/i6827005668…
33. Video slider effects
Effect:
A video address: www.bilibili.com/video/BV1Bk…
Video address 2: www.ixigua.com/i6828124892…
34. Pixelated image hover effects
Effect:
A video address: www.bilibili.com/video/BV1ta…
Video address 2: www.ixigua.com/i6828497506…
35. Button hover effect neon light effect
Effect:
A video address: www.bilibili.com/video/BV11z…
Video address 2: www.ixigua.com/i6828857444…
36. Smiley scoring bar special effects
Effect:
A video address: www.bilibili.com/video/BV1Pt…
A video address: www.ixigua.com/i6829582434…
37. Mouse movement line effects
Effect:
A video address: www.bilibili.com/video/BV1ag…
Video address 2: www.ixigua.com/i6830722031…
38. Cool mouse movement effects
The effect
A video presentation address: www.bilibili.com/video/BV1Xz…
Video presentation address 2: www.ixigua.com/i6831832169…
39. Sticky rolling effects
Effect:
A video address: www.bilibili.com/video/BV1r5…
Video address 2: www.ixigua.com/i6832204729…
40. New checkbox effects
Effect:
A video address: www.bilibili.com/video/BV1iV…
Video address 2: www.ixigua.com/i6833316731…
41. Clip-path rolling effects
The effect
A video address: www.bilibili.com/video/BV1tQ…
Video address 2: www.ixigua.com/i6833685696…
42. Wave div animation effect
The effect
Video address: www.ixigua.com/i6834042168…
43. Rolling tilt background effects
The effect
A video address: www.bilibili.com/video/BV17p…
Video address 2: www.ixigua.com/i6834441977…
44. Counter design idea
Effect:
A video address: www.bilibili.com/video/BV1vQ…
Video address 2: www.ixigua.com/i6835920426…
45. Menu hover sliding effect
Effect:
A video address: www.bilibili.com/video/BV1Sp…
Video address 2: www.ixigua.com/i6836281379…
46. Great icon hover effect
Effect:
A video address: www.bilibili.com/video/BV1ef…
Video address 2: www.ixigua.com/i6836657427…
47. Neon button animation hover
Effect:
A video address: www.bilibili.com/video/BV15k…
Video address 2: www.bilibili.com/video/BV15k…
48. Curtain response menu special effects
Effect:
A video address: www.bilibili.com/video/BV1TT…
Video address 2: www.ixigua.com/i6838419811…
49. New dummy button hover effect
Effect:
A video address: www.bilibili.com/video/BV1fv…
Video address 2: www.ixigua.com/i6838884535…
50. New hover effect for dummy cards
Effect:
A video address: www.bilibili.com/video/BV1Df…
Video address 2: www.ixigua.com/i6839252135…
51.3D Image flip effect
Effect:
A video address: www.ixigua.com/i6840006472…
Video address 2: www.bilibili.com/video/BV15A…
52. Responsive clipping mask parallax scrolling effect
Effect:
A video address: www.ixigua.com/i6841112747…
Video address 2: www.bilibili.com/video/BV1hv…
53. Special effects at night and day
Effect:
A video address: www.ixigua.com/i6841112747…
Video address 2: www.bilibili.com/video/BV1pa…
54. Text rotation animation effect
Effect:
A video address: www.ixigua.com/i6841854545…
Video address 2: www.bilibili.com/video/BV1iC…
55. Creative button hover effects
Effect:
Video address 1: mp.toutiao.com/profile_v3/…
Video address 2: www.bilibili.com/video/BV1ZK…
56.3D Edit text effects
Effect:
A video address: www.ixigua.com/i6843709475…
Video address 2: www.bilibili.com/video/BV1oi…
57. Special effects of response box model
Effect:
58. Digital clock effects
Effect:
A video address: www.ixigua.com/i6844451067…
Video address 2: www.bilibili.com/video/BV1bp…
59. Pop-ups and blurry background effects
The effect
A video address: www.ixigua.com/i6845126624…
Video address 2: www.bilibili.com/video/BV1bA…
60. How to place video inside text
The effect
A video address: www.ixigua.com/68463104831…
Video address 2: www.bilibili.com/video/BV1B5…
61. Reflection properties – Webkit-box-reflect app
The effect
A video address: www.ixigua.com/68470501686…
Video address 2: www.bilibili.com/video/BV1iA…
62. Gradient glow loading animation effects
The effect
63. Full screen loading page animation effects
The effect
A video address: www.ixigua.com/68489089004…
Video address 2: www.bilibili.com/video/BV1zK…
64. Christmas animation effects
The effect
A video address: www.ixigua.com/68492707381…
Video address 2: www.bilibili.com/video/BV1g5…
65. Slimy animations
The effect
A video address: www.ixigua.com/68500160803…
Video address 2: www.bilibili.com/video/BV1wK…
66. TV noise animation effects
The effect
A video address: www.ixigua.com/68503868164…
Video address 2: www.bilibili.com/video/BV1Jv…
Talented people’s [three] is the biggest power of wisdom to share, if there is any mistake or suggestion in this blog, welcome talented people to leave a comment, finally, thank you for watching.
All the specific source: https://blog.csdn.net/qq449245884/category_9873715.html
The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.
communication
This article continues to update every week, you can wechat search “big move the world” the first time to read, reply [welfare] there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.
