2、HTML5 Canvas正弦波动画,HTML5多视角3D旋转动画

  • 栏目:前端 时间:2020-04-15 13:20
<返回列表

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

图片 1

图片 2

这是一款基于HTML5的树叶飘落动画,树叶都是图片,并非CSS3绘制,但是树叶飘落的动画效果非常逼真。这款HTML5树叶飘落动画是基于webkit内核的,也就是说要在webkit内核的浏览器上才能使用这款动画。

HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效。1、HTML5版Flappy Bird游戏,仅65行Javascript代码Flappy Bird相信大家都很熟悉了,2014年最热门的手机游戏之一。Flappy Bird这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾。今天我们用HTML5来重写这款Flappy Bird游戏,值得注意的是,利用Phaser框架,只需65行Javascript代码即可实现HTML5版的Flappy Bird游戏。按空格键控制小鸟,试试看吧。在线演示 / 源码下载2、3D HTML5 Logo动画,HTML5多视角3D旋转动画今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的,该动画实现了HTML5 Logo旋转的效果。在线演示 / 源码下载3、HTML5 WebGL水面水波荡漾特效,可多视角展示今天向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画。在线演示 / 源码下载4、HTML5版切水果游戏,HTML5游戏极品这是一款由百度JS小组提供的HTML5版切水果游戏,虽然和原版的切水果游戏相比功能不怎么完善,但是该HTML5切水果游戏也算有声有色,画面也十分华丽。在线演示 / 源码下载5、CSS3 飘带菜单,超酷3D CSS3菜单今天要分享的这款CSS3菜单非常特别,菜单是呈飘带状的,鼠标滑过菜单项时,菜单项会凸显出来,表现的非常立体动感。在线演示 / 源码下载6、HTML5跳伞游戏,看谁先安全降落地面这是一款非常不错的HTML5休闲小游戏,主要应用了HTML5的重力感应效果。游戏一共四个玩家,主要是比谁先安全降落地面,绿色信号灯亮时,按下“X”键开始降落,然后再按“X”键打开降落伞进行安全降落,你需要控制好时机来按下“X”键和对手们比谁先安全降落。大家也可以在下面下载源代码学习分享。在线演示 / 源码下载7、HTML5视频播放器Video.Js,播放器外观可自定义以前我们都是使用flash来制作视频播放器,现在HTML5逐渐发展起来了,我们也可以利用HTML5来制作播放器。今天给大家介绍一款HTML5播放器Video.Js,改HTML5视频播放器可以自己定义外观,包括整体颜色,播放按钮定制等功能。总体来说,Video.Js是一款很不错的视频播放器。在线演示 / 源码下载8、HTML5树叶飘落动画,HTML5动画经典今天来分享一款HTML5树叶飘落动画,这款HTML5树叶飘落动画是基于webkit内核的,所以需要webkit内核的浏览器才能播放该动画,效果真的非常酷。在线演示 / 源码下载以上就是8款令人惊叹的HTML5 Canvas动画特效,欢迎收藏分享。本文由html5tricks收集整理,转载请务必保留原文链接。

这次要推荐的是9款非常有意思的HTML5动画,这些动画有些是基于Cavans的,有些是SVG结合HTML5实现的,让我们一起来看看。1、HTML5梦幻特效 可给任意元素添加魔幻效果我们之前介绍HTML5动画特效比较多的是HTML5 3D特效,今天我们来换一种风格,来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素添加这么一种效果,即鼠标滑过时,元素上就会出现非常魔幻的动画特效,什么特效呢?你可以点开demo链接查看。在线演示 / 源码下载2、HTML5 Canvas正弦波动画 可自定义波长和速度正弦波我们很熟悉,以前数学和物理课上经常会用到,还记得以前物理老师演示的正弦动画还是用flash制作的呢。今天我们要分享的这款HTML5 Canvas动画就和正弦波有关,我们可以稍稍修改一下HTML5代码即可定义波长、频率等正弦波的一些属性,很酷吧。在线演示 / 源码下载3、CSS3按钮发光动画 绚丽多彩今天分享一款基于纯CSS3的发光按钮,多种色彩的按钮排列在网页上,伴随着闪闪发光的效果,CSS3的强大肯定会让你叹为观止。该CSS3按钮发光动画主要是利用了webkit的动画属性,让各种颜色规律性的发生变化。也许这么绚丽的CSS3按钮应用不那么广泛,但是在一些需要特效的网页中用来做提交表单按钮或者菜单项,那就非常方便了。在线演示 / 源码下载4、HTML5 WebGL水面水波荡漾特效之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错。今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画。在线演示 / 源码下载5、HTML5树叶飘落动画今天再来分享一款HTML5树叶飘落动画,这款HTML5树叶飘落动画是基于webkit内核的,所以需要webkit内核的浏览器才能播放该动画,效果真的非常酷。在线演示 / 源码下载6、HTML5 3D衣服摆动特效前面我们介绍过很多HTML5 3D动画特效,最经典的要算HTML5 WebGL水面水波荡漾特效。今天我再向大家分享一款HTML5 3D衣服摆动动画特效,动画也是在HTML5 Canvas上完成,它模拟衣服晾在绳子上,点击鼠标可以让衣服摆动起来,就行风吹动它一样,非常逼真炫酷。在线演示 / 源码下载7、HTML5鲸鱼动画之前看到过同样效果的一款鲸鱼动画,不过可惜的是那个动画是用flash制作的。今天我找到了基于HTML5的鲸鱼动画,鲸鱼会随着鼠标的移动而游动,画面非常立体,鲸鱼也超级逼真。真的,HTML5确实很给力,HTML5动画完全可以完成flash能做的事情。在线演示 / 源码下载8、纯CSS3 Android Logo动画绘制利用CSS3可以绘制很多复杂的图案图标,今天就利用纯CSS3实现Android Logo图标,该CSS3 Android Logo主要利用了CSS3中的圆角等属性,绘制出来的Logo非常逼真,同时该Android Logo还有动画效果,鼠标滑过Android小人的头和手时,小手还能够挥动。在线演示 / 源码下载9、纯CSS3绘制可爱小男孩动画之前我们分享过几个纯CSS3动画特效,比如纯CSS3人物行走动画就非常酷,还有纯CSS3 Android Logo动画绘制也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画,除了绘制的小男孩逼真可爱外,其面部表情也十分酷。整个动画是利用纯CSS3实现,没有用图片和JS,不知道你们的浏览器中效果怎么样。在线演示 / 源码下载以上就是9个非常有意思的HTML5动画,欢迎收藏分享。 via:

图片 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); }
}

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);

在线演示源码下载

上一篇:这款HTML5动画的逼真之处在于人物在奔跑的时候很有节奏感,付费投稿计划 下一篇:没有了

更多阅读

2、HTML5 Canvas正弦波动画,HTML5多视角3D旋

前端 2020-04-15
本文由码农网 –小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 这...
查看全文

这款HTML5动画的逼真之处在于人物在奔跑

前端 2020-04-15
本文由码农网 –小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 2...
查看全文

付费投稿计划,付费投稿计划

前端 2020-04-15
本文由码农网 –小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 本...
查看全文

友情链接: 网站地图

Copyright © 2015-2019 http://www.koi-bumi.com. 韦德体育有限公司 版权所有