Tag:CSS3 animation

  • CSS animation to achieve loading effect


    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)

  • Animation.css super CSS3 animation library, three lines of code to do H5 page animation effects!


    1、 Basic usage Introduce CSS dependency <link rel=”stylesheet” href=”https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css”> Add the following to the class of the element animated (Mandatory) Infinite (optional) infinite repetition bounce (Mandatory)Animation styleRefer to the table below Delay-2s (optional) delay appears <div class=”animated infinite bounce delay-2s”><h1>Example</h1></div> Class Name bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown bounceInLeft […]

  • Three minutes to master react render props


    When reviewing the code in the morning, I found some problems and some tips on logic reuse. Then I took a moment to sort it out, made an example, and talked about render props what is it ? Simply put, render props is a technique for sharing logic among components. Pass some rendering logic to […]

  • A summary of the methods to achieve the effect of bullet curtain in the front end (including the implementation of CSS3 and canvas)


    Previously, in a lottery page of mobile terminal, the display window of the lottery results needs to show the bullet screen in rotation. I stepped on some small pits before, and now I will summarize the implementation method of the front-end bullet screen effect. CSS3 realizes the bullet screen of beggars’ version Performance optimization of […]

  • Interviewer: “loading animation of Android system with CSS”


    Source code: https://github.com/any86/5a. C ios/android There are two kinds of loading icons commonly used on the web, one is the “Chrysanthemum” of IOS, the other is the “ring” of Android. Today, we use SVG to realize the “ring” animation of Android, and the next lesson realizes the “Chrysanthemum” of IOSBe careful: the reason for the […]

  • Front end animation project (2): input box effect


    This article is from “animation design · input box effect” of Xintan blog. More articles are put in GitHub Welcome to exchange and star List of effects Scribing dynamics: Dynamic border: Scribing dynamics Design sketch Principles and codes :beforeand:afterPseudo elements specify the contents before and after the contents of an element document tree. BecauseinputLabel is […]

  • Pure CSS meteor shower background


    GitHub address. You can use star if you like Plug in Preview Using tutorials Code display Vue page usage <template> <view class=”space”> <view class=”planet”> <view class=”planet_shadow”></view> <view class=”crater1″></view> <view class=”crater2″></view> <view class=”crater3″></view> <view class=”crater4″></view> </view> <view class=”stars”> <view class=”star”></view> <view class=”star pink”></view> <view class=”star blue”></view> <view class=”star yellow”></view> </view> </view> </template> Style <style lang=”scss”> .space […]

  • CSS is the most simple way to realize the wave dynamic effect, isn’t it?


    Fancy canvas implementation is too cumbersome, which is the significance of this paper Design sketch Dismantling First draw a simple box:utilize::beforeAnd::afterDraw two fillet values(radius)Different irregular circles:Parent element settingsoverflow: hiddenFinally addanimationThe animation makes two irregular circles rotate Code html <div class=”wave”></div> scss //Simple box .wave { position: relative; width: 150px; height: 150px; background-color: #5291e0; overflow: hidden; […]

  • To be reasonable, only three lines of rate scoring component of the core CSS code, I was shown to be in a state of numbness by myself


    imagerateScoring components are generally usedjavascriptWrite, about a year ago, I wrote an article in Jianshu about the implementation of star scoring component in native JavaScript. If you are interested, you can have a look at it. I wrote it a long time ago, and I don’t know how long the previous code is, so this […]

  • The difference of transform, animation, transition and translate in CSS


    In the process of front-end page development, there are often several CSS properties that are easy to confuse: transform, translate, animation and transition. Let’s make a comparison of these CSS properties, identify the differences between these properties and understand their usage scenarios. Briefly: Transform: it is mainly used for 2D or 3D transformation of elements. […]

  • CSS in-depth front-end chapter before 2020, fully grasp the CSS animation [transition]


    Written in front It will be 2020 soon. Do you know that my friends have learned CSS3 animation this year? Speaking of CSS animation is a very awkward thing. On the one hand, because the company uses less CSS animation, on the other hand, most developers are accustomed to using JavaScript to do animation, so […]

  • Five amazing CSS3 and JS animation Libraries


    Animates Animation Library Magic. CSS Animation Library Bounce.js Animation Library Effect.css Animation Library Hover.css Animation Library Author: IT MagnifierWelcome to scan two-dimensional code, pay attention to public numbers, focus on IT, and push professional IT knowledge and industry information every day.