zoukankan      html  css  js  c++  java
  • css3特效

    1、css3制作无缝滚动

    背景图片向左移动,改变背景图片的位置。
    代码如下:
    
    /*=====无缝滚动=====*/
    @keyframes bgRun{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: -960px 0;
        }
    }
    @-webkit-keyframes bgRun{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: -960px 0;
        }
    }
    /* Firefox */
    @-moz-keyframes bgRun
    {
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: -960px 0;
        }
    }
    @-o-keyframes bgRun{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: -960px 0;
        }
    }
    
    将其放置与需要添加的动画中:
    .ready_bg{
        height: 77px;
        background: url("image/beginbg.png");
        margin: 120px auto 0;
        position: relative;
        background-position: 0 0;
        animation: bgRun 10s linear 0s infinite;
        -moz-animation: bgRun 10s linear 0s  infinite; /*Firefox*/
        -webkit-animation: bgRun 10s linear 0s  infinite;   /* Safari 和 Chrome*/
        -o-animation: bgRun 10s linear 0s infinite;
    }
    
    2、使用标签制作三角形
        代码:
        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid #D0D4C6;
    
        原理就是用矩形的边框做三角形的心,可以看做矩形是由4个三角形组成的。将自己不需要的边影藏。
  • 相关阅读:
    Vue单向数据流
    npm常用命令
    vue自定义指令
    slot的用法(Vue插槽)
    js闭包
    canvas 给画的多边形着色
    canvas画线
    canvas初体验
    canvas
    json
  • 原文地址:https://www.cnblogs.com/huangxiaoxiao/p/4660067.html
Copyright © 2011-2022 走看看