css抖动基础

最新推荐文章于 2022-07-20 15:27:05 发布
最新推荐文章于 2022-07-20 15:27:05 发布
阅读量859 收藏 1
点赞数 6
分类专栏： html历史 网页历史 web标准 html+css+js 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24928451/article/details/44539349
版权


<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <tilte>Document</title>
        <style>
        @-webkit-keyframes buzz-out{
            0%{
                -webkit-transform:translateX(10px)rotate(20deg);
            }
            30%{
                -webkit-transform:tranalateX(-10px)rotate(-20deg);


            }
            60%{
                -webkit-transform:translateX(30px)rotate(50deg);
            }
            100%{
                 -webkit-transform:translateX(-30px)rotate(-50deg);
            }
        }
        #buzz{
            width:1000px;
            height:400px;
            margin:200px;
            background:#eee1e1;
            position:relative;
        }
        #buzz:hover {
            -webkit-animation-name:buzz-out;
            -webkit-animation-duration:1s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-iteration-count:100;
        }


        </style>
</head>
<body>
    <div id="buzz">
        <p></p>
    </div>  
</body>

</html>


以上是代码。

有关属性：animation

animation-name:规定需要绑定到选择器keyframe名称

animation-duration:规定花费的时间以秒或毫秒记

animation-timing-fuction:规定动画速度曲线

animation-delay:规定开始之前的延迟

animation-iteration-count:规定动画应播放的次数

animation-direction:规定是否应该轮流反向播放动画

 @-webkit-keyframes buzz-out{
            0%{
                -webkit-transform:translateX(10px)rotate(20deg);
            }
            30%{
                -webkit-transform:tranalateX(-10px)rotate(-20deg);


            }
            60%{
                -webkit-transform:translateX(30px)rotate(50deg);
            }
            100%{
                 -webkit-transform:translateX(-30px)rotate(-50deg);
            }
        }

这里可以设置抖动的幅度

前端hacker97
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS3之2D转换transform
m0_61547956的博客
04-05 369
1、2D转换translate transform:translate(20px,30px)向右平移20px，向下平移30px，在浏览器中，y轴越往下越大，x轴越往右越大。 translateX、translateY，如果写translate(20px),默认x,y方向都平移20px。 之前让一个子盒子在父盒子里面垂直水平居中，先子绝父相，然后top:50%,left:50%，意思是先走父盒子宽度和高度的一半，然后再利用margin值，往上和往左走子盒子高度和宽度的一半。 现在有了translate
CSS高级特效-transform
yen_zz的博客
04-07 300
1.2D平移 transform：translate transform: translate(100px, 200px); x轴向右移动100px y轴向下移动200px transform: translate(0, 50px); transform: translateY(50px); x轴不移动,y轴向下移动50px transform: translateX(-30px); x轴向左移动30px 2.2D倾斜 transform：skew(ax,ay) transform
Transform【变形】属性
精彩人生
02-11 6100
来源：http://www.w3cplus.com/content/css3-transform 今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。 Transform字面上就是变形，改变的意思。在CSS3中tr
CSS3中的transform、translate和transition
庸人方自扰，自在就好
03-02 6996
之前一直搞不清楚哪个是哪个，哪个有什么用，因为三个都有trans前缀，可以称为“trans一族”。 1、transform 属性定义及使用说明：transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 语法：transform: none|transform-functions; 例如： transform: translate(-30px,-50%); transform:rotate(7deg); 2、translate translate是t.
transform:translate()方法坐标详解
热门推荐
从0到1的成长的博客
01-05 3万+
定义：translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 但是如何移动呢？于是做了以下实验： 实验1.设置transform:translate(0px,0px),即延X轴和延Y轴均移动0像素，保持原有位置，做对比实验，为了方便说明，添加了坐标轴，如下所示： 实验2：设置transform:translate(10px,10px),即延X轴和延Y轴均移动10像素，对比原图位置，移动后的图如下所示， 结论：当移动的数是正数时，在Y轴方向上，相对原来的位
css 实现摇晃动画——css基础
yehaocheng520的博客
07-20 3438
css 实现摇晃动画——css基础
CSS基础学习
whisper49的博客
03-22 1047
一、CSS简介 1、CSS是什么 CSS 指层叠样式表 (Cascading Style Sheets) CSS是一组样式设置的规则，用于控制页面的外观样式（如段落、图片等） 样式通常保存在外部的 .css 文件中 2、CSS的作用 CSS是网页的美容师（因为HTML只能做简单的样式） CSS的使用可以使网页的结构（HTML）与样式（CSS）相分离，便于团队开发 CSS可以让样式复用，利用后期维护 二、CSS基本用法 1、CSS语法 css语法规则由两部分构成：① 选择器；② 一条或多条声明 cs
css基础
小飞的博客
07-12 356
1.css发展历程 层叠样式表 (Cascading Style Sheets)，用来渲染HTML标签的外观样式。 • CSS是由万维网联盟（W3C）制定的标准。 • CSS的目的是控制网页元素的外观与位置。 2.css的引入方式 （1）内联式(Inline Style):也叫内嵌式或行内式，在html代码中嵌入css样式，只 对当前标签起作用。(不推荐) （2）嵌入式(Embedding):也叫内页样式,在网页上使用style标签包裹样式代码。 (不推荐) type属性可以缺省。声明在head标签内。 （
CSS基础知识总结
m0_53725419的博客
09-13 320
前言：学习Vue要求要有中级的html,css和js的基础，来补一下css的基础 一、CSS简介 1.1页面美容师 功能：美化网页，布局页面 CSS是层叠样式表的简称，也是一门标签语言 最大价值：让HTML专心去做结构，结构（HTML）与样式（CSS）分离 ...
JS实现简单抖动效果
10-19
此外，为了使抖动更加平滑，可以考虑使用CSS的`transition`属性或者JavaScript的`requestAnimationFrame`方法来实现更流畅的动画效果。 总的来说，通过JavaScript实现的抖动效果可以增强网页的交互性和动态性，提供...
QQ界面的抖动效果 js+css
08-18
在QQ界面的抖动效果中，CSS的关键在于使用`@keyframes`规则定义动画。例如： ```css @keyframes shake { 0% { transform: translateX(0); } 5% { transform: translateX(-10px); } 10% { transform: translateX...
图片抖动特效
02-02
在图片抖动特效中，CSS可以定义图片初始和结束状态，以及变化过程中的关键帧。通过改变`transform`属性，比如`translateX`和`translateY`，可以控制图片在x轴和y轴上的位移，从而达到抖动的效果。此外，`animation-...
CSS3波浪闪动文字动画特效特效代码
03-20
首先，我们要理解CSS3中的关键帧动画（@keyframes）是实现这种效果的基础。通过定义动画的开始和结束状态，以及在中间阶段设置多个时间点，我们可以控制文本在整个动画过程中的变化。例如，可以定义一个名为`wave-...
js 鼠标放图片上抖动效果
10-28
基础的实现虽然简单，但是可以通过修改抖动频率、幅度等参数来调整效果，以适应不同的场景需求。 #### 四、示例代码分析 ```html ;base64,..." class="shakeimage" onmouseover="shake(this,'onmouseout')" /> ```...
css属性字体（font）样式使用详解
hacker97
04-16 3988
现在主要设置的字体样式种类有以下五种 1、font-style：指定文本字体样式 itailc：指定为斜体 oblique：对于没有设计过斜体样式的文字强行用代码使其倾斜 2、font-variant：指定文本是否为小型的大写字母（只对字母有效） small-cap：小型的大写字母 3、font-weight：指定文本字体的粗细 bold：粗体400 4、font-size：指定文
css+javascript网页抖动图标、抖动制作教程，输入抖动命令js执行命令让网页抖动起来（详细版）
hacker97
04-02 3243
首先我想说关于网页中做css抖动不难，用js命令也不难，下面我将为大家详细介绍具体做法。 一、我们要先有个网页代码的基本架构，比如 抖动网页的基本框架 我们先随便建一点标签 我们先随便建一点标签 我们先随便建一点标签 我们先随便建一点标签 我们先随便建一点标签 二、为了使我们的抖动更加明显我们可以在网页中插入几张图片，比如 抖动网页
css盒模型div嵌套制作网页块状部分案例
hacker97
04-26 2093
html文件 css文件 *{ margin:0px ; padding: 0px; } #top{ width: 100%; height: 50px; background-color:#000000 ; } #top_nav{ w
深入理解热区链接
hacker97
03-26 2002
不一样的热区链接，个人独特的理解方式，更加深入地掌握，看了定会有所收获！
XHTML与CSS基础知识入门指南
本篇教程是关于XHTML与CSS基础知识的教学，旨在为有一定HTML和CSS基础的网页开发者提供一个从表格布局向Web标准（div+css）过渡的学习路径。对于初次接触网页制作的新手，需要具备基本的网页基础知识，包括了解表格...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值