解析css3 shake 抖动样式
前端时间做项目发现一抖动按钮挺吸引眼球的,研究了下实现原理,在此和大家分享下:
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像)。这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。
其中有前辈为大家编写好了csshake.css ,大家可以去参考下:http://www.webhek.com/misc/css-shake
Csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动,下面一起来看看介绍:
使用教程
首先引入css shake的样式表文件。
<link type="text/css" href="csshake.css">
给你的DOM元素添加shake class样式
<div class="shake"></div>
添加抖动样式,一共9种,也可以看DEMO对应添加即可
<div class="shake shake-hard"></div>
<div class="shake shake-slow"></div>
<div class="shake shake-little"></div>
<div class="shake shake-horizontal"></div>
<div class="shake shake.vertical"></div>
<div class="shake shake-rotate"></div>
<div class="shake shake-opacity"></div>
<div class="shake shake-crazy"></div> 另外还能通过.freeze
,.shake-constant
&.hover-stop
来控制状态,具体自己试下哦! 接下来是我自己编写的一个鼠标放上停止抖动的小实验:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>shake study</title>
<style type="text/css">
.box{width: 200px;height: 100px;background-color: #ccc;margin:30px auto;}
.shake{
-webkit-animation-name: shake_box;
-ms-animation-name: shake_box;
animation-name: shake_box;
-webkit-animation-duration: 100ms;
-ms-animation-duration: 100ms;
animation-duration: 100ms;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
/*-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;*/
}
.shake:hover{
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/*-webkit-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;*/
}
@keyframes shake_box{
0% {transform: translate(0px, 0px) rotate(0deg)}
20% {transform: translate(1.5px, -2.5px) rotate(-1.5deg)}
40% {transform: translate(-2.5px, 0.5px) rotate(-0.5deg)}
}
@-ms-keyframes shake_box{
0% {-ms-transform: translate(0px, 0px) rotate(0deg)}
20% {-ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg)}
40% {transform: translate(-2.5px, 0.5px) rotate(-0.5deg)}
}
</style>
</head>
<body>
<div class="box shake"></div>
</body>
</html> 最后,欢迎大家指出我的不足之处哟
解析css3 shake 抖动样式的更多相关文章
- 炫酷的CSS3抖动样式:CSS Shake
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- css3美化滚动条样式
1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...
- 解决CSS3多列样式column-width布局时内容被截断、错乱
一.问题 使用CSS3的column-width: auto | <length>属性时,出现排列的内容被截断,出现错位的现象. 二.原因 需要为图片容器设置高度,不然会崩掉. 三.解决方 ...
- css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
- css3 @keyframe 抖动/变色动画
一.纯css实现 .shake{ //抖动的元素 width: 200px; height: 100px; margin: 50px auto; background: ...
- CSS3:scrollbar样式设置
CSS3:scrollbar样式设置 1. 设置出现滚动条的方式 overflow:scroll --- x和y方向都会出现滚动条 或者 overflow-x:scroll --- 只有x方向出现滚动 ...
- 从0搭建vue3组件库:Shake抖动组件
先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这 ...
- 从浏览器渲染层面解析css3动效优化原理
引言 在h5开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题: 减少页面DOM操作,可以使用CSS实现的动效不多出一行js代码 使用绝对定位脱离让 ...
随机推荐
- BZOJ 3998: [TJOI2015]弦论(后缀自动机)
传送门 解题思路 \(T=0\)时就和SP7258一样,\(T=1\)时其实也差不多,只不过要把每个点原来是\(1\)的权值改为\(Right\)集合的大小. 代码 #include<iostr ...
- php编译安装phalcon框架 - centos
使用官方的文档安装方式会报错,进行了一些实验,终于安装成功! 安装phalcon前提是需要安装php的pdo,如果使用mysql 需要安装 pdo_mysql 先看下git的版本号git --vers ...
- shellcode加密与解密
// Encoder.cpp : Defines the entry point for the console application.// #include "stdafx.h" ...
- Java桌球小游戏
版本一.出现窗口package cn.xjion.game;/** * 出现窗口 * @author xjion * */import java.awt.*;import javax.swing.*; ...
- linux python3 venv 虚拟环境报错 [-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 2.
解决办法: 先创建没有pip的虚拟环境,然后启动虚拟环境后,再安装pip 办法一: 亲测失败了... python3 -m venv --without-pip py36env 办法二 sudo ap ...
- vue中配置可修改的服务器接口api
https://www.jianshu.com/p/377bfd2d9034?utm_campaign 太坑了,找了全网,几乎都不能用,也不知道哪写错了,这个是可以用的.
- 使用redis实现客户端和服务端token验证
实在是思维江化啊,没有想到可以给redis设置不同的key值来实现不同key值存储不同的value值,而一直想着给一个名为token的key值新增不同的数据,并设置过期时间,然而这样却不能新增只能做到 ...
- POJ3630-Phone List-Trie字典树模板题
Given a list of phone numbers, determine if it is consistent in the sense that no number is the pref ...
- C# 十六进制转换ASCII
string s = "这里放十六进制字符串"; byte[]buff=new byte[s.Length/2]; int ind ...
- 2018-8-10-win10-uwp-气泡
title author date CreateTime categories win10 uwp 气泡 lindexi 2018-08-10 19:16:50 +0800 2018-2-13 17: ...