威尼斯手机平台登陆-官方网站登录

威尼斯手机平台登陆为您带来世界三大博彩公司最新相关资讯,威尼斯官方网站登录充分考虑到不同地域网民的不同需求,威尼斯手机平台登陆良好的用户界面,人性化的操作,实用的功能设计使其广泛受到欢迎,推动实体出版、影视、动漫、游戏等相关文化产业的发展。

您的位置:威尼斯手机平台登陆 > 前端资源 > 【威尼斯登录首页】付费投稿计划,不信就一起来看看吧

【威尼斯登录首页】付费投稿计划,不信就一起来看看吧

发布时间:2020-04-21 16:53编辑:前端资源浏览(87)

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

    你喜欢HTML5吗?我想下面的这7个HTML5应用一定会让你爱上HTML5的,不信就一起来看看吧。

    这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了,而且我们并没有用JavaScript,而是纯CSS3实现的。

    1、HTML5/jQuery雷达动画图表 图表配置十分简单

    之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canvas饼状图表也很酷。今天我们再来分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候带有一定动画。

    威尼斯登录首页 1

    在线演示        源码下载

    威尼斯登录首页 2

    2、HTML5模拟牛顿力学 碰撞的小球

    利用HTML5来模拟很多物理实现都非常方便,像之前介绍过的HTML5 Canvas正弦波动画和HTML5物理实验 CSS3模拟齿轮转动。今天我们又要介绍一款HTML5模拟物理实验,这次模拟的是HTML5牛顿力学实验,高空挂几个小球来回摆动,互相撞击,来模拟力的传动。

    威尼斯登录首页 3

    在线演示        源码下载

    在线演示源码下载

    3、HTML5 Canvas烟花特效 场景十分华丽

    对于HTML5技术来说,Canvas应用非常广泛,基本上所有HTML5动画特效都会用到Canvas特性。今天我们要分享一款基于HTML5 Canvas实现的烟花特效,我们只需在黑色的画布上点击鼠标,即会有漂亮的烟花绽放在夜空当中。

    威尼斯登录首页 4

    在线演示        源码下载

    HTML代码

    <div id="level">
        <div id="content">
            <div id="gears">
                <div id="gears-static"></div>
                <div id="gear-system-1">
                    <div class="shadow" id="shadow15"></div>
                    <div id="gear15"></div>
                    <div class="shadow" id="shadow14"></div>
                    <div id="gear14"></div>
                    <div class="shadow" id="shadow13"></div>
                    <div id="gear13"></div>
                </div>
                <div id="gear-system-2">
                    <div class="shadow" id="shadow10"></div>
                    <div id="gear10"></div>
                    <div class="shadow" id="shadow3"></div>
                    <div id="gear3"></div>
                </div>
                <div id="gear-system-3">
                    <div class="shadow" id="shadow9"></div>
                    <div id="gear9"></div>
                    <div class="shadow" id="shadow7"></div>
                    <div id="gear7"></div>
                </div>
                <div id="gear-system-4">
                    <div class="shadow" id="shadow6"></div>
                    <div id="gear6"></div>
                    <div id="gear4"></div>
                </div>
                <div id="gear-system-5">
                    <div class="shadow" id="shadow12"></div>
                    <div id="gear12"></div>
                    <div class="shadow" id="shadow11"></div>
                    <div id="gear11"></div>
                    <div class="shadow" id="shadow8"></div>
                    <div id="gear8"></div>
                </div>
                <div class="shadow" id="shadow1"></div>
                <div id="gear1"></div>
                <div id="gear-system-6">
                    <div class="shadow" id="shadow5"></div>
                    <div id="gear5"></div>
                    <div id="gear2"></div>
                </div>
                <div class="shadow" id="shadowweight"></div>
                <div id="chain-circle"></div>
                <div id="chain"></div>
                <div id="weight"></div>
            </div>
        </div>
    </div>
    

    4、jQuery轻量级网页编辑器 选中即可编辑

    目前流行的可视化网页编辑器非常多,像ckeditor、kindeditor、tinyeditor等,虽然功能都非常强大,但是体积都比较庞大,使用起来也不是很方便。今天我们分享一款基于jQuery的轻量级网页编辑器,它非常轻巧,选中内容即可编辑,非常适合在比较简单的编辑应用中。

    威尼斯登录首页 5

    在线演示        源码下载

    CSS代码

    #level{
        width:100%;
        height:1px;
        position:absolute;
        top:50%;
    }
    #content{
        text-align:center;
        margin-top:-327px;
    }
    #gears{
        width:478px;
        height:655px;
        position:relative;
        display:inline-block;
        vertical-align:middle;
    }
    #gears-static{
        background:url(FgFnjks.png) no-repeat -363px -903px;
        width:329px;
        height:602px;
        position:absolute;
        bottom:5px;
        right:0px;
        opacity:0.4;
    }
    #title{
        vertical-align:middle;
        color:#9EB7B5;
        width:43%;
        display:inline-block;
    }
    #title h1{
        font-family: 'PTSansNarrowBold', sans-serif;
        font-size:3.6em;
        text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;
    }
    #title p{
        font-family: sans-serif;
        font-size:1.2em;
        line-height:148%;
        text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;
    }
    
    .shadow{
        -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
        -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
        box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
    }
    
    /*gear-system-1*/
    #gear15{
        background: url(FgFnjks.png) no-repeat 0 -993px;
        width: 321px;
        height: 321px;
        position:absolute;
        left:45px;
        top:179px;
    
        -webkit-animation: rotate-back 24000ms linear infinite;
        -moz-animation: rotate-back 24000ms linear infinite;
        -ms-animation: rotate-back 24000ms linear infinite;
        animation: rotate-back 24000ms linear infinite;
    }
    #shadow15{
        width:306px;
        height:306px;
        -webkit-border-radius:153px;
        -moz-border-radius:153px;
        border-radius:153px;
        position:absolute;
        left:52px;
        top:186px;
    }
    #gear14{
        background: url(FgFnjks.png) no-repeat 0 -856px;
        width: 87px;
        height: 87px;
        position:absolute;
        left:162px;
        top:296px;
    }
    #shadow14{
        width:70px;
        height:70px;
        -webkit-border-radius:35px;
        -moz-border-radius:35px;
        border-radius:35px;
        position:absolute;
        left:171px;
        top:304px;
    }
    #gear13{
        background: url(FgFnjks.png) no-repeat 0 -744px;
        width: 62px;
        height: 62px;
        position:absolute;
        left:174px;
        top:309px;
    
        -webkit-animation: rotate 8000ms linear infinite;
        -moz-animation: rotate 8000ms linear infinite;
        -ms-animation: rotate 8000ms linear infinite;
        animation: rotate 8000ms linear infinite;
    }
    #shadow13{
        width:36px;
        height:36px;
        -webkit-border-radius:18px;
        -moz-border-radius:18px;
        border-radius:18px;
        position:absolute;
        left:187px;
        top:322px;
    }
    
    /*gear-system-2*/
    #gear10{
        background: url(FgFnjks.png) no-repeat 0 -184px;
        width: 122px;
        height: 122px;
        position:absolute;
        left:175px;
        top:0;
    
        -webkit-animation: rotate-back 8000ms linear infinite;
        -moz-animation: rotate-back 8000ms linear infinite;
        -ms-animation: rotate-back 8000ms linear infinite;
        animation: rotate-back 8000ms linear infinite;
    }
    #shadow10{
        width:86px;
        height:86px;
        -webkit-border-radius:43px;
        -moz-border-radius:43px;
        border-radius:43px;
        position:absolute;
        left:193px;
        top:18px;
    }
    #gear3{
        background: url(FgFnjks.png) no-repeat 0 -1493px;
        width: 85px;
        height: 84px;
        position:absolute;
        left:194px;
        top:19px;
    
        -webkit-animation: rotate 10000ms linear infinite;
        -moz-animation: rotate 10000ms linear infinite;
        -ms-animation: rotate 10000ms linear infinite;
        animation: rotate 10000ms linear infinite;
    }
    #shadow3{
        width:60px;
        height:60px;
        -webkit-border-radius:30px;
        -moz-border-radius:30px;
        border-radius:30px;
        position:absolute;
        left:206px;
        top:31px;
    }
    
    /*gear-system-3*/
    #gear9{
        background: url(FgFnjks.png) no-repeat -371px -280px;
        width: 234px;
        height: 234px;
        position:absolute;
        left:197px;
        top:96px;
    
        -webkit-animation: rotate 12000ms linear infinite;
        -moz-animation: rotate 12000ms linear infinite;
        -ms-animation: rotate 12000ms linear infinite;
        animation: rotate 12000ms linear infinite;
    }
    #shadow9{
        width:200px;
        height:200px;
        -webkit-border-radius:100px;
        -moz-border-radius:100px;
        border-radius:100px;
        position:absolute;
        left:214px;
        top:113px;
    }
    #gear7{
        background: url(FgFnjks.png) no-repeat -371px 0;
        width: 108px;
        height: 108px;
        position:absolute;
        left:260px;
        top:159px;
    
        -webkit-animation: rotate-back 10000ms linear infinite;
        -moz-animation: rotate-back 10000ms linear infinite;
        -ms-animation: rotate-back 10000ms linear infinite;
        animation: rotate-back 10000ms linear infinite;
    }
    #shadow7{
        width:76px;
        height:76px;
        -webkit-border-radius:38px;
        -moz-border-radius: 38px;
        border-radius: 38px;
        position:absolute;
        left:276px;
        top:175px;
    }
    
    /*gear-system-4*/
    #gear6{
        background: url(FgFnjks.png) no-repeat 0 -1931px;
        width: 134px;
        height: 134px;
        position:absolute;
        left:305px;
        bottom:212px;
    
        -webkit-animation: rotate-back 10000ms linear infinite;
        -moz-animation: rotate-back 10000ms linear infinite;
        -ms-animation: rotate-back 10000ms linear infinite;
        animation: rotate-back 10000ms linear infinite;
    }
    #shadow6{
        width:98px;
        height:98px;
        -webkit-border-radius:49px;
        -moz-border-radius: 49px;
        border-radius: 49px;
        position:absolute;
        left:323px;
        bottom:230px;
    }
    #gear4{
        background: url(FgFnjks.png) no-repeat 0 -1627px;
        width: 69px;
        height: 69px;
        position:absolute;
        left:337px;
        bottom:245px;
    
        -webkit-animation: rotate-back 10000ms linear infinite;
        -moz-animation: rotate-back 10000ms linear infinite;
        -ms-animation: rotate-back 10000ms linear infinite;
        animation: rotate-back 10000ms linear infinite;
    }
    
    /*gear-system-5*/
    #gear12{
        background: url(FgFnjks.png) no-repeat 0 -530px;
        width: 164px;
        height: 164px;
        position:absolute;
        left:208px;
        bottom:85px;
    
        -webkit-animation: rotate 8000ms linear infinite;
        -moz-animation: rotate 8000ms linear infinite;
        -ms-animation: rotate 8000ms linear infinite;
        animation: rotate 8000ms linear infinite;
    }
    #shadow12{
        width:124px;
        height:124px;
        -webkit-border-radius:62px;
        -moz-border-radius:62px;
        border-radius:62px;
        position:absolute;
        left:225px;
        bottom:107px;
    }
    #gear11{
        background: url(FgFnjks.png) no-repeat 0 -356px;
        width: 125px;
        height: 124px;
        position:absolute;
        left:228px;
        bottom:105px;
    
        -webkit-animation: rotate-back 10000ms linear infinite;
        -moz-animation: rotate-back 10000ms linear infinite;
        -ms-animation: rotate-back 10000ms linear infinite;
        animation: rotate-back 10000ms linear infinite;
    }
    #shadow11{
        width:88px;
        height:88px;
        -webkit-border-radius:44px;
        -moz-border-radius:44px;
        border-radius:44px;
        position:absolute;
        left:247px;
        bottom:123px;
    }
    #gear8{
        background: url(FgFnjks.png) no-repeat -371px -158px;
        width: 72px;
        height: 72px;
        position:absolute;
        left:254px;
        bottom:131px;
    
        -webkit-animation: rotate 6000ms linear infinite;
        -moz-animation: rotate 6000ms linear infinite;
        -ms-animation: rotate 6000ms linear infinite;
        animation: rotate 6000ms linear infinite;
    }
    #shadow8{
        width:42px;
        height:42px;
        -webkit-border-radius:21px;
        -moz-border-radius: 21px;
        border-radius: 21px;
        position:absolute;
        left:269px;
        bottom:146px;
    }
    
    /*gear1*/
    #gear1{
        background: url(FgFnjks.png) no-repeat 0 0;
        width: 135px;
        height: 134px;
        position:absolute;
        left:83px;
        bottom:111px;
    
        -webkit-animation: rotate-back 10000ms linear infinite;
        -moz-animation: rotate-back 10000ms linear infinite;
        -ms-animation: rotate-back 10000ms linear infinite;
        animation: rotate-back 10000ms linear infinite;
    }
    #shadow1{
        width:96px;
        height:96px;
        -webkit-border-radius:48px;
        -moz-border-radius:48px;
        border-radius:48px;
        position:absolute;
        left:103px;
        bottom:130px;
    }
    
    /*gear-system-6*/
    #gear5{
        background: url(FgFnjks.png) no-repeat 0 -1746px;
        width: 134px;
        height: 135px;
        position:absolute;
        left:22px;
        top:108px;
    
        -webkit-animation: rotate 10000ms linear infinite alternate;
        -moz-animation: rotate 10000ms linear infinite alternate;
        -ms-animation: rotate 10000ms linear infinite alternate;
        animation: rotate 10000ms linear infinite alternate;
    }
    #shadow5{
        width:96px;
        height:96px;
        -webkit-border-radius:48px;
        -moz-border-radius:48px;
        border-radius:48px;
        position:absolute;
        left:41px;
        top:127px;
    }
    #gear2{
        background: url(FgFnjks.png) no-repeat 0 -1364px;
        width: 80px;
        height: 79px;
        position:absolute;
        left:49px;
        top:136px;
    
        -webkit-animation: rotate-back 10000ms linear infinite alternate;
        -moz-animation: rotate-back 10000ms linear infinite alternate;
        -ms-animation: rotate-back 10000ms linear infinite alternate;
        animation: rotate-back 10000ms linear infinite alternate;
    }
    
    /*weight*/
    #weight{
        background: url(FgFnjks.png) no-repeat -371px -564px;
        width: 34px;
        height: 92px;
        position:absolute;
        left:1px;
        bottom:0;
    
        -webkit-animation: up 10000ms linear infinite alternate;
        -moz-animation: up 10000ms linear infinite alternate;
        -ms-animation: up 10000ms linear infinite alternate;
        animation: up 10000ms linear infinite alternate;
    }
    #shadowweight{
        width:10px;
        height:80px;
        position:absolute;
        left:12px;
        bottom:0px;
    
        -webkit-animation: up 10000ms linear infinite alternate;
        -moz-animation: up 10000ms linear infinite alternate;
        -ms-animation: up 10000ms linear infinite alternate;
        animation: up 10000ms linear infinite alternate;
    }
    
    /*chain*/
    #chain-circle{
        background: url(FgFnjks.png) no-repeat -371px -706px;
        width:146px;
        height:147px;
        position:absolute;
        left:17px;
        top:102px;
    
        -webkit-animation: rotate 10000ms linear infinite alternate;
        -moz-animation: rotate 10000ms linear infinite alternate;
        -ms-animation: rotate 10000ms linear infinite alternate;
        animation: rotate 10000ms linear infinite alternate;
    }
    #chain{
        width:1px;
        height:380px;
        border-left:2px dotted #C8D94A;
        position:absolute;
        left:17px;
        top:175px;
        opacity:0.7;
    
        -webkit-animation: collapse 10000ms linear infinite alternate;
        -moz-animation: collapse 10000ms linear infinite alternate;
        -ms-animation: collapse 10000ms linear infinite alternate;
        animation: collapse 10000ms linear infinite alternate;
    }
    
    /*ANIMATIONS*/
    /*rotate*/
    @keyframes "rotate" {
     from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
     }
     to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
     }
    }
    
    @-moz-keyframes rotate {
     from {
       -moz-transform: rotate(0deg);
       transform: rotate(0deg);
     }
     to {
       -moz-transform: rotate(360deg);
       transform: rotate(360deg);
     }
    }
    
    @-webkit-keyframes "rotate" {
     from {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
     }
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
     }
    }
    
    @-ms-keyframes "rotate" {
     from {
       -ms-transform: rotate(0deg);
       transform: rotate(0deg);
     }
     to {
       -ms-transform: rotate(360deg);
       transform: rotate(360deg);
     }
    }
    
    @-o-keyframes "rotate" {
     from {
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
     }
     to {
       -o-transform: rotate(360deg);
       transform: rotate(360deg);
     }
    }
    /*rotate-back*/
    @keyframes "rotate-back" {
     from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
     }
     to {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        transform: rotate(-360deg);
     }
    }
    
    @-moz-keyframes rotate-back {
     from {
       -moz-transform: rotate(0deg);
       transform: rotate(0deg);
     }
     to {
       -moz-transform: rotate(-360deg);
       transform: rotate(-360deg);
     }
    }
    
    @-webkit-keyframes "rotate-back" {
     from {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
     }
     to {
       -webkit-transform: rotate(-360deg);
       transform: rotate(-360deg);
     }
    }
    
    @-ms-keyframes "rotate-back" {
     from {
       -ms-transform: rotate(0deg);
       transform: rotate(0deg);
     }
     to {
       -ms-transform: rotate(-360deg);
       transform: rotate(-360deg);
     }
    }
    
    @-o-keyframes "rotate-back" {
     from {
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
     }
     to {
       -o-transform: rotate(-360deg);
       transform: rotate(-360deg);
     }
    }
    /*weight up*/
    @keyframes "up" {
     from {
        bottom: 0px;
     }
     to {
        bottom: 340px;
     }
    }
    
    @-moz-keyframes up {
     from {
       bottom: 0px;
     }
     to {
       bottom: 340px;
     }
    }
    
    @-webkit-keyframes "up" {
     from {
       bottom: 0px;
     }
     to {
       bottom: 340px;
     }
    }
    
    @-ms-keyframes "up" {
     from {
       bottom: 0px;
     }
     to {
       bottom: 340px;
     }
    }
    
    @-o-keyframes "up" {
     from {
       bottom: 0px;
     }
     to {
       bottom: 340px;
     }
    }
    /*chain up and down*/
    @keyframes "collapse" {
     from {
        height: 387px;
     }
     to {
        height: 48px;
     }
    }
    
    @-moz-keyframes collapse {
     from {
       height: 387px;
     }
     to {
       height: 48px;
     }
    }
    
    @-webkit-keyframes "collapse" {
     from {
       height: 387px;
     }
     to {
       height: 48px;
     }
    }
    
    @-ms-keyframes "collapse" {
     from {
       height: 387px;
     }
     to {
       height: 48px;
     }
    }
    
    @-o-keyframes "collapse" {
     from {
       height: 387px;
     }
     to {
       height: 48px;
     }
    }
    

    在线演示源码下载

    5、CSS3手风琴菜单 下拉展开带弹性动画

    利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享了许多CSS3菜单。今天我们分享的这款是CSS3手风琴菜单,菜单项在展开和收缩的时候菜单项会有弹性动画效果。每一层父级菜单有一个小三角,菜单项在展开的时候这个小三角也会出现动画,非常酷。

    威尼斯登录首页 6

    在线演示        源码下载

    6、HTML5/CSS3 3D环形图片墙 伴随旋转动画

    我们分享过很多HTML5图片特效,包括HTML5图片播放、HTML5图片缩放等效果。今天我们要分享一款基于HTML5/CSS3的3D环形图片墙,该HTML5图片特效是一面3D立体的墙,墙上贴着一些图片,墙体在不停的旋转移动。鼠标滑过图片时,图片墙即停止转动,并将选中的图片放大。

    威尼斯登录首页 7

    在线演示        源码下载

    7、HTML5 Canvas正弦波动画 可自定义波长和速度

    正弦波我们很熟悉,以前数学和物理课上经常会用到,还记得以前物理老师演示的正弦动画还是用flash制作的呢。今天我们要分享的这款HTML5 Canvas动画就和正弦波有关,我们可以稍稍修改一下HTML5代码即可定义波长、频率等正弦波的一些属性,很酷吧。

    威尼斯登录首页 8

    在线演示        源码下载

    怎么样,HTML5很给力吧,希望你也能加入HTML5的阵列,欢迎关注@html5tricks获取更多HTML5应用和教程。

    本文由html5tricks收集整理,转载请务必保留原文链接

    本文由威尼斯手机平台登陆发布于前端资源,转载请注明出处:【威尼斯登录首页】付费投稿计划,不信就一起来看看吧

    关键词: