当前位置: 首页» JS特效»

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 加载动画 在线预览 特效
 168  0

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 动画
 191  0

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
 100  0

文字动画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
 132  0

基于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
 179  0

基于js实现的键盘导航搜索功能demo

基于js实现的键盘导航搜索功能demo本文主要介绍:1. 项目介绍2. 项目效果展示3. 一步步实现项目效果4. 踩坑## 一、项目介绍  **功能描述:**- 一个优美快捷的个人导航页,附加主流搜索引擎**搜索**功能- 为键盘上的 26 个字母绑定了导航网址,敲击键盘上的字母可跳转相应网页- 自定义与字母关联的导航地址,数据存在本地 LocalStorage 中- 基于原生
  键盘导航 导航网站 快捷导航
 196  0

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,
  压缩图片 图片水印 图片下载
 218  0

基于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特效 前进 后退
 146  0

基于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-
  网站 全站下载 网站模版 网站下载
 85  0

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
  刮奖 抽奖 随机抽奖
 145  0

js实现draggable模块拖动效果demo

实现draggable模块拖动效果demo   // 查询draggable和droppable      const draggable = document.querySelector;      const droppables = document.querySelectorAll;    &nbsp
  拖动特效 图片拖动
 145  0

基于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 &&amp
  日期选项 日历 js日期
 113  0

基于js实现的变色测试demo

基于js实现的变色测试demo,经过选择逐渐加深测试难度 // 事件兼容方法,兼容ie function addEvent {if { element.addEventListener;} else if { element.attachEvent;} else { element = handler;} } window.onload = function() {addEvent,
  游戏 色块检测 变色测试
 133  0

基于js实现的轮播图效果demo

基于js实现的轮播图效果demo <div id="carousal"><button type="button" class="suporka-carousel__arrow suporka-carousel__arrow--left" style="" id="suporka-prev-btn"> <</button><div
  轮播图 js幻灯片
 127  0

基于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游戏 小游戏 在线游戏
 103  0

基于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 导出 打印
 159  0

brandis实现端与端之间的数据交互加密

#Brandis:为每个人提供端到端加密 此应用程序旨在说明端到端安全连接的易用性加密可以在现代web浏览器中实现,只需使用少量的JavaScript代码。Brandis本身不实现加密;相反,它依赖于由浏览器提供,并向此API公开一个用户界面允许非程序员使用它。要开始,请使用顶部的按钮生成公钥/私钥对,然后按照那里的指示去做。此应用程序的源代码位于公共域中,可以在上访问. 我们建议你将此
  加密 端与端加密 数据加密
 137  0

基于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
 97  0

实时适应各类型设备排版效果demo

实时适应各类型设备排版效果demo
  排版 demo 移动端
 102  0

图片模拟gif并可以实时访问demo

图片模拟gif并可以实时访问demo // 支持保存当前图片状态 // 读取url参数可以生成url表示的图片状态 // 图片可以暂停、恢复动画 const DOM = document.querySelector // 这个是x轴展开的图片 // 参数二是最大宽度,参数三是每个图片的宽度,参数四是跑一轮需要的时间 function Animate { let size = 0 var cu
  gif暂停 gif特效 demo
 155  0