网页特效
青菜馒头
这个作者很懒,什么都没留下…
展开
-
文字下划线效果(标题hover效果)
文字下划线效果(标题hover效果) <!-- html结构 --><div><a href="javascript:void(0);" class="demo1">自己实现的hover效果</a></div>/* css样式 */ .demo1{ position: relative; text-decoration: non转载 2016-09-12 15:58:58 · 5950 阅读 · 0 评论 -
使用rainyday.js插件制作雨滴效果
插件介绍 rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件。该雨滴效果插件的特点是使用简单,易于集成。Rainyday.js是一个使用HTML5特性的纯js库,几乎所有的现代浏览器都支持它。 简要教程rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件。该雨滴效果插件的特点是使用简单,易于集成。使用方法在转载 2016-10-08 14:32:00 · 2165 阅读 · 0 评论 -
动态背景线条,鼠标移动线条汇聚---背景特效
html代码:<canvas></canvas>css代码:html, body { background: #000; margin: 0;}canvas { position: absolute;}js代码:$(function(){ var canvas = document.querySelector('canvas'), ctx = canvas.getCo转载 2016-10-19 15:36:29 · 11229 阅读 · 2 评论 -
变换色彩的旋转图形----背景效果
html代码:<canvas id = 'canv'></canvas>css代码:body{ width:100%; overflow:hidden; margin:0;}js代码:var c = document.getElementById('canv'), $ = c.getContext('2d'), w = c.width = window.innerWidth,转载 2016-10-19 15:32:42 · 692 阅读 · 0 评论 -
旋转的银河---动态网页背景
html代码:<canvas id="canvas"></canvas>css代码:body { background: #060e1b; overflow: hidden;}canvas { //opacity: 0.5;}js代码:"use strict";var canvas = document.getElementById('canvas'), ctx = canvas转载 2016-10-19 14:49:02 · 2145 阅读 · 1 评论 -
旋转的星空背景
html代码:<canvas id="canvas"></canvas>css代码:body { background: #060e1b; overflow: hidden;}canvas { //opacity: 0.5;}js代码:"use strict";var canvas = document.getElementById('canvas'), ctx = canvas转载 2016-10-19 14:43:57 · 1783 阅读 · 1 评论 -
雪花特效---纯css实现
html代码<div class="snow-container"> <div class="snow foreground"></div> <div class="snow foreground layered"></div> <div class="snow middleground"></div> <div class="snow middleground layered"><转载 2016-10-19 14:25:40 · 7797 阅读 · 2 评论 -
圆形图片360度不停旋转---@-webkit-keyframes使用@keyframes规则,你可以创建动画
html代码:<div class="picxz"></div>css代码:* { margin:0; padding:0; list-style:none;}body { background:#1F1F1F;}.picxz { width: 220px; height: 220px; margin: 0 auto; bac原创 2016-10-21 14:57:49 · 7001 阅读 · 3 评论 -
360度不停旋转的10片叶子背景---纯css实现旋转背景
html代码:<div id="loading"> <div class="color1"></div> <div class="color1"></div> <div class="color1"></div> <div class="color1"></div> <div class="color1"></div> <div class="color2"></div>原创 2016-10-21 14:41:36 · 3764 阅读 · 0 评论 -
jquery轮播特效(左右轮播)
html代码<div id="wrapper"><!-- 最外层部分 --> <div id="banner"><!-- 轮播部分 --> <ul class="imgList"><!-- 图片部分 --> <li><a href="#"><img src="http://i.mmcdn.cn/simba/img/TB1cQb6IpXXXXX3XVXXSutbFX原创 2016-09-07 17:13:37 · 631 阅读 · 0 评论 -
鼠标悬停,图片旋转360°特效代码
html代码<div class="picxz"></div>css代码* { margin:0; padding:0; list-style:none;}body { background:#1F1F1F;}.picxz { width: 220px; height: 220px; margin: 0 auto; backgr原创 2016-09-07 16:33:44 · 1184 阅读 · 0 评论 -
jquery鼠标滚动数字增加插件---countUp.js
CountUp.js 无依赖的、轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 startVal 和 endVal 参数判断的。 可配置的参数:target = 目标元素的 ID;startVal = 开始值;endVal = 结束值;decimals = 小数位数,默认值原创 2016-09-20 16:30:42 · 4167 阅读 · 0 评论 -
Scrollanim---鼠标向下滚动加载动画,与wow.js类似
转载地址:http://www.dowebok.com/217.html 加qq群下载代码:简介Scrollanim 是使用 CSS3 + JavaScript 实现的用于创建滚动动画的库,应用到元素上后,当此元素出现在浏览器可视区域时便会执行对应的动画,和之前介绍的 WOW.js及 scrollReveal.js类似。Scrollanim 是Kissui的一部分,所以使用 Scrollanim转载 2016-09-19 17:47:58 · 3787 阅读 · 0 评论 -
WOW.js – 鼠标向下滚动加载动画(仅执行一次)
转载网址:http://www.dowebok.com/131.html简介有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需转载 2016-09-19 17:24:52 · 5426 阅读 · 0 评论 -
scrollReveal.js – 页面上下滚动时动画多次播放
转载地址:http://www.dowebok.com/134.html简介和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js转载 2016-09-19 09:33:15 · 2388 阅读 · 0 评论 -
animate.css – 齐全的CSS3动画库
本文转载自网络,方便大家学习:http://www.dowebok.com/98.html原网站有动画实例,建议 JavaScript 或 jQuery 给需要的地方添加动画效果,不用改变原来的结构简介animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡转载 2016-09-18 17:57:28 · 569 阅读 · 0 评论 -
slidesjs轮播插件使用方法
<!doctype html><head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <scrip原创 2016-11-14 14:40:18 · 3207 阅读 · 0 评论