逼真的HTML5树叶飘落动画

本文由码农网 –
小峰原创,转载请看清文末的转发需要,接待参加大家的付费投稿安插!

奥门新浦京官方网站 1

1、纯CSS3美化Checkbox和Radiobox按键 外观很时髦

那是后生可畏款基于HTML5的树叶飘落动漫,树叶都以图片,实际不是CSS3绘制,然而树叶飘落的动漫效果十三分逼真。那款HTML5叶片飘落动漫是基于webkit内核的,也正是说要在webkit内核的浏览器上本领接受这款动画。

后天我们收拾了10款成效极其有力的HTML5/CSS3应用插件供我们学习和接收,希望各位中意。1、纯CSS3美化Checkbox和Radiobox按键,外观很前卫使用CSS3大家得以制作特别富有特性化的客商表单,前日大家就利用CSS3美化Checkbox复选框和Radiobox单选框。CSS3美化Checkbox和Radiobox的规律很简短,在页面上新建七个checkbox和radiobox并付与他们默许的label标签呈现文字,然后将checkbox和radiobox蒙蔽,再使用CSS3来标榜label标签,那样,我们就自定义了checkbox和radiobox,外观很风尚。在线演示
/
源码下载2、CSS3多级下拉菜单,弹性展开下拉动漫采纳CSS3制作的网页菜单外观都卓殊炫丽,并且都富含自然的卡通特效。今天资享的那款CSS3多级下拉菜单能够平价地安排菜单的层级数,况且每三个菜单项都有投机的小Logo,显得格外干净靓丽。该CSS3下拉菜单在开展子级菜单时会有弹性张开的动漫特效,是大器晚成款特别酷的下拉菜单。在线演示
/
源码下载3、HTML5霜叶飘落动画,HTML5动漫优质那是生机勃勃款HTML5叶子飘落动漫,这款HTML5叶片飘落动漫是依靠webkit内核的,所以供给webkit内核的浏览器工夫播放该动漫,效果实在要命酷。在线演示
/
源码下载4、jQuery百叶窗大旨图,超酷切换动漫那是jQuery百叶窗宗旨图插件,这款jQuery宗旨图的百叶窗效果超帅,不只能够横向切换,也能够竖向切换。在线演示
/
源码下载5、HTML5图形组合归类效果,图片分类利器HTML5对管理局部轻便的动漫极其便利,举个例子移动、淡入淡出效果等。几前段时间禀享的那款HTML5图形组合归类特效就使用了HTML5的位移特效,当顾客接纳三个图纸分类时,相关分类的图片就能够活动到这么些分类上面,并陪同着淡入淡出的运动动漫,是大器晚成款效果十分酷的HTML5图纸管理利用。在线演示
/
源码下载6、HTML5分步骤注册表单,HTML5表单出色表单在网页应用中那四个重视,今天自个儿要向咱们分享后生可畏款基于HMLT5的分步骤注册表单,表单外观相比富华,点击下一步开关就可以跳转到下一步填写注册音讯。该HTML5表单使用了过多CSS3属性,进而在表单切换时持有弹性的卡通,是大器晚成款很科学的HTML5表单。在线演示
/
源码下载奥门新浦京官方网站,7、纯CSS3圆形面包屑菜单,有举行动漫那是三个CSS3圆形面包屑菜单,该CSS3菜谱的菜单项私下认可是圈子的,当鼠标滑过菜单项时,菜单项即博览会开,并陪同张开动漫。让大家一块来看看那款纯CSS3达成的圈子面包屑菜单吧。在线演示
/ 源码下载8、CSS3
3D进程条,超炫进程加载动漫
进程条在网页设计中持有广阔的利用,它不仅能够让网页外观能够,並且能够提醒顾客操作正在举办,进步顾客体验。前日要享用的那款CSS3进程条,不独有外观突显3D立体,而且在速度加载时也表现了超炫的卡通片效果。大家协同来拜会那款CSS3
3D进程条。在线演示 / 源码下载9、HTML5
3D相册浏览,感人肺腑
那是豆蔻梢头款HTML5
3D相册浏览应用,图片能够手动播放,也足以自动播放,效果极其震惊,赶紧把那款HTML5
3D相册分享给您的意中人吗。在线演示 / 源码下载10、CSS3 SVG 进程条 Loading
动漫,炫人眼目发光特效
那是生机勃勃款CSS3
SVG动漫进程条应用,进程条在进程加载上校会现出光彩夺目的璀璨特效,可惜的是,需求高版本的HTML5浏览器本事支撑发光动漫。在线演示
/
源码下载如何,赏识完那10款功用强大而又实用的HTML5/CSS3应用插件,是否以为很棒呢!本文由html5tricks搜集收拾。

应用CSS3大家得以塑造特别具有天性化的顾客表单,今天大家就接收CSS3美化Checkbox复选框和Radiobox单选框。CSS3美化Checkbox和Radiobox的法规很简短,在页面上新建贰个checkbox和radiobox并给予他们暗中认可的label标签彰显文字,然后将checkbox和radiobox隐蔽,再利用CSS3来标榜label标签,那样,我们就自定义了checkbox和radiobox,外观很风尚。

奥门新浦京官方网站 2

奥门新浦京官方网站 3

在线演示源码下载

在线演示

HTML代码

<div id="container">
  <!-- The container is dynamically populated using the init function in leaves.js -->
  <!-- Its dimensions and position are defined using its id selector in leaves.css -->
  <div id="leafContainer"></div>
  <!-- its appearance, dimensions, and position are defined using its id selector in leaves.css -->
  <div id="message">
   <em>这是基于webkit的落叶动画</em>
  </div>
</div>

源码下载

CSS代码

#container {
    position: relative;
    height: 700px;
    width: 500px;
    margin: 10px auto;
    overflow: hidden;
    border: 4px solid #5C090A;
    background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;
}

/* Defines the position and dimensions of the leafContainer div */
#leafContainer 
{
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Defines the appearance, position, and dimensions of the message div */
#message
{
    position: absolute;
    top: 160px;
    width: 100%;
    height: 300px;
    background:transparent url('images/textBackground.png') repeat-x center;
    color: #5C090A;
    font-size: 220%;
    font-family: 'Georgia';
    text-align: center;
    padding: 20px 10px;
    -webkit-box-sizing: border-box;
    -webkit-background-size: 100% 100%;
    z-index: 1;
}

p {
  margin: 15px;
}

a
{
  color: #5C090A;
  text-decoration: none;
}

/* Sets the color of the "Dino's Gardening Service" message */
em 
{
    font-weight: bold;
    font-style: normal;
}

.phone {
  font-size: 150%;
  vertical-align: middle;
}

/* This CSS rule is applied to all div elements in the leafContainer div.
   It styles and animates each leafDiv.
*/
#leafContainer > div 
{
    position: absolute;
    width: 100px;
    height: 100px;

    /* We use the following properties to apply the fade and drop animations to each leaf.
       Each of these properties takes two values. These values respectively match a setting
       for fade and drop.
    */
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
}

/* This CSS rule is applied to all img elements directly inside div elements which are
   directly inside the leafContainer div. In other words, it matches the 'img' elements
   inside the leafDivs which are created in the createALeaf() function.
*/
#leafContainer > div > img {
     position: absolute;
     width: 100px;
     height: 100px;

    /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip
       animations on each leaf.
       The createALeaf function in the Leaves.js file determines whether a leaf has the 
       clockwiseSpin or counterclockwiseSpinAndFlip animation.
    */
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-transform-origin: 50% -100%;
}

/* Hides a leaf towards the very end of the animation */
@-webkit-keyframes fade
{
    /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */
    0%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Makes a leaf fall from -300 to 600 pixels in the y-axis */
@-webkit-keyframes drop
{
    /* Move a leaf to -300 pixels in the y-axis at the start of the animation */
    0%   { -webkit-transform: translate(0px, -50px); }
    /* Move a leaf to 600 pixels in the y-axis at the end of the animation */
    100% { -webkit-transform: translate(0px, 650px); }
}

/* Rotates a leaf from -50 to 50 degrees in 2D space */
@-webkit-keyframes clockwiseSpin
{
    /* Rotate a leaf by -50 degrees in 2D space at the start of the animation */
    0%   { -webkit-transform: rotate(-50deg); }
    /*  Rotate a leaf by 50 degrees in 2D space at the end of the animation */
    100% { -webkit-transform: rotate(50deg); }
}

/* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
@-webkit-keyframes counterclockwiseSpinAndFlip 
{
    /* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */
    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }
    /* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}

2、CSS3多级下拉菜单 弹性伸开下拉动画

JavaScript代码

/* Define the number of leaves to be used in the animation */
const NUMBER_OF_LEAVES = 30;

/* 
    Called when the "Falling Leaves" page is completely loaded.
*/
function init()
{
    /* Get a reference to the element that will contain the leaves */
    var container = document.getElementById('leafContainer');
    /* Fill the empty container with new leaves */
    for (var i = 0; i < NUMBER_OF_LEAVES; i++) 
    {
        container.appendChild(createALeaf());
    }
}

/*
    Receives the lowest and highest values of a range and
    returns a random integer that falls within that range.
*/
function randomInteger(low, high)
{
    return low + Math.floor(Math.random() * (high - low));
}

/*
   Receives the lowest and highest values of a range and
   returns a random float that falls within that range.
*/
function randomFloat(low, high)
{
    return low + Math.random() * (high - low);
}

/*
    Receives a number and returns its CSS pixel value.
*/
function pixelValue(value)
{
    return value + 'px';
}

/*
    Returns a duration value for the falling animation.
*/

function durationValue(value)
{
    return value + 's';
}

/*
    Uses an img element to create each leaf. "Leaves.css" implements two spin 
    animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This
    function determines which of these spin animations should be applied to each leaf.

*/
function createALeaf()
{
    /* Start by creating a wrapper div, and an empty img element */
    var leafDiv = document.createElement('div');
    var image = document.createElement('img');

    /* Randomly choose a leaf image and assign it to the newly created element */
    image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';

    leafDiv.style.top = "-100px";

    /* Position the leaf at a random location along the screen */
    leafDiv.style.left = pixelValue(randomInteger(0, 500));

    /* Randomly choose a spin animation */
    var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';

    /* Set the -webkit-animation-name property with these values */
    leafDiv.style.webkitAnimationName = 'fade, drop';
    image.style.webkitAnimationName = spinAnimationName;

    /* Figure out a random duration for the fade and drop animations */
    var fadeAndDropDuration = durationValue(randomFloat(5, 11));

    /* Figure out another random duration for the spin animation */
    var spinDuration = durationValue(randomFloat(4, 8));
    /* Set the -webkit-animation-duration property with these values */
    leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

    var leafDelay = durationValue(randomFloat(0, 5));
    leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;

    image.style.webkitAnimationDuration = spinDuration;

    // add the <img> to the <div>
    leafDiv.appendChild(image);

    /* Return this img element so it can be added to the document */
    return leafDiv;
}

/* Calls the init function when the "Falling Leaves" page is full loaded */
window.addEventListener('load', init, false);

在线演示源码下载

选择CSS3制作的网页菜单外观都格外灿烂,并且都饱含一定的卡通特效。明天享受的那款CSS3多级下拉菜单能够低价地配置菜单的层级数,并且每叁个菜单项都有友好的小Logo,显得极其整洁秀丽。该CSS3下拉菜单在举行子级菜单时会有弹性展开的动漫特效,是少年老成款超级帅的下拉菜单。

奥门新浦京官方网站 4

在线演示

源码下载

3、HTML5叶片飘落动漫 HTML5卡通精髓

前些天再来分享生龙活虎款HTML5霜叶飘落动漫,那款HTML5叶子飘落动画是依据webkit内核的,所以必要webkit内核的浏览器技巧播放该卡通,效果的确超级帅。

奥门新浦京官方网站 5

在线演示

源码下载

4、jQuery百叶窗大旨图 超酷切换动漫

从几眼前启幕,除了分享HTML5/CSS3应用实例和HTML5课程,笔者还要向我们大吃大喝部分实用的jQuery插件。今日赋享的首先款jQuery插件是jQuery百叶窗主题图,那款jQuery主旨图的百叶窗效果极度酷,不仅能够横向切换,也能够竖向切换。

奥门新浦京官方网站 6

在线演示

源码下载

5、HTML5图片组合归类效果 图片分类利器

HTML5对拍卖部分粗略的卡通片特别常有帮衬,比如移动、淡入淡出效果等。明天享受的那款HTML5图形组合归类特效就采纳了HTML5的位移特效,当顾客筛选二个图纸分类时,相关分类的图纸就能够移动到这一个分类下边,并伴随着淡入淡出的运动动漫,是黄金年代款作用十分的帅的HTML5图纸管理利用。

奥门新浦京官方网站 7

在线演示

源码下载

6、HTML5分步骤注册表单 HTML5表单杰出

表单在网页应用中充裕重大,今日自己要向大家享用黄金年代款基于HMLT5的分步骤注册表单,表单外观比较奢华,点击下一步开关就能够跳转到下一步填写注册音讯。改HTML5表单使用了非常多CSS3属性,进而在表单切换时享有弹性的动漫片,是意气风发款特不错的HTML5表单。

奥门新浦京官方网站 8

在线演示

源码下载

7、纯CSS3圆形面包屑菜单 有拓宽动漫

前几日我们再来介绍生龙活虎款CSS3圆形面包屑菜单,该CSS3菜单的菜单项暗中认可是圈子的,当鼠标滑过菜单项时,菜单项即展览会开,并伴随张开动漫。让大家协作来探问那款纯CSS3兑现的圆形面包屑菜单吧。

奥门新浦京官方网站 9

在线演示

源码下载

8、CSS3 3D进程条 超炫进程加载动漫

过程条在网页设计中颇有广阔的运用,它不止能够让网页外观能够,何况可以提示客户操作正在进展,升高顾客体验。前几天要享用的那款CSS3进程条,不唯有外观展现3D立体,并且在进度加载时也表现了超炫的动漫效果。大家一同来看看那款CSS3
3D进程条。

奥门新浦京官方网站 10

在线演示

源码下载

9、HTML5 3D相册浏览 催人泪下

实在利用HTML5手艺来做各种图片动漫都非常炫。后天大家再来看生机勃勃款HTML5
3D相册浏览应用,图片可以手动播放,也得以自动播放,效果极度激动,赶紧把那款HTML5
3D相册分享给您的敌人吗。

奥门新浦京官方网站 11

在线演示

源码下载

10、CSS3 SVG 进程条 Loading 动漫 炫丽发光特效

事情未发生前大家已经介绍过七款CSS3 3D进度条插件了,CSS3 3D进程条按键18款不错样式、CSS3 3D进程条
超炫进程加载动漫,相信大家都爱好。今日自己再向大家三进三出大器晚成款CSS3
SVG动漫进度条应用,进度条在进度加载师长会冒出光彩夺指标璀璨特效,缺憾的是,要求高版本的HTML5浏览器本领支撑发光动漫。

奥门新浦京官方网站 12

在线演示

源码下载

本文固定链接: 

发表评论

电子邮件地址不会被公开。 必填项已用*标注