让你的网页"抖起来"?!?
细心的小伙伴可能发现我的左下角有一个抖起来的小按钮,然后页面就开始皮了起来,哈哈好快乐啊
没有利用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 ...
随机推荐
- 【JS档案揭秘】第三集 深入最底层探秘原型链
关于这部分我看过大量的文章,数不胜数,包括阮一峰的继承三部曲,还有各种慕课的视频教程,网上无数继承方法的对比.也对很多概念存在长期错误的理解.今天做一个正确的总结,用来给原型链和继承这块知识画上句号, ...
- 拥抱自动化,CODING 2.0 持续集成全新上线
在文章开始前,做一个小调查,在您的软件项目中集成一行新代码平均需要花多长时间? 15 分钟 一小时 半天 一天及以上 注意这里的集成是指将源码放在一起,并验证源码可以作为一个一致.运行可靠的软件的过程 ...
- [20191125]探究等待事件的本源.txt
[20191125]探究等待事件的本源.txt --//当工作中遇到oracle的性能问题时,查看awr报表提供很好的解决问题途径.但是有时候很容易想当然.--//比如以前我一看到 log file ...
- 并发编程~~~多线程~~~线程queue, 事件event,
一 线程queue 多线程抢占资源,只能让其串行. 互斥锁 队列 import queue q = queue.Queue() # 先进先出 q = queue.LifoQueue() # 先进后出 ...
- gunicorn Python部署应用
对于flask应用 启动命令为 python app.py 使用gunicorn启动 pip install gunicorn python gunicorn --workers=7 switch_a ...
- 池化技术(二)HikariCP是如何管理数据库连接的?
基于依赖程序的版本信息:HikariCP:3.3.1 驱动程序mysql-connector-java:8.0.17 上一篇:Druid是如何管理数据库连接的 零.类图和流 ...
- Jedis & spring-data-redis
当我们了解了redis的五大数据类型,手动去敲一敲每个数据类型对应的命令,无论是再来看jedis,还是spring-data-redis都是很轻松的,他们提供的API都是基于原生的redis命令,可读 ...
- SpringMVC参数绑定,这篇就够了!
SpringMVC参数绑定,简单来说就是将客户端请求的key/value数据绑定到controller方法的形参上,然后就可以在controller中使用该参数了 下面通过5个常用的注解演示下如何进行 ...
- Selenium(七):选择框(radio框、checkbox框、select框)
1. 选择框 本章使用的html代码: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- GO-逻辑判断(if,else if,else,switch)
一.if逻辑判断 package main import "fmt" func main() { var a =10; if a>10 { //大括号前不能回车 fmt.Pr ...