css动画
文章平均质量分 50
青菜馒头
这个作者很懒,什么都没留下…
展开
-
css3动画如何在动作结束时保持该状态不变
animation-fill-mode : none | forwards | backwards | both;属性值值 描述 none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。 backwards 动画将应用在 animation原创 2016-09-13 10:46:10 · 23621 阅读 · 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:43:57 · 1784 阅读 · 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 · 7799 阅读 · 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鼠标滚动数字增加插件---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 · 5428 阅读 · 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 评论 -
animate.css 全部代码分析
@charset "UTF-8";/*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */.animate转载 2016-09-18 18:13:20 · 1663 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
css3动画的使用(@keyframes)
一、CSS3 @keyframes 规则 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 目前支持的浏览如下:opera,firefox,所有webkit内核浏览器(safair,chrome),IE10+。废话不多说,先看下在各个浏览器上的实现:@keyframes myfirst{from {bac原创 2016-09-13 10:51:50 · 1873 阅读 · 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 · 2147 阅读 · 1 评论