css3圣诞雪景球 - 相关文章

【css3圣诞雪景球】的更多相关文章

css3圣诞雪景球开源

css3圣诞雪景球开源 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS动画圣诞雪景球</title> <embed src="age/sd.mp3" autostart="true" loop="-1" controls="C…

本来想多做几个了无奈最近太忙于是模仿做了一个在codepen看到的圣诞雪景球算是送给自己的圣诞礼物演示地址:http://www.qdfuns.com/notes/26668/d5e1776243f8272941de3e65dd094db2.html 想看原文的地址在这里http://codepen.io/chilliconcode/pen/rWpvOe <html lang="en"> <head> <meta charset="U…

css3 圣诞红包雨效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css3 圣诞红包雨效果</title> <style> * { margin: 0; padding: 0; } ul{ list-style: none; } .cc{ width: 100%; height: 500px; overflow…

用js，css3 做的一个球

用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色设置同一颜色,效果更佳 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <styl…

CSS3弹力球

如下代码实现方块在限定区域内不停弹跳. <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation:myfirst 5s linear 2s inf…

慕课网H5圣诞主题

继七夕之后,我又出了一个圣诞主题的课程.圣诞主题是基于HTML5+CSS+JS编写与实现的,同时也是七夕主题的故事延续.圣诞主题依旧延续着七夕主题设计的思路,引入了3个经典的场景页面,在每个场景中表述着不同的行为.实现上总结了之前七夕主题的一些经验与反馈,并在此之上加以优化与扩展.这个案例不算很难,但是把前端做动画的一些精髓已经讲透了.运用的技术基本就是H5+JS+CSS3,但是每个部分的实现都会有很多知识点的涉及,这里大体的总结下具体我来归纳下改良的技术方案与涉及到的知识点: 为了处理自适应…

Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注前端开发技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的网页设计案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心推荐的文章能够帮助到您. jQuery 插件和教程精心挑选:精美的 jQuery 加载动画和进度条插件精心挑选:10款基于 jQuery 的图片360度旋转插件精心挑选:几款实用的 jQ…

CSS3动画几个平时没注意的属性

一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例先来看看左边加了steps和右边没加的区别.左边的是一锤一锤的,右边会出现影子. [注意下面这个demo在firefox中不能执行,只能在chrome中执行,因为我动画的是“background-image”属性] 代码如下,我只把关键的几个代码贴出来了,详细的可以查看这里: .btn-pay { background…

css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(css3版 chrome only) 3D标签云(js版 chrome only) 前文回顾在前面的文章css3实践之图片轮播(Transform,Transition和Animation)中我们简单地了解了css3旗下的transform.transition以及animation.回顾一下,tr…

cubic-bezier贝塞尔曲线css3动画工具

今天在一本叫<HTML5触摸界面设计与开发>上看到一个做弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速.是用cubic-bezier贝塞尔曲线来完成的.所以特地去学习了一下关于cubic-bezier贝塞尔曲线. cubic-bezier比较少用,因为PC端中,有浏览器不兼容.但是手机端中,可以使用并带来炫酷的动画及体验. 缓动函数:http://www.xuanfengge.com/easeing/easeing/ cubic-bezier:http://cubic-bezie…

CSS3魔法堂：背景渐变（Gradient）

一.前言很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变 1. 线性渐变示例——七彩虹代码: <style type="text/css"> .rainbow-linear-gradient{ width: 460px; height: 160px; background-image: -webkit-linear-gradient(left,#E50743 %…

纯CSS3制作皮卡丘动画壁纸

前言明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以用CSS3来实现的,于是带着好感就实现了它.至于原图吧,为了不影响大家对我实现的动画产生对比,我就有心地不放上来了,哈哈!那么到底是什么效果呢?接着往下看吧! 正文 OK,接下来就是晒效果图的时候了,看图后才有兴趣了解一下,不然很沉闷,没什么心思看了. PS:由于我这个动画的尺寸做得比较大(720…

9款让你眼前一亮的HTML5/CSS3示例及源码

1.HTML5 3D点阵列波浪翻滚动画今天我们要再分享一款基于HTML5 3D的点阵列波浪翻滚动画特效,同样是非常的壮观. 在线演示源码下载 2.HTML5小球弹跳动画很不错的3D小球今天我要向大家分享一款很逼真的HTML5动画特效,它是3个色彩各异的弹跳小球,每一个小球在弹跳的时候都会有变化的小球投影,让整个动画更加逼真,而且具有3D的视觉效果. 在线演示源码下载 3.纯CSS3纸片层叠而成的庙宇动画今天要分享的这款纯CSS3动画非常特别,动画主体的原型是一座庙宇的屋顶,它用3张纸…

经常被忽略的几个CSS3属性之强大应用（一、timing-function: steps()　二、animation-direction 　三、timing-function: cubic-bezier()）

一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例先来看看左边加了steps和右边没加的区别.左边的是一锤一锤的,右边会出现影子. [注意下面这个demo在firefox中不能执行,只能在chrome中执行,因为我动画的是“background-image”属性] 代码如下,我只把关键的几个代码贴出来了,详细的可以 .btn-pay { 02 background…

CSS3 之 box-shadow

1. css3 box-shadow CSS3的box-shadow属性可以让我们轻松实现图层阴影效果 box-shadow: inset(可选默认没有) x-offset y-offset blur-radius spread-radius color 投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色 box-shadow和text-shadow一样可以使用一个或多个投影,如果使用多个投影时必须需…

2017了，回家前 "年末" 分享:下雨，飘雪，红包雨，碰撞球，自定义View

(本博客为原创:http://www.cnblogs.com/linguanh/) 目录: 效果展示感想代码拆解开源地址效果展示有没有兴趣继续看下去,直接看下"颜值"是第一步了.依次对应:下雨,飘雪,红包雨,碰撞球上面是图片,这里再发个视频链接:http://pan.baidu.com/play/video#video/path=%2Fvideo.mp4&t=-1. 感想 16年总算过去了,跟各位园有说句祝福吧,新的一年少加点班,身体健康,钱能赚多少就尽量赚…

8个超震撼的HTML5和纯CSS3动画源码

HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家分享8个最新的HTML5和纯CSS3动画及其源码,这些动画非常让人震撼,你也可以学习一下HTML5源码. 1.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享…

HTML5+CSS3（3）

一.CSS3新增属性用法整理 1.box-shadow(阴影效果) 2.border-color(为边框设置多种颜色) 3.border-image(图片边框) 4.text-shadow(文本阴影) 5.text-overflow(文本截断) 6.word-wrap(自动换行) 7.border-radius(圆角边框) 8.opacity(透明度) 9.box-sizing(控制盒模型的组成模式) 10.resize(元素缩放) 11.outline(外边框) 12.background-s…

使用css3实现动画来开启GPU加速

参考文章: https://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html http://blog.csdn.net/hsany330/article/details/50925260 用CSS3动画替代JS模拟动画的好处: 不占用JS主线程: 可以利用硬件加速: 浏览器可对动画做优化(元素不可见时不动画减少对FPS影响) 下面让我们来看一个动画效果,在该动画中包含了几个堆叠在一起的球并…

贝塞尔曲线与CSS3动画、SVG和canvas的应用

简介贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfengge.com/easeing/easeing/ cubic-bezier:http://cubic-bezier.com/ 如何用贝塞尔曲线画曲线一个标准的3次贝塞尔曲线需要4个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 无论SVG, Canvas还是CSS3动画,都牵扯到这4个…

CSS3属性animation-play-state控制动画运行或暂停的技巧

animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停. div{ animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome */ } 浏览器支持:Internet Explorer 10.Firefox 以及 Opera 支持 animation-play-state 属性.Safari 和 Chrome 支持替代的 -w…

11个超震撼的HTML5和纯CSS3动画源码

1.jQuery多功能手风琴个人信息菜单面板这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery/CSS3大屏下拉菜单,非常实用.由于这款手风琴菜单是基于jQuery框架的,因此兼容性和实用性很强. 在线演示源码下载 2.纯CSS3水平手风琴分享按钮菜单对于手风琴动画,我们以前分享过很多,有基于jQuery的手风琴菜单,比如jQuery多层级垂直手风琴菜单:也有基于jQuery的手风琴焦点…

jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程

有两天没发表文章了,今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航,这款菜单看起来非常大气,可以展示非常多的产品类目,如果你在设计电子商务网站,不妨可以拿来参考,一下是效果图: 我们也可以到这里来查看这款菜单的DEMO演示. 接下来还是分析一下源代码,源码由HTML.CSS和jQuery组成,先来看看HTML,东西很多,但结构非常简单: <div class="sidebar"> <div class="sidebar_top si…

使ie9以下版本支持canvas,css3等主流html5技术的方法

1.前言. ie6,7,8支持html5,看起来比较难,其实有一种方法很通用,就是引入js和css,这种可插拔的引入对开发很有帮助.比如,下面是一个让网页支持canvas和css3的例子. 2.例子. 下面是一个在canvas画布中显示一个红球的例子的html. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> fe…

『看球笔记』20131230切尔西vs利物浦，赛后复盘聊聊球

2013-12-30 第十九轮英超联赛切尔西vs利物浦看着这张板凳合照… 有木有一种心里哇凉哇凉的感觉. 赛后whoscored的平均位置图左边车子,右边我军阿格回到首发,队副的队长袖标再不戴就要冷了. 1"20 eto对亨德森的黑脚,不违心的说,至少黄牌. 3"00 进球来得很快,是苏亚与伊万的缠斗,抢到了前点,助攻斯科特. 4"00 接着不过1分钟而已,门前险象环生.囧森这一点明显会被高位逼抢强盯,赛前罗杰斯应…

CSS3实现带阴影的弹球

实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3实现带阴影的弹球</title> <style type="text/css"> .box{ width: 400px; height: 300px; border: 1px #…

CSS3动画那么强，requestAnimationFrame还有毛线用？

一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多指教! .... 咳咳,大家不要一副不屑的样子嘛.跟你讲,我可是很有用的.所谓人如其名,看我名字这么长,表意为“请求动画帧”,明摆着一副很屌的样子! ....按照这种说法,“樱桃小丸子”就是樱桃做的丸子咯,恩,看脑袋确实蛮像的~ .... 想到明天就是国庆大假,今天我就小人不记大人过.给你们来副震精…

CSS3动画那么强，requestAnimationFrame还有毛线用--摘抄

CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3695 一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,…

CSS3 制作魔方 - 相关立体样式

最好的实践,就是给定一个实践的目标去实践. 目标:利用 CSS3 的一些特性,绘制一个魔方,要可以玩转的那种,即上下左右每一层都可以独立旋转.效果如下: 为了完成此效果,将使用到以下相关概念和样式:坐标.3D呈现.平移.旋转. (1)坐标屏幕的起点坐标是(0,0,0),往右递增为 x 方向,使用 left 属性表示,往下走,递增为 y 方向,使用 top 属性表示.而 3D 场景中 z 正方向(递增)为走出屏幕到你面前的方向. 但这个坐标的起点不一定得是屏幕,只是遵循相同的方向.当元素使用 p…

css3之水波效果

这些效果可谓多种多样,当然用canvas.svg也都能实现奈何对这些有不熟悉(尴尬),不过咱们用css来写貌似也没想象中的那么难吧. 一悬浮球水波效果效果图 css .container { width: 100px; height: 100px; border-radius: %; border: 3px solid #e787e7; background: #ffffff; position: absolute; top: %; left: %; transform: translat…