首页 > > 网页制作 > css >

纯Css3手工打造网页图片效果

2018-06-24 00:55:58来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

  1. 鼠标悬停，图片360度旋转


    效果：
    代码： 
    <style>
            .rotate-demo {
                width: 220px;
                height: 220px;
                margin: 0 auto;
                background: no-repeat url("images/author.jpg") left top;
                -webkit-background-size: 220px 220px;
                -moz-background-size: 220px 220px;
                background-size: 220px 220px;
                -webkit-border-radius: 110px;
                border-radius: 110px;
                -webkit-transition: -webkit-transform 2s ease-out;
                -moz-transition: -moz-transform 2s ease-out;
                -o-transition: -o-transform 2s ease-out;
                -ms-transition: -ms-transform 2s ease-out;
            }
     
                .rotate-demo:hover {
                    -webkit-transform: rotateZ(360deg);
                    -moz-transform: rotateZ(360deg);
                    -o-transform: rotateZ(360deg);
                    -ms-transform: rotateZ(360deg);
                    transform: rotateZ(360deg);
                }
        </style>
     
    <div class="rotate-demo"></div>

    知识点：CSS3 的transform 属性可以向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。设置为rotateZ(angle) 实现DOM元素沿着 Z 轴的 3D 旋转，相关的设置还有rotate、rotate3d、rotateX、rotateY。

  2. 图片悬停放大



    效果：

    代码： 
    CSS3：
    <style type="text/css">
        .img-container {
            background-color: #000;
            width: 220px;
            height: 220px;
            margin: 20px 50px;
        }
     
        .img {
            -webkit-transform: scale(0.6);
            -moz-transform: scale(0.6);
            -o-transform: scale(0.6);
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
            -o-transition-duration: 0.5s;
        }
     
            .img img {
                padding: 1px;
                border-radius: 10px;
                border: 1px solid #fff;
            }
     
            .img:hover {
                -webkit-transform: scale(0.8);
                -webkit-box-shadow: 0px 0px 30px #ccc;
                -moz-transform: scale(0.8);
                -moz-box-shadow: 0px 0px 30px #ccc;
                -o-transform: scale(0.8);
                -o-box-shadow: 0px 0px 30px #ccc;
            }
    </style>
     
    HTML：
    <div class="img-container">
                <div class="img">
                    <img src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208151443229-2044520835.jpg">
                </div>
            </div>

    知识点： 同样用到CSS3的transform属性，设置scale(x,y)，实现DOM元素的2D缩放转换，相关的还有scale3d、scaleX、scaleY、scaleZ

  3. 实现3D图片旋转相册

    效果:

    代码: 
    CSS:
    <style>
            .carousel-container {
                margin: 20px auto;
                width: 210px;
                height: 140px;
                position: relative;
            }
     
            #carousel {
                width: 100%;
                height: 100%;
                position: absolute;
                transform-style: preserve-3d;
                animation: rotation 20s infinite linear;
            }
     
                #carousel:hover {
                    animation-play-state: paused;
                }
     
                #carousel figure {
                    display: block;
                    position: absolute;
                    width: 186px;
                    height: 116px;
                    left: 10px;
                    top: 10px;
                    background: black;
                    overflow: hidden;
                    border: solid 1px black;
                }
     
                    #carousel figure:nth-child(1) {
                        transform: rotateY(0deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(2) {
                        transform: rotateY(40deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(3) {
                        transform: rotateY(80deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(4) {
                        transform: rotateY(120deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(5) {
                        transform: rotateY(160deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(6) {
                        transform: rotateY(200deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(7) {
                        transform: rotateY(240deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(8) {
                        transform: rotateY(280deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(9) {
                        transform: rotateY(320deg) translateZ(288px);
                    }
     
                #carousel .carousel-img {
                    -webkit-filter: grayscale(1);
                    cursor: pointer;
                    transition: all .5s ease;
                    border: none;
                }
     
                    #carousel .carousel-img:hover {
                        -webkit-filter: grayscale(0);
                        transform: scale(1.2,1.2);
                    }
     
            @keyframes rotation {
                from {
                    transform: rotateY(0deg);
                }
     
                to {
                    transform: rotateY(360deg);
                }
            }
        </style>
     
    HTML:
     
    <div class="carousel-container">
            <div id="carousel">
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155254932-406125762.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155256635-1168577244.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155257354-505827798.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155258072-866130501.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155258697-1207588864.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155259244-459311473.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155300213-66837727.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155300760-2026101054.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155301322-1264968106.jpg" alt=""></figure>
            </div>
        </div>

    知识点: 还是凭借CSS3的transform属性以及animation属性，使用rotateY定义元素沿着 Y 轴的进行 3D 旋转，使用translateZ定义元素沿着Z轴进行 3D 转换；
    同时设置元素的animation属性实现动画效果，本文中定义如下：
    animation: rotation 20s infinite linear;

    animation-name（需要绑定到选择器的 keyframe 名称）：rotation的动画
    animation-duration（完成动画所花费的时间）：20s
    animation-iteration-count（动画应该播放的次数）：infinite（无限次）
    animation-timing-function(动画的速度曲线)：linear（动画从头到尾的速度是相同的）

刚开工，暂时没有任务，不想码代码，翻了翻以前下载的各种代码，整理整理，发现真的不知道自己怎么有那么多精力收集了那么多乱七八糟的东西，现在整理起来又要花费大量的时间！

感想：

u=2957405095,253685944&fm=23&gp=0

“只要我不醒来，世界就不存在”；

其实我们从来不会错过什么，遇到了是缘，没有遇到，其实相对来说ta就是没有存在过！

2017，简简单单就好！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：CSS的设计模式

下一篇：【规范】前端编码规范——css 规范

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签