2016年09月_青菜馒头

11月 10月 09月 04月

原创 jquery鼠标滚动数字增加插件---countUp.js

CountUp.js 无依赖的、轻量级的 JavaScript 类，可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp，但其实可以在两个方向进行变化，这是根据你传递的 startVal 和 endVal 参数判断的。可配置的参数：target = 目标元素的 ID；startVal = 开始值；endVal = 结束值；decimals = 小数位数，默认值

2016-09-20 16:30:42 4167

转载 CSS3 动画效果整理

CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、transition以及animation。**transform** rotate 设置元素顺时针旋转的角度，用法是： transform: rotate(x); 参数x必须是以deg结尾的角度数或0，可为负数表示反向。

2016-09-20 15:42:59 482

转载 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

转载网址：http://www.dowebok.com/131.html简介有的页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面（查看）。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需

2016-09-19 17:24:52 5428

原创鼠标悬停，背景色渐变

简单实现，没有添加额外效果<div></div>css代码div{width:300px;height:300px;background:blue;transition:background 1s;}div:hover{background:#666;}

2016-09-19 17:08:16 2797

转载 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

转载 animate.css 全部代码分析

2016-09-18 18:13:20 1663

转载 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

原创简单的二级导航页面（纯css实现，运用display属性hover）

html代码<div class="menu"> <ul> <li><a href="#" class="bccolor">首页</a></li> <li><a href="#">关于我们</a> <ul> <li><a href="#">公司简介</a></li> <li><a href="#">人才招

2016-09-14 11:35:09 13667

转载 css3动画垂直翻转180度

html代码<ul class="flatflipbuttons"> <li><a href="http://www.w2bc.com" title="Search"><span class="icon-search"></span> </a><b>Search</b></li> <li><a href="http://www.

2016-09-13 15:51:27 13581

转载 CSS3饼状图loading旋转动画

CSS代码：.wrap { width: 64px; height: 64px; position: relative; }.outer { position: absolute; width: 100%; height: 100%; background: url(icon-spin-s.png) no-repeat; animation: spin 800ms infinite linear;

2016-09-13 15:30:29 1199

原创 css3动画的使用（@keyframes）

一、CSS3 @keyframes 规则 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。目前支持的浏览如下:opera,firefox,所有webkit内核浏览器(safair,chrome),IE10+。废话不多说，先看下在各个浏览器上的实现:@keyframes myfirst{from {bac

2016-09-13 10:51:50 1873

原创 css3动画如何在动作结束时保持该状态不变

animation-fill-mode : none | forwards | backwards | both;属性值值描述 none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 backwards 动画将应用在 animation

2016-09-13 10:46:10 23621

转载 CSS阴影效果(Box-shadow)介绍与用法

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。基本用法 <div class="box11 shadow"></div>.box11 { width: 300px; height: 100px;

2016-09-13 10:39:24 653

转载文字下划线效果（标题hover效果）

文字下划线效果（标题hover效果） <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

原创 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

原创鼠标悬停，图片旋转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 1185

slidesjs轮播插件带实例代码

实用的slides.js轮播插件，带有自己整理的例子

2016-11-14

动画效果随鼠标向下滑动而加载

鼠标向下滑动，页面有动画效果

2016-09-18

animate.css 文件代码

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。