CSS3加载动画在线预览特效
CSS3加载动画在线预览特效 @keyframes loadingH { 0% { width: 15px; } 50% { width: 35px; padding: 4px; } 100% { width: 15px; }}@keyframes loadingI { 100% { transform: rotate; }}@keyframes bounce { 0%, 10
CSS3 加载动画 在线预览 特效
CSS渐变背景动画demo
CSS渐变背景动画demo <style> body {background: linear-gradient;background-size: 400% 400%;animation: gradient 15s ease infinite;height: 100vh; }@keyframes gradient { 0% { background-position: 0% 50%
css 渐变背景 demo 动画
css动画导航悬停特效demo
css动画导航悬停特效demo /* Top and Bottom borders go out */div.topBotomBordersOut a:before, div.topBotomBordersOut a:after{ position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content:
css 菜单导航 特效 demo
文字动画css淡入特效demo
使用纯css实现的文字淡入淡出特效demo,.sp-container { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; background: -webkit-radial-gradient, rgba 35%, rgba); background: -moz-radial
css 文字特效 demo
基于css实现图片的瀑布流排版demo
基于css实现图片的瀑布流排版demo /*多栏布局*/.container{/*列宽*/-webkit-column-width:202px;-moz-column-width:202px; -webkit-column-gap:5px;-moz-column-gap:5px;}/*数据块 砖块*/ .pin{ padding: 15px 0 0 15px; float:left; } .b
瀑布流图片 瀑布流demo
基于js实现的键盘导航搜索功能demo
基于js实现的键盘导航搜索功能demo本文主要介绍:1. 项目介绍2. 项目效果展示3. 一步步实现项目效果4. 踩坑## 一、项目介绍 **功能描述:**- 一个优美快捷的个人导航页,附加主流搜索引擎**搜索**功能- 为键盘上的 26 个字母绑定了导航网址,敲击键盘上的字母可跳转相应网页- 自定义与字母关联的导航地址,数据存在本地 LocalStorage 中- 基于原生
键盘导航 导航网站 快捷导航
js实现imageCompress压缩图片水印和下载demo
js实现imageCompress压缩图片水印和下载demonew Vue({ el: '#app', data: { file:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1477436123,3577936229&fm=26&gp=0.jpg', width: 500, quality: 1,
压缩图片 图片水印 图片下载
基于js实现前进后退路径等问题demo
基于js实现前进后退路径等问题demo <div class="nav-area"><button class="nav-area-back" onclick="router.back();">后退</button><button class="nav-area-front" onclick="router.front();">前进</butt
js特效 前进 后退
基于css3实现的全站网站模版demo下载
基于css3实现的全站网站模版demo下载 <style> .container {width: 1200px;margin: 0 auto; } .text-center {text-align: center; } body {padding: 0;margin: 0; } a, a:link, a:visited, a:hover, a:active {text-
网站 全站下载 网站模版 网站下载
js实现随机中奖特效demo
js实现随机中奖特效demo <script type="text/javascript">var bodyStyle = document.body.style;bodyStyle.mozUserSelect = "none";bodyStyle.webkitUserSelect = "none";var img = new Image();var canvas = documen
刮奖 抽奖 随机抽奖
js实现draggable模块拖动效果demo
实现draggable模块拖动效果demo // 查询draggable和droppable const draggable = document.querySelector; const droppables = document.querySelectorAll;  
拖动特效 图片拖动
基于js实现的日期选择特效demo
基于js实现的日期选择特效demofor ,r = 0; for Object.prototype.hasOwnProperty.call && ; c && c; while h.shift; return l.push.apply, a() } function a() { for {for { var o = a; 0 !== r &&
日期选项 日历 js日期
基于js实现的变色测试demo
基于js实现的变色测试demo,经过选择逐渐加深测试难度 // 事件兼容方法,兼容ie function addEvent {if { element.addEventListener;} else if { element.attachEvent;} else { element = handler;} } window.onload = function() {addEvent,
游戏 色块检测 变色测试
基于js实现的轮播图效果demo
基于js实现的轮播图效果demo <div id="carousal"><button type="button" class="suporka-carousel__arrow suporka-carousel__arrow--left" style="" id="suporka-prev-btn"> &lt;</button><div
轮播图 js幻灯片
基于js实现2048游戏测试demo
基于js实现2048游戏测试demo,经测试 可以正常使用 // Restart the gameGameManager.prototype.restart = function () { this.storageManager.clearGameState(); this.actuator.continueGame(); // Clear the game won/lost message th
2048游戏 小游戏 在线游戏
基于highcharts实现统计demo
基于 highcharts实现统计demo,支持报表下载图片,文件,pdf等多种方式$.ready { $.highcharts({ title: {text: 'Monthly Average Temperature',x: -20 //center }, subtitle: {text: 'Source: WorldClimate.com',x: -20 }, xAxis: {cat
highcharts 导出 打印
brandis实现端与端之间的数据交互加密
#Brandis:为每个人提供端到端加密 此应用程序旨在说明端到端安全连接的易用性加密可以在现代web浏览器中实现,只需使用少量的JavaScript代码。Brandis本身不实现加密;相反,它依赖于由浏览器提供,并向此API公开一个用户界面允许非程序员使用它。要开始,请使用顶部的按钮生成公钥/私钥对,然后按照那里的指示去做。此应用程序的源代码位于公共域中,可以在上访问. 我们建议你将此
加密 端与端加密 数据加密
基于css网站排版demo
基于css网站排版demo<div id="nav"><div class="container"> <button type="button" class="menu-button"> 三 </button> <input type="checkbox" class="menu-button-checkbox"> <ul
网站排版 demo css
排版 demo 移动端
图片模拟gif并可以实时访问demo
图片模拟gif并可以实时访问demo // 支持保存当前图片状态 // 读取url参数可以生成url表示的图片状态 // 图片可以暂停、恢复动画 const DOM = document.querySelector // 这个是x轴展开的图片 // 参数二是最大宽度,参数三是每个图片的宽度,参数四是跑一轮需要的时间 function Animate { let size = 0 var cu
gif暂停 gif特效 demo
