精华内容
下载资源
问答
  • 先上效果图吧平面泡沫立体泡沫之前想做动态泡泡的效果,在网上没有搜到类似的样式。所以自己做了一个发上来,给有需要的人参考参考。代码部分有疑问或者有错请在评论指出,尽量快点回复。代码部分:<!DOCTYPE...

    先上效果图吧

     平面泡沫

    立体泡沫

     

    之前想做动态泡泡的效果,在网上没有搜到类似的样式。所以自己做了一个发上来,给有需要的人参考参考。代码部分有疑问或者有错请在评论指出,尽量快点回复。

    2020/03/03更新(解决了CSDN更新导致代码格式的问题)

    平面版(立体版在最下面):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;
                padding: 0;
                font: 16px/20px microsft yahei;
             }
            .wrap {
                width: 100%;
                height: 100%;
                padding: 10% 0;
                position: fixed;
                opacity: 0.8;
                background: linear-gradient(to bottom right,#000000, #656565);
                background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
            }
            .container {
                width: 60%;
                margin: 0 auto;
            }
            .container h1 {
                text-align: center;
                color: #FFFFFF;
                font-weight: 500;
            }
            .container input {
                width: 320px;
                display: block;
                height: 36px;
                border: 0;
                outline: 0;
                padding: 6px 10px;
                line-height: 24px;
                margin: 32px auto;
                -webkit-transition: all 0s ease-in 0.1ms;
                -moz-transition: all 0s ease-in 0.1ms;
                transition: all 0s ease-in 0.1ms;
            }
            .container input[type="text"] , .container input[type="password"]  {
                background-color: #FFFFFF;
                font-size: 16px;
                color: #50a3a2;
            }
            .container input[type='submit'] {
                font-size: 16px;
                letter-spacing: 2px;
                color: #666666;
                background-color: #FFFFFF;
            }
            .container input:focus {
                width: 400px;
            }
            .container input[type='submit']:hover {
                cursor: pointer;
                width: 400px;
            }
            .to_login{
                color: #a7c4c9;
            }
            .text{
                color: #e2dfe4;
            }
            .wrap ul {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -20;
            }
            .wrap ul li {
                list-style-type: none;
                display: block;
                position: absolute;
                bottom: -120px;
                width: 15px;
                height: 15px;
                z-index: -8;
                border-radius: 50%;
                background-color:rgba(255, 255, 255, 0.15);
                animotion: square 25s infinite;
                -webkit-animation: square 25s infinite;
            }
            .wrap ul li:nth-child(1) {
                left: 0;
                animation-duration: 10s;
                -moz-animation-duration: 10s;
                -o-animation-duration: 10s;
                -webkit-animation-duration: 10s;
            }
            .wrap ul li:nth-child(2) {
                width: 40px;
                height: 40px;
                left: 10%;
                animation-duration: 15s;
                -moz-animation-duration: 15s;
                -o-animation-duration: 15s;
                -webkit-animation-duration: 11s;
            }
            .wrap ul li:nth-child(3) {
                left: 20%;
                width: 25px;
                height: 25px;
                animation-duration: 12s;
                -moz-animation-duration: 12s;
                -o-animation-duration: 12s;
                -webkit-animation-duration: 12s;
            }
            .wrap ul li:nth-child(4) {
                width: 50px;
                height: 50px;
                left: 30%;
                -webkit-animation-delay: 3s;
                -moz-animation-delay: 3s;
                -o-animation-delay: 3s;
                animation-delay: 3s;
                animation-duration: 12s;
                -moz-animation-duration: 12s;
                -o-animation-duration: 12s;
                -webkit-animation-duration: 12s;
            }
            .wrap ul li:nth-child(5) {
                width: 60px;
                height: 60px;
                left: 40%;
                animation-duration: 10s;
                -moz-animation-duration: 10s;
                -o-animation-duration: 10s;
                -webkit-animation-duration: 10s;
            }
            .wrap ul li:nth-child(6) {
                width: 75px;
                height: 75px;
                left: 50%;
                -webkit-animation-delay: 7s;
                -moz-animation-delay: 7s;
                -o-animation-delay: 7s;
                animation-delay: 7s;
            }
            .wrap ul li:nth-child(7) {
                left: 60%;
                width: 30px;
                height: 30px;
                animation-duration: 8s;
                -moz-animation-duration: 8s;
                -o-animation-duration: 8s;
                -webkit-animation-duration: 8s;
            }
            .wrap ul li:nth-child(8) {
                width: 90px;
                height: 90px;
                left: 70%;
                -webkit-animation-delay: 4s;
                -moz-animation-delay: 4s;
                -o-animation-delay: 4s;
                animation-delay: 4s;
            }
            .wrap ul li:nth-child(9) {
                width: 50px;
                height: 50px;
                left: 80%;
                animation-duration: 20s;
                -moz-animation-duration: 20s;
                -o-animation-duration: 20s;
                -webkit-animation-duration: 20s;
            }
            .wrap ul li:nth-child(10) {
                width: 75px;
                height: 75px;
                left: 90%;
                -webkit-animation-delay: 6s;
                -moz-animation-delay: 6s;
                -o-animation-delay: 6s;
                animation-delay: 6s;
                animation-duration: 30s;
                -moz-animation-duration: 30s;
                -o-animation-duration: 30s;
                -webkit-animation-duration: 30s;
            }
            @keyframes square {
                0% {
                    -webkit-transform: translateY(0);
                    transform: translateY(0)
                }
                100% {
                    bottom: 400px;
                    -webkit-transform: translateY(-500);
                    transform: translateY(-500)
                }
            }
            @-webkit-keyframes square {
                0% {
                    -webkit-transform: translateY(0);
                    transform: translateY(0)
                }
                100% {
                    bottom: 400px;
                    -webkit-transform: translateY(-500);
                    transform: translateY(-500)
                }
            }
        </style>
    </head>
    <body>
        <div class="wrap">
        <div class="container">
            <h1 style="color: white; margin: 0; text-align: center">Sign up</h1>
            <form>
            <label><input type="text" placeholder="Your username"/></label>
            <label><input type="text" placeholder="Your email"/></label>
            <label><input type="password" placeholder="password" /></label>
            <label><input type="password" placeholder="Please confirm your password" /></label>
    
                <input type="submit" value="Sign up"/>
                <p class="change_link" style="text-align: center">
                    <span class="text">Already a member ?</span>
                    <a href="login.html" class="to_login"> Go and log in </a>
                </p>
            </form>
        </div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    </body>
    </html>

     

    立体效果的话,在无序列表li增加box-shadow属性,根据自己需求调整即可。

    我把我的发出来

    .wrap ul li {
                list-style-type: none;
                display: block;
                position: absolute;
                bottom: -120px;
                width: 15px;
                height: 15px;
                z-index: -8;
                border-radius: 50%;
                box-shadow: inset -30px -30px 75px rgba(0, 0, 0, .2), 
                inset 0px 0px 5px rgba(0, 0, 0, .5),    
                inset -3px -3px 5px rgba(0, 0, 0, .5),  
                0 0 20px rgba(255, 255, 255, .75);      
                background-color:rgba(255, 255, 255, 0.15);
                animotion: square 25s infinite;
                -webkit-animation: square 25s infinite;

            }

     

    不浪费大家找位置的时间,我把li整个属性发出来了。box-shadow后面的参数可以自行更改。

    立体版:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;
                padding: 0;
                font: 16px/20px microsft yahei;
             }
            .wrap {
                width: 100%;
                height: 100%;
                padding: 10% 0;
                position: fixed;
                opacity: 0.8;
                background: linear-gradient(to bottom right,#000000, #656565);
                background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
            }
            .container {
                width: 60%;
                margin: 0 auto;
            }
            .container h1 {
                text-align: center;
                color: #FFFFFF;
                font-weight: 500;
            }
            .container input {
                width: 320px;
                display: block;
                height: 36px;
                border: 0;
                outline: 0;
                padding: 6px 10px;
                line-height: 24px;
                margin: 32px auto;
                -webkit-transition: all 0s ease-in 0.1ms;
                -moz-transition: all 0s ease-in 0.1ms;
                transition: all 0s ease-in 0.1ms;
            }
            .container input[type="text"] , .container input[type="password"]  {
                background-color: #FFFFFF;
                font-size: 16px;
                color: #50a3a2;
            }
            .container input[type='submit'] {
                font-size: 16px;
                letter-spacing: 2px;
                color: #666666;
                background-color: #FFFFFF;
            }
            .container input:focus {
                width: 400px;
            }
            .container input[type='submit']:hover {
                cursor: pointer;
                width: 400px;
            }
            .to_login{
                color: #a7c4c9;
            }
            .text{
                color: #e2dfe4;
            }
            .wrap ul {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -20;
            }
            .wrap ul li {
                list-style-type: none;
                display: block;
                position: absolute;
                bottom: -120px;
                width: 15px;
                height: 15px;
                z-index: -8;
                border-radius: 50%;
                box-shadow: inset -30px -30px 75px rgba(0, 0, 0, .2),
                inset 0px 0px 5px rgba(0, 0, 0, .5),
                inset -3px -3px 5px rgba(0, 0, 0, .5),
                0 0 20px rgba(255, 255, 255, .75);
                background-color:rgba(255, 255, 255, 0.15);
                animotion: square 25s infinite;
                -webkit-animation: square 25s infinite;
            }
            .wrap ul li:nth-child(1) {
                left: 0;
                animation-duration: 10s;
                -moz-animation-duration: 10s;
                -o-animation-duration: 10s;
                -webkit-animation-duration: 10s;
            }
            .wrap ul li:nth-child(2) {
                width: 40px;
                height: 40px;
                left: 10%;
                animation-duration: 15s;
                -moz-animation-duration: 15s;
                -o-animation-duration: 15s;
                -webkit-animation-duration: 11s;
            }
            .wrap ul li:nth-child(3) {
                left: 20%;
                width: 25px;
                height: 25px;
                animation-duration: 12s;
                -moz-animation-duration: 12s;
                -o-animation-duration: 12s;
                -webkit-animation-duration: 12s;
            }
            .wrap ul li:nth-child(4) {
                width: 50px;
                height: 50px;
                left: 30%;
                -webkit-animation-delay: 3s;
                -moz-animation-delay: 3s;
                -o-animation-delay: 3s;
                animation-delay: 3s;
                animation-duration: 12s;
                -moz-animation-duration: 12s;
                -o-animation-duration: 12s;
                -webkit-animation-duration: 12s;
            }
            .wrap ul li:nth-child(5) {
                width: 60px;
                height: 60px;
                left: 40%;
                animation-duration: 10s;
                -moz-animation-duration: 10s;
                -o-animation-duration: 10s;
                -webkit-animation-duration: 10s;
            }
            .wrap ul li:nth-child(6) {
                width: 75px;
                height: 75px;
                left: 50%;
                -webkit-animation-delay: 7s;
                -moz-animation-delay: 7s;
                -o-animation-delay: 7s;
                animation-delay: 7s;
            }
            .wrap ul li:nth-child(7) {
                left: 60%;
                width: 30px;
                height: 30px;
                animation-duration: 8s;
                -moz-animation-duration: 8s;
                -o-animation-duration: 8s;
                -webkit-animation-duration: 8s;
            }
            .wrap ul li:nth-child(8) {
                width: 90px;
                height: 90px;
                left: 70%;
                -webkit-animation-delay: 4s;
                -moz-animation-delay: 4s;
                -o-animation-delay: 4s;
                animation-delay: 4s;
            }
            .wrap ul li:nth-child(9) {
                width: 50px;
                height: 50px;
                left: 80%;
                animation-duration: 20s;
                -moz-animation-duration: 20s;
                -o-animation-duration: 20s;
                -webkit-animation-duration: 20s;
            }
            .wrap ul li:nth-child(10) {
                width: 75px;
                height: 75px;
                left: 90%;
                -webkit-animation-delay: 6s;
                -moz-animation-delay: 6s;
                -o-animation-delay: 6s;
                animation-delay: 6s;
                animation-duration: 30s;
                -moz-animation-duration: 30s;
                -o-animation-duration: 30s;
                -webkit-animation-duration: 30s;
            }
            @keyframes square {
                0% {
                    -webkit-transform: translateY(0);
                    transform: translateY(0)
                }
                100% {
                    bottom: 400px;
                    -webkit-transform: translateY(-500);
                    transform: translateY(-500)
                }
            }
            @-webkit-keyframes square {
                0% {
                    -webkit-transform: translateY(0);
                    transform: translateY(0)
                }
                100% {
                    bottom: 400px;
                    -webkit-transform: translateY(-500);
                    transform: translateY(-500)
                }
            }
        </style>
    </head>
    <body>
        <div class="wrap">
        <div class="container">
            <h1 style="color: white; margin: 0; text-align: center">Sign up</h1>
            <form>
            <label><input type="text" placeholder="Your username"/></label>
            <label><input type="text" placeholder="Your email"/></label>
            <label><input type="password" placeholder="password" /></label>
            <label><input type="password" placeholder="Please confirm your password" /></label>
    
                <input type="submit" value="Sign up"/>
                <p class="change_link" style="text-align: center">
                    <span class="text">Already a member ?</span>
                    <a href="login.html" class="to_login"> Go and log in </a>
                </p>
            </form>
        </div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    </body>
    </html>

     

    展开全文
  • HTML 5 动态效果制作方法整理

    千次阅读 2016-11-28 14:14:40
    HTML 5 动态效果制作方法整理1.前言随着时代的发展和进步,越来越多的开发者开始在前端界面中加入动态效果。那么我们今天就一起来整理和分享一下前端动态效果的制作方法,并对其中的 Canvas 进行一下简单的讲解。2....

    0.备注

    如果发现有某些图片未正常加载,可以点击下面链接,查看文章。

    HTML 5 动态效果制作方法整理

    1.前言

    随着时代的发展和进步,越来越多的开发者开始在前端界面中加入动态效果。

    那么我们今天就一起来整理和分享一下前端动态效果的制作方法,并对其中的 Canvas 进行一下简单的讲解。

    2.动态效果的分类

    我们首先先来简单看一下,动态效果的制作有哪些分类?

    3.GIF

    首先第一个就是我们的 gif 图片,这是一种非常简单,但却高效的动态图制作方式。

    GIF图片擅长于制作细节的小动画,位图,优势在于 “体型”很小,可压缩,制作成本低,以图片的形态适用于各种操作系统,无兼容性的后顾之忧。制作GIF动画的方式有很多,例如我们所熟悉的Photoshop时间轴,或是利用Flash,AE将动画导出存成GIF格式等等。

    GIF动画最常在H5动效里当担loading导航条,热门小标签等元素,要把控图片大小和精度之间的平衡,所以它一般用于制作小细节的动画。

    H5页面承载GIF图片的方式相对以下要介绍的其他方法,是最省成本,最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。

    4.逐帧动画

    有很多朋友读到这里,可能会觉得,逐帧动画跟 GIF 不应该是一样的么?

    逐帧动画即是利用一张等间距的动画分解逐帧图片,一般是由js脚本模拟编写

    逐帧动画和GIF动画的差别在于,脚本可以控制逐帧动画的快慢和动作的暂停,而GIF动画无法在后期通过代码进行动画速率及透明度的修改

    做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”,之后我们就可以通过修改 background-position 来完成一个“逐帧动画”。

    当然我们也可以通过设置特殊的图片,来完成一些特殊的效果。

    5.CSS3 动画

    CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为**擅长于平面层的动画。**CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。

    关于动画的应用和基础属性介绍在之前也已经介绍过了,如果小伙伴们忘记了,可以点击下面的链接去从新温习一下。

    CSS3 动画

    这里说个题外话,如何高质高效把动画设计传达给工程师呢?

    Tips:建议使用“案例Demo或者分镜头脚本+动画属性分解表+素材切图”的套装

    以下图为例:这是一个点击反馈的小动画,在无法提供Demo的时候,我们可以使用”动画属性分解表”的方式。

    动画属性分解表可以让工程师根据表格内填写的数值进行动画的编写,会比凭空的和工程师进行交流传达,来的更精准一些。

    6.SVG

    SVG,也是动效制作中不可忽略的一大热门方法,我们定义它为擅长于线条的动画,弊端是:IE8,Android4.2及以下支持不好。

    看下图几个例子,涉及到这种沿着元素描边的动画,一般都是出自SVG之手啦,当然,它也可以实现一些复杂的动画,类似这个表情图片,不过实现成本是不太划算的。

    知识普及:**SVG,可缩放矢量图形(Scalable Vector Graphics), 是被存成了 XML 格式的图像,它有一些特别的地方:

    • 可被多种工具读取和修改(比如记事本)
    • 尺寸更小,可压缩性更强
    • 矢量
    • 纯粹的 XML

    一张SVG图,其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。而页面中的引用,也是简单的将此文本引入即可。

    这里必须要注意的点是:如果你想制作一个SVG动画,请一定要使用AI工具绘制输出矢量图给到工程师同学哦。

    如果大家有兴趣继续深入了解,可以点击下面的链接,这是我之前写的小教程,教大家如何通过 SVG 画出一只小狐狸。

    SVG 的基础教程

    7.Canvas

    HTML5 的新元素 ,类似画板,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

    本身是没有绘图能力的。所有的绘制工作必须依赖 JavaScript 完成。

    我们定义它为**擅长于绘画的动画。

    如下图,绘制这样一个大量元素下落的动画效果,就是Canvas所擅长的。

    Canvas可以算是SVG的堂兄弟,大部分的图表动画,都是由Canvas或是SVG制作而成的,二者的动画能力相似但也有以下这些区别:

    • canvas是画框,有自己固定的高宽,svg是不依赖分辨率的矢量,可以任意放大缩小。
    • canvas能以.jpg的格式保存图像,svg是文本的格式保存图像
    • canvas绘制的图像不占DOM,而svg的每个图像都是1个DOM元素
    • canvas适合图像密集型的动画,而svg不适合大量使用,例如制作飘雪等
    • canvas完全依赖脚本绘制作,而svg可直接使用矢量转存生成。

    之前我也专门写过 Canvas 的入门教程,如果大家忘记了,可以点击下面的链接,重新回顾一下。

    Canvas 基础(一)

    Canvas 基础(二)

    8.Flash To Canvas

    除去上面几种常见的手法,Flash转Canvas的方法也是今年特别火爆的一种形式。

    既然提到曾经辉煌的Flash,那产出物必须离不开炫酷这个形容词:通过Flash cc制作复杂又精细的动画,导成Canvas文件,动画中的交互操作,依赖Create.js的脚步库完成。

    因为 flash 转 Canvas 的实现成本实际上非常高,在这里也就不做更多的介绍了。

    9.Video

    video 作为 HTML 5 的新标签,有着许多非常强大的功能。

    但是与之相对应的,它也因为兼容性的问题,存在了各种制约,但是无可否认,Video 在实现动态效果的方式和成本上,是其他方式无可比拟的。

    10.JavaScript

    其实,只要是涉及到交互反馈的动画,小至滚屏翻页,大到重力感应等都需要js进行处理脚步的编写。

    也就是说,所有的动画特效都离不开Javascript同学的支持。

    市面上有很多特别的Javascript脚本库,例如three.js,细细运用,就可以做出非同凡响的动画效果。

    11.后记

    这篇文章原本是想专门写 Canvas 的小效果的,结果“抄着抄着”就发现,已经写这么多了。

    不过也无所谓了,大不了从新开一篇文章咯。

    祝工作愉快!

    本文摘自:《H5动效的常见制作手法》

    展开全文
  • HTML页面侧栏动态效果

    千次阅读 2017-11-13 11:15:36
    代码如下所示: 页面侧栏动态效果 *{ padding:0px; margin:0px; } body{ background-color:skyblue; height:1200px; } #sidebar{ position:fixed;

    代码如下所示:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>页面侧栏动态效果</title>
        <style>
        *{
            padding:0px;
            margin:0px;
        }
        body{
            background-color:skyblue;
            height:1200px;
        }
        #sidebar{
            position:fixed;
            width:130px;
            right:0px;
            top:50%;
            transform:translateY(-50%);
            
        }
        #sidebar ul{
            list-style:none;
            
            overflow:hidden;
        }
        #sidebar li{
            line-height:30px;
            border-bottom:2px solid gray;
            position:relative;
            background-color:white;
            left:100px;
        }
        #sidebar li a{
            text-decoration:none;
            display:block;
        }
        #sidebar li a span{
            display:inline-block;
            height:30px;
            width:30px;
            background-color:blue;
            color:white;
            font-weight:bold;
            text-align:center;
        }
        #sidebar li:hover a span{
            background-color:white;
            color:blue;
        }
        #sidebar li:hover a {
            background-color:blue;
            color:white;
        }
        </style>
    </head>
    <body>
        <div id="sidebar">
            <ul>
                <li><a href="#"><span>1</span>第一页</a></li>
                <li><a href="#"><span>2</span>第二页</a></li>
                <li><a href="#"><span>3</span>第三页</a></li>
                <li><a href="#"><span>4</span>第四页</a></li>
                <li><a href="#"><span>5</span>第五页</a></li>
                <li><a href="#"><span>6</span>第六页</a></li>
                <li><a href="#"><span>7</span>第七页</a></li>
                <li><a href="#"><span>8</span>第八页</a></li>
                <li><a href="#"><span>9</span>第九页</a></li>
                <li><a href="#"><span>10</span>第十页</a></li>
                <li><a href="#"><span>11</span>第十一页</a></li>
                <li><a href="#"><span>12</span>第十二页</a></li>
                <li><a href="#"><span>13</span>第十三页</a></li>
            </ul>
        </div>
        <script src="jquery-1.8.3.min.js"></script>
        <script>
        $(function(){
            $("#sidebar").hover(function(){
                $("#sidebar li").each(function(index){
                    setTimeout(function(){
                        $(this).stop().animate({"left":"0px"});
                    }.bind(this),index*50);
                });
            },function(){
                $("#sidebar li").each(function(index){
                    setTimeout(function(){
                        $(this).stop().animate({"left":"100px"});
                    }.bind(this),index*50);
                });
            });
        });
        </script>
    </body>
    </html>
    效果图如下:

    相关知识点:

    1、PC端默认不使用HTML5标签,例如<aside>标签,因为IE不支持
    在<style>中编辑CSS,是一种DHTML风格,DHTML风格为HTML+JS+CSS都写在一个页面中,节约服务器的资源。在页面中代码少的情况下,建议使用该方法。但是在代码多时,建议使用<link>外联

    2、使用通配符去除元素的默认内外边距
    *{
    padding:0px;
    margin:0px;
    }
    即使元素的内外边距使我们需要的,也要去除,因为不同浏览器的兼容性(padding,margin)不同。
    但是尽量不要使用*,因为很吃资源,可以设置具体的元素属性。

    3、将元素移动到屏幕的左边,方法有浮动、定位、margin
    使用margin的方法,如下设置
    margin:auto;
    margin-right:0px;

    4、WEB语义化    ----重点----

    5、行内块级元素有input、img、table

    6、javascript是一门动态类型、弱类型、基于原型的面向对象编程语言
    动态类型:
    java中设置int i=0; //确定类型
    js中设置var i; //可以为Number、NULL、String等类型

    js中,最简单的是特效->数据交互和数据分离->数据结构->设计模式

    推荐书籍:you don't know js


    展开全文
  • 动态输出html一些效果失效的处理

    千次阅读 2015-09-02 19:22:20
    利用AJAX动态加载页面,实现无刷新加载,有时会出现一些问题。...假如是动态加载,此时页面早已加载完毕,那么动态输出的,带有这些特殊属性的元素,就得不到处理,就不会有特定的效果。比如:添加新角色' href="@Url.A

    利用AJAX动态加载页面,实现无刷新加载,有时会出现一些问题。比如说,在一些jquery控件中,是利用在页面加载的时候,对一些带有特殊属性的元素进行处理,比如事件绑定什么的。假如是动态加载,此时页面早已加载完毕,那么动态输出的,带有这些特殊属性的元素,就得不到处理,就不会有特定的效果。

    比如:

    <a class="btn blue thickbox" title='添加新角色' href="@Url.Action("Create")?TB_iframe=true&height=350&width=500"><i class="icon-plus icon-white"></i> 新增</a>

    本来点击这个链接,会有一个对话框弹出(参见thickbox),但假如这段代码用ajax动态输出,则没有这个效果。

    应对之道,在动态加载完毕后,紧接着执行:

    tb_init('a.thickbox', 'tr.thickbox', 'td.thickbox');//解决动态生成无效的问题
    //tb_init是jquery.thickbox.js的函数

    这种通过定义标记的个性化属性,然后由JS加以解释、处理,是一种很妙的思路。以前我在easyUI上见识过,但没有怎么留意。

    展开全文
  • Canvas实现HTML动态粒子效果背景

    千次阅读 2018-03-25 13:44:41
    之前参考诸多博客,发现许多博主自定义的博客主页都会有很多动态的小粒子在页面漂浮,鼠标经过还会有响应事件,在这里,将代码记录一下。 首先,在html页面要先定义一个canvas元素:&lt;canvas id="cas&...
  • HTML + CSS实现动态背景的登录效果

    千次阅读 2020-04-27 18:51:11
    一、动态背景的登录效果图 由于背景是在不断的切换的,就不一一截图展示啦。 二、文件结构展示 三、源码区 1.html文档(index.html) <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • HTML 图片鼠标悬停动态效果

    千次阅读 2016-02-17 17:01:02
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml ">  ...
  • Html未加载完成时实现动态加载效果

    千次阅读 2015-12-13 15:28:21
    html页面未加载完成时会有一段空白,增强用户体验的话,必须在未加载完成时实现动态效果 效果如下: 1、一个普通html页面,内容如下 .loader {  position: fixed;  left: 0px;  top: 0px;  ...
  • HTML5 Canvas 六角光阑动态效果

    千次阅读 2017-09-08 11:29:59
    光阑是光具组件中光学元件的边缘、框架或特别设置的带孔屏障...当然看动态效果才能真正体验,要看完整的演示请下载:https://files.cnblogs.com/files/xiandedanteng/slotAnimation.rar 并用chrome打开。 代码如下:
  • HTML+CSS+JS仿京东购物车页面动态效果

    千次阅读 多人点赞 2020-04-30 16:29:45
    目录 1 用到的知识 1.1 js选择器 1.2 循环语句 1.3 文档修改语句 1.4 模块移除属性 ...5 效果展示 1 用到的知识 前面静态页面知识:HTML+CSS仿京东购物车页面静态页面 1.1 js选择器 var fav=document....
  • jq动态拼接html页面及数据

    万次阅读 多人点赞 2021-08-16 11:10:54
    如果需要做换页,导航此类的效果最好使用html()方法 详情可参考:append()与html()区别 废话不多说直接上代码: 1.首先 在需要动态拼接的地方的父级标签可以加上一个id或者class类名 区别倒是不大 个人都是加classNa
  • CSS实现动态文字效果

    万次阅读 2018-05-07 10:58:15
    最终效果截图(静态):HTML代码:&lt;svg viewBox="0 0 600 300"&gt; &lt;symbol id="id"&gt; &lt;text dy="1em"&gt;Lychee&lt;/text&gt; &...
  • 本人遇到一个问题:JS动态拼接HTML给一个值添加一个onclick事件的时候,因为想省事的原因,两个值的ID命名为(i)+a 第二个为:(i)+a1 ,但是运行后效果都为第一个值的效果。解决:将第二个ID改为(i)+aa后 问题...
  • HTML+CSS:一个动态效果的登录界面

    千次阅读 2020-03-19 22:44:18
    DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Login</title> <link rel="stylesheet" type="text/css" href="login_style.css"/> <script> fuction f() { alert("你还真点了啊");...
  • HTML 动态背景

    万次阅读 2019-02-12 14:59:17
    效果截图: GIF: PNG: Html页: &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;  &lt;meta http-equiv="Content-Type" content="text/...
  • JS实现动态打字效果

    万次阅读 多人点赞 2018-06-29 20:20:48
    自己想用JS来实现一个动态打字的效果,然后对网上的一些方法做了一个总结 只打印单纯的文字 只打印文字时,就是循环打印字符串,字符串长度依次递增 ...
  • 利用JS实现动态进度条效果

    万次阅读 2017-10-27 19:51:40
    效果:实现一个每隔一秒进度增加1%,到100%停止的进度条,不同的进度改变进度条的颜色。 一、利用HTML+CSS进行页面布局 注意:1.将进度条变化区域宽度(width)设置为0,再设置一个背景颜色;  2.将移动的进度飞机...
  • jQuery实现动态数字展示效果

    千次阅读 2018-04-25 11:11:01
    Jq数据列表动态效果动态更新,支持Ajax...HTML代码本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用。在HTML页面中只需定义以下结构: &lt...
  • 用js实现动态数字时钟效果

    千次阅读 2019-04-30 09:47:39
    js实现动态数字时钟效果用到主要知识点如下: 1.主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 2.时间的处理和渲染 3.js用到面向对象的写法 实现的功能 炫酷的数字时间效果 ...
  • 白鹭引擎之效果篇(一)label动态滚动效果 技术在于沉淀: 效果目的 代码实现 调用方式 小结 效果目的 实现类似伤害或者加血的一个数值动效。 数值范围:正到负,负到正,皆可 代码实现 module game...
  • html如何动态生成一个等待效果,屏幕黑然后小圈再转,等ajax返回成功才消失
  • cesium 动态水面效果

    千次阅读 2018-07-17 17:15:00
    后续继续更新 转载于:https://www.cnblogs.com/dongzhiwu/p/9324438.html
  • 实现类似表格内容动态滚动效果

    千次阅读 2019-05-04 21:31:36
    在一些大屏首页展示上,通常会有一些表格展示,由于大屏的特殊性,不会有人专门去操作这个页面查看相应数据,一般都会采用动态滚动的效果。下面是具体的实现。 效果图 实现思路 通过<ul>和<li>标签...
  • 网站导航栏如何实现动态效果

    千次阅读 2018-07-23 17:34:46
    导航栏是每一个网站都要有的,那么对于一般的导航栏制作,相信大家都会,而且也不会遇到什么麻烦,但是如何才能让网站导航栏实现动态效果估计这会难倒很多技术人员,那么下面就来为大家分析解答一下。 Html代码: ...
  • 前端之动态时钟效果

    千次阅读 2020-05-22 13:47:59
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ background: #000; color: #666; font-size: 12px; .
  • Html动态时钟实例

    千次阅读 2017-08-26 10:01:34
    Html动态时钟实例  时间已经成为我们每天必不可少的一个元素,我们是否想过用html来实现一款动态的实时时钟呢?今天我就与大家分享一下html动态时钟的实现过程,项目用Hbuilder构建。 一、代码目录结构如图所...
  • CSS实现图像旋转动态效果

    万次阅读 2019-04-11 11:12:21
    CSS实现图像旋转动态效果 首先,应向需要设置旋转的div的css样式中添加如下代码: 例如向一个名为img01的类选择器添加旋转样式,在animation属性内设置,旋转动画,rotate为动画名(自定义的名称),6s为周期,...
  • js实现动态气泡效果

    千次阅读 2018-12-05 11:54:28
    本文实例讲述了javascript实现很...运行效果截图如下: 具体代码如下: 实现思路:HTML里只需要一个CANVAS元素,Javascript里操作canvas 1、给canvas里绘制背景图片 2、在绘制半径为0-10px的圆形,x坐标屏幕...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 357,345
精华内容 142,938
关键字:

常见的动态html效果