让你的网页"抖起来"?!?
细心的小伙伴可能发现我的左下角有一个抖起来的小按钮,然后页面就开始皮了起来,哈哈好快乐啊
没有利用js,单独的使用了css3的动画就实现了这个效果
css设置
@keyframes shake-it{
0%{
text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
}
25%{
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}
50%{
text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
}
100%{
text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
}
}
html文本设计
<button id="btn1">皮一下</button>
12131312
这里面写什么都可以,我就简单写了点文字
JS设计
function paul_shake(action, selector) {
var status = false;
action.addEventListener("click", function () {
if(status === true){
status = false;
action.innerHTML = "抖起来"
selector.style = "overflow: auto;";
}
else{
status = true;
action.innerHTML = "停止抖"
selector.style = "overflow: auto;animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55)";
}
})
}
paul_shake(document.getElementById("btn1"), document.body);
总结
我们的页面就像抖音一样 抖了起来
代码其实就是这么快乐
让你的网页"抖起来"?!?的更多相关文章
- 利用抖音Cookie充值接口提取支付链接,个人调起原生微信h5支付宝h5支付
最近开始搞一些个人支付通道的开发,方便个人不用和第三方平台签约就能收款,省去很多流程手续的成本. 然后翻了一下网上并没有太多现成的技术教程,只能自己研究着搞了. 这次要分享的是利用抖音的充值接口,去分 ...
- 抖音网页版高清视频抓取教程selenium
废话不多说,直接上代码 from selenium import webdriver from selenium.webdriver import ChromeOptions import time ...
- “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型,或该类型未注册为安全类型。”
自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...
- 浅析 JavaScript 的函数节流和去抖
现代网页的实现上,会有很多交互上的优化,比如常见的 滚动加载 ,输入联想 等等.他们的实现思路很简单,以滚动加载而言,无非就是去是增加一个滚动的事件监听,每次滚动判断当前的元素是否已经滚动到了用户的可 ...
- Python 爬虫——抖音App视频抓包
APP抓包 前面我们了解了一些关于 Python 爬虫的知识,不过都是基于 PC 端浏览器网页中的内容进行爬取.现在手机 App 用的越来越多,而且很多也没有网页端,比如抖音就没有网页版,那么上面的视 ...
- 使用python爬虫,批量爬取抖音app视频(requests+Fiddler+appium)
抖音很火,楼主使用python随机爬取抖音视频,并且无水印下载,人家都说天下没有爬不到的数据,so,楼主决定试试水,纯属技术爱好,分享给大家.. 1.楼主首先使用Fiddler4来抓取手机抖音app这 ...
- from appium import webdriver 使用python爬虫,批量爬取抖音app视频(requests+Fiddler+appium)
使用python爬虫,批量爬取抖音app视频(requests+Fiddler+appium) - 北平吴彦祖 - 博客园 https://www.cnblogs.com/stevenshushu/p ...
- Python-制作抖音图片
---------------------------------------------------------------------------------------------------- ...
- Dreamweaver杀手!Illustrator终结者?Flash的末日?图形图像设计程序之网页版
Dreamweaver杀手!Illustrator终结者?Flash的末日?图形图像设计程序之网页版 阅读: 评论: 作者:Rybby 日期: 来源:rybby.com Adobe 家的 Il ...
随机推荐
- Angular(04)-知识点脑图
点击左键 => 拖拽图片 => 新标签页查看图片 => 放大拖拽查阅
- Android 项目优化(一):项目代码规范优化
项目代码规范为主要包含:类,常量,变量,ID等命名规范:注释规范:分包规范:代码风格规范. 项目代码规范是软件开发过程中非常重要的优化环节. 目前的开发社区提供了很多的开发规范文档,阿里巴巴推出了&l ...
- 教程视频、项目源码、全部干货【微信小程序、React Native、Java、iOS、数据结构】
把我收藏多年的教学视频.项目源码分享给大家,大神就可以忽略了,很多东西都是基础性的,都是期初学习阶段收集的东西. 微信小程序(入门级,有web前端基础的人群): 链接: https://pan.bai ...
- SpringBoot项目下的JUnit测试
在SpringBoot项目里,要编写单元测试用例,需要依赖4个jar.一个是最基本的JUnit,然后是spring-test和spring-boot-test. <!--test--> & ...
- 011.Kubernetes二进制部署kube-scheduler
一 部署高可用kube-scheduler 1.1 高可用kube-scheduler介绍 本实验部署一个三实例 kube-scheduler 的集群,启动后将通过竞争选举机制产生一个 leader ...
- GithubPages+Hexo博客搭建记录
目录 前言 安装Node.js 安装Git 安装Hexo 查看效果 建立Github Pages 注册Github帐户 建立托管博客的仓库 制作SSH密钥 添加公钥到Github 测试连接 把本地的博 ...
- 编辑器之神vim的一些常用快捷键整理
yy:复制 光标所在的这一行 4yy:复制 光标所在行开始向下的4行 p:粘贴 dd:剪切(删除) 光标所在的这一行 4dd:剪切(删除) 光标所在行向下的4行 D:从当前的光标开始向后剪切,一直到行 ...
- vue_04day 路由初始
目录 vue_04 项目初始: vue 文件构造: vue项目目录结构: 项目入口(main.js): vue项目启动生命周期: 根组件(vue.js): router.js: 创建的页面: 全局样式 ...
- 多线程六 同步容器&并发容器
同步容器(使用的是synchronized,并且不一定是百分百安全) 本篇续 -- 线程之间的通信 ,介绍java提供的并发集合,既然正确的使用wait和notify比较困难,java平台为我们提供了 ...
- Docker Compose file
1. Service configuration Compose file 是一个YAML文件,用于定义 services, networks, 和 volumes.其默认路径是./docker-c ...