Look at the effect ( Move the mouse up and have a look )

abcd

The effect is simple , It is to move the position of the text to simulate the effect of vibration .

Css

 <style>
@-webkit-keyframes shake {
0%{
-webkit-transform:translate(2px, 2px);
}
25%{
-webkit-transform:translate(-2px, -2px);
}
50%{
-webkit-transform:translate(0px, 0px);
}
75%{
-webkit-transform:translate(2px, -2px);
}
100%{
-webkit-transform:translate(-2px, 2px);
}
}
@keyframes shake {
0%{
transform:translate(2px, 2px);
}
25%{
transform:translate(-2px, -2px);
}
50%{
transform:translate(0px, 0px);
}
75%{
transform:translate(2px, -2px);
}
100%{
transform:translate(-2px, 2px);
}
}
.shake{
position: relative;
top: 30px;
left: 100px;
width: 200px;
color: #0000ff;
}
.shake:hover{
-webkit-animation:shake 0.2s infinite;
animation:shake 0.2s infinite;
}
</style>

Html

 <div class="shake">abcd</div>

CSS3+HTML5 Special effects 5 - More related articles on vibrating words

  1. CSS3+HTML5 Special effects 6 - Flashing words

    Look at the effect abcd The effect is also relatively simple , utilize keyframes The size of the text . Transparency and color are displayed in cycles . CSS <style> @-webkit-keyframes flash { 0%{ ...

  2. CSS3+HTML5 Special effects 8 - Top and right fixed , The layout on the left side changes with the window

    original text :CSS3+HTML5 Special effects 8 - Top and right fixed , The layout on the left side changes with the window Effect demonstration Realization principle Use 3 individual div( One is the top bar , One is the left column , One is the right column ): Use checkbox To determine whether to show and hide ...

  3. CSS3+HTML5 Special effects 9 - Simple clock

    original text :CSS3+HTML5 Special effects 9 - Simple clock Effect demonstration ( Faster 100 times )         Realization principle utilize CSS3 Of transform-origin And  transform Complete the above effect . Code and say ...

  4. css3+html5 Special effects - You slide

    css+html5 Special effects - You slide Effect description : Switch the pull-down and pull-up States Mouse hover : Pull down the mouse to leave : Pull up /* Outer container settings */ .box1{position:relative;top:100px;left:100 ...

  5. CSS3+HTML5 Realize block shadow and text shadow

    CSS 3 + HTML 5 It's the future Web, They haven't officially arrived yet , Although many browsers have begun to provide partial support for them . This course is divided into 5 This section introduces the 5 individual CSS3 skill , Can help you achieve the future Web, however , These technologies don't ...

  6. CSS3+HTML5 Special effects 7 - special Loading effect

    The effect is as follows     Realization principle : utilize CSS3 Of @keyframes Rules create animation effects : Use CSS3 Of animation Effect complete scrolling switch . Code instructions : In the style sheet @-webkit-keyframes And @ke ...

  7. CSS3+HTML5 Special effects 4 - Horizontal seamless rolling

    Look at the example This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This ...

  8. CSS3+HTML5 Special effects 3 - Vertical seamless rolling

    Old practice , Look at the example . This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...

  9. CSS3+HTML5 Special effects 2 - Flip effect

    Look at the effect , Move the mouse up and have a look . back front 1. This example requires the following elements a. Containers BOX b. Default display elements FRONT c. Flip the display elements BACK 2. Containers BOX Of Height by 200px,Wi ...

Random recommendation

  1. UITabBarController note ( 3、 ... and ) UITabBarController coordination UINavigationController Use

    Build an empty one iOS engineering - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictiona ...

  2. [Swift]LeetCode931. The descent path is the smallest and | Minimum Falling Path Sum

    Given a square array of integers A, we want the minimum sum of a falling path through A. A falling p ...

  3. go Study day1

    go Linguistic characteristics 1. Garbage collection a. Automatic memory recycling , No more developers managing memory b. Developers focus on business implementation , It reduces the mental burden c. It only needs new Allocate memory , No need to release 2. Natural concurrence a. Support concurrency from the language level , It's simple ...

  4. xshell Can't connect to the virtual machine linux Solutions for ( Default used NAT Pattern )

    1. find Linux Systematic ip Address Enter the command    ifconfig 2. Open local network connection take VMnet1 Of ip Address set to and virtual machine ip Of the same network segment ip Like virtual machines Linux Systematic ip by    192.168. ...

  5. rabbitmq /usr/lib/rabbitmq/bin/rabbitmq-server: line 85: erl: command not found

    Problem description : Using command /sbin/service rabbitmq-server start start-up Rabbitmq when , newspaper : Job for rabbitmq-server.service failed b ...

  6. Computer network application layer cookie

    One . In life cookie Whether you know it or not Cookie What is it? , In your life , It must have been used . Remember when you used your browser to browse the web , When you're going to land , There's an option on the page to remember your password or log in automatically , When you choose , You use Coo ...

  7. Put the expression package in Sina blog MySQL Incomplete database version, a bunch of scattered code that may be used

    header = {'Cookie': 'SINAGLOBAL=7368591819178.463.1491810091070; ALF=1558832450; SCF=Ajrc1sxuwynVIu_ ...

  8. python generator &amp; iterator

    List generator To generate [1x1, 2x2, 3x3, ..., 10x10]>>> [x * x for x in range(1, 11)]for You can also add if Judge >&g ...

  9. RT-thread Kernel thread kernel object

    stay RT-Thread Real time operating system , The task is implemented by threads , Thread is RT-Thread The most basic dispatching unit in the system , It describes the context of a task execution , It also describes the priority of the task . Important tasks can have relatively high priority ...

  10. 에러 처리 HandleErrorAttribute

    ExceptionInfo info = new ExceptionInfo(); info.Success = false; info.Message = filterContext.Excepti ...