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个三角形组成的。将自己不需要的边影藏。

css3特效

标签：

原文地址：http://www.cnblogs.com/huangxiaoxiao/p/4660067.html