如何用SCSS制作小铃铛振动/震动/摇晃/晃动的特效/效果?

简介: 如何用SCSS制作小铃铛振动/震动/摇晃/晃动的特效/效果?


放大了看效果

 
// 摇晃小铃铛振动/震动/摇晃/晃动的特效/效果----------------------------------------
[sg-shaking] {
  display: inline-block;
  transform-origin: center top;
  animation: sg-shaking 1s alternate forwards;
}
 
@keyframes sg-shaking {
  10% {
    transform: translate(.125rem, -0.125rem) rotate(0deg) scale(1);
  }
 
  15% {
    transform: translate(-0.125rem, -0.125rem) rotate(-40deg) scale(1);
  }
 
  25% {
    transform: translate(.0625rem, -0.0625rem) rotate(30deg) scale(1.1);
  }
 
  40% {
    transform: translate(.125rem, -0.125rem) rotate(-20deg) scale(1.2);
  }
 
  55% {
    transform: translate(-0.125rem, -0.125rem) rotate(15deg) scale(1.3);
  }
 
  70% {
    transform: translate(.0625rem, -0.0625rem) rotate(-10deg) scale(1.2);
  }
 
  85% {
    transform: translate(0rem, 0rem) rotate(5deg) scale(1);
  }
 
  100% {
    transform: translate(0rem, 0rem) rotate(0deg) scale(1);
  }
}
// ----------------------------------------


相关文章
解决使用-webkit-app-region后鼠标点击失败的问题
在开发中,如果我们想要实现窗口拖动的功能,可以通过给相应的元素设置 -webkit-app-region: drag 属性来实现。然而,这样做会引发一些问题,包括当前元素权级高于其他元素、无法触发鼠标相关事件以及双击全屏和还原窗口大小功能失效等。本文将介绍如何解决这些问题,实现既能拖动窗口又不影响窗口内部元素的需求。
2077 0
|
Web App开发 缓存 前端开发
中高级前端高频面试题分享(一)
中高级前端高频面试题分享
257 0
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
566 6
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
前端开发
css动画效果(边框流光闪烁阴影效果)
css动画效果(边框流光闪烁阴影效果)
|
前端开发 JavaScript
前端 CSS 经典:文字描边
前端 CSS 经典:文字描边
494 0
|
JavaScript
【报错】onMounted is called when there is no active component instance too be associated with.
【报错】onMounted is called when there is no active component instance too be associated with.
1008 4
|
前端开发 JavaScript 算法
程序技术好文:高德地图经纬度坐标拾取工具
程序技术好文:高德地图经纬度坐标拾取工具
681 0
|
前端开发 容器
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(上)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
442 1
Umi路由跳转传参方式都有哪些?
Umi路由跳转传参方式都有哪些
498 0