CSS3+HTML5特效5 - 震动的文字

先看效果（把鼠标移上去看看）

abcd

这个效果很简单，就是移动文字的位置模拟出震动的效果。

Css

 1 <style>
 2 @-webkit-keyframes shake {
 3     0%{
 4         -webkit-transform:translate(2px, 2px);
 5     }
 6     25%{
 7         -webkit-transform:translate(-2px, -2px);
 8     }
 9     50%{
10         -webkit-transform:translate(0px, 0px);
11     }
12     75%{
13         -webkit-transform:translate(2px, -2px);
14     }
15     100%{
16         -webkit-transform:translate(-2px, 2px);
17     }
18 }
19 @keyframes shake {
20     0%{
21         transform:translate(2px, 2px);
22     }
23     25%{
24         transform:translate(-2px, -2px);
25     }
26     50%{
27         transform:translate(0px, 0px);
28     }
29     75%{
30         transform:translate(2px, -2px);
31     }
32     100%{
33         transform:translate(-2px, 2px);
34     }
35 }
36 .shake{
37     position: relative;
38     top: 30px;
39     left: 100px;
40     width: 200px;
41     color: #0000ff;
42 }
43 .shake:hover{
44     -webkit-animation:shake 0.2s infinite;
45     animation:shake 0.2s infinite;
46 }
47 </style>

Html

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

转载于:https://www.cnblogs.com/z-gia/p/3556742.html

CSS3+HTML5特效5 - 震动的文字相关推荐

html语言文字闪烁,CSS3+HTML5特效6 - 闪烁的文字
先看效果 abcd 这个效果也比较简单,利用keyframes对文字的大小.透明度及颜色做循环显示. CSS @-webkit-keyframes flash { 0%{ opacity:; } 50 ...
html5特效手机震动,html5 可以让用户按一下手机键盘手机震动一下吗
HTML 按我手机会震动 CSS .shock{ font-size: 15px; font-weight: bold; color: red; } JS // ...
html5文字特效教程视频,IT兄弟连 HTML5教程 CSS3属性特效自定义文字
原标题:IT兄弟连 HTML5教程 CSS3属性特效自定义文字字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页 ...
html5显示状态灯,如何使用css3+html5来制作文字霓虹灯效果
使用css3+html5来制作文字霓虹灯效果的特点文字带有闪烁的霓虹灯动画,且文字选中时也有很酷的动画特效: 文字可动态输入,且输入的文字实时渲染霓虹灯特效. 使用css3+html5来制作文字霓虹 ...
html霓虹灯效果图,如何使用css3+html5来制作文字霓虹灯效果（付完整代码）
在科技日益发展的今天,人们对于审美越来越挑剔,这就要求我们对于前端开发的态度更加的严谨的同时,需要加入新鲜的元素,以达到吸引目光的目的.那么今天本文带大家了解一下如何使用css3+html5来制作文字 ...
html5闪光字效果,如何使用css3+html5来制作文字霓虹灯效果（付完整代码）
在科技日益发展的今天,人们对于审美越来越挑剔,这就要求我们对于前端开发的态度更加的严谨的同时,需要加入新鲜的元素,以达到吸引目光的目的.那么今天本文带大家了解一下如何使用css3+html5来制作文字 ...
HTML5怎么让图片和文字重叠,利用HTML5实现全屏图片文字过渡切换特效
特效描述:利用HTML5实现全屏图片文字过渡切换特效.利用HTML5实现全屏图片文字过渡切换特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Masupitami Wal ...
7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
怎么把 html做成雪花特效,CSS3 HTML5下雪特效雪花飘飘
CSS3 HTML5下雪特效雪花飘飘 $(document).ready(function () { makeSnow("christmasSnow", "bg.jpg ...
html 文字悬停翻转,html5+TweenMax.js鼠标悬停文字翻转动画特效
8种动画效果十分流畅的html5+TweenMax.js鼠标悬停文字翻转动画特效,支持英文字母和中文汉字. 查看演示下载资源: 14 次下载资源下载积分: 20 积分 js代码 const le ...

CSS3+HTML5特效5 - 震动的文字

CSS3+HTML5特效5 - 震动的文字相关推荐

最新文章

热门文章