精致动画特效及源代码

css简介

CSS 主要用于控制网页的外观，CSS 代码可以随意变化网页的布局和网页的内容样式。当 CSS3 出现以后，更是可以让网页增添了不少动画元素，随着IE6,7的淘汰，手机端的崛起更是让它成熟了许多。CSS3 动画简洁方便，高端大气，让网页变得易于交互且生动有趣。下面给大家准备了几个特效源码

代码部分

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body{background-color: #171717}
    .box {
        width: 1168px;
        height: 519px;
        background: red;
        margin: 50px auto;
    }

    .item {
        width: 119px;
        height: 519px;
        float: left;
    }

    .item:nth-child(1) {
        background: url("images/feature-1.png") no-repeat 100% 100%;
        /*background-size: 100% 100%; 背景图尺寸 */


    }

    .item:nth-child(2) {
        background: url("images/feature-2.png")  no-repeat 100% 100%;
    }

    .item:nth-child(3) {
        background: url("images/feature-3.png")  no-repeat 100% 100%;
    }

    .item:nth-child(4) {
        background: url("images/feature-4.png")  no-repeat 100% 100%;
    }

    .item:nth-child(5) {
        background: url("images/feature-5.png")  no-repeat 100% 100%;
    }

    .big {
        width: 692px;
    }

    .big img {
        display: none;
        height: 519px;
    }

</style>
<div class="box">
    <div class="item big"><img src="images/01.png" alt=""></div>
    <div class="item"><img src="images/02.png" alt=""></div>
    <div class="item"><img src="images/03.png" alt=""></div>
    <div class="item"><img src="images/04.png" alt=""></div>
    <div class="item"><img src="images/05.png" alt=""></div>
</div>


<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">
    $(function () {
        $(".item").mouseenter(function () {
            $(this).addClass("big").siblings().removeClass("big");
        });
    });
</script>

源码地址

下载源码

纯css3云彩动画效果

纯 CSS3 实现的云彩动画飘动效果

css3放大镜动画效果

jquery.smoothproducts.js​ 插件，直接支持在原始图片位置上放大图片

jQuery游戏图片手风琴收缩切换特效

一款古典风格的jQuery鼠标悬停游戏图片手风琴收缩切换特效，设置标题图片和大图手风琴焦点图切换展示效果。

js百叶窗图片3D旋转切换特效

原生js制作的百叶窗图片3D旋转切换特效，一款非常酷炫的网站焦点图banner轮播效果。

纯CSS3制作飞舞的火箭动画

不断飞舞的火箭效果

简单易用的纯CSS3图片墙效果

不规则排列，带有阴影倒影效果

一个简单好看的纯CSS3翻书效果

蛮精致的一款纯 CSS3 模拟书本翻页效果

一款简单漂亮的CSS3图片悬停遮罩效果

当鼠标悬停在图片上，会从右上角一个沿着逆时针方向旋转过来的动画效果

纯css3实现鼠标移入div图片后按钮飞入动画效果

当鼠标移入到图片上的时候，其中的按钮保持水平居中显示 各种常见的动画效果都在里面

hover特效

结合hover.js 写出的各种特效 提升用户的体验