<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            /*格式化,居中,内边框为零*/
            *{
                margin: 0px auto;
                padding: 0px;
            }
            /*格式清除*/
            .clear{
                clear: both;
            }
            #wai{
                width: 1200px;
                height: 600px;
                border: 1px solid transparent;
            }
            
            #lajin{
                width:300px;
                height: 260px;
                border: 1px solid transparent;
                float: left;
                margin-left: 90px;
                margin-top: 20px;
                overflow: hidden;
            }
            /*过渡时间*/
            #lajin img{
                transition: 2s;
            }
            /*鼠标经过时的放大缩小*/
            #lajin img:hover{
                transform: scale(1.5,1.5);
            }
            #twod{
                width:300px;
                height: 260px;
                border: 1px solid transparent;
                float: left;
                margin-left: 60px;
                margin-top: 20px;
                background-image: url(img/qy2.jpg);
                background-size: 100% 100%;
                /*过渡所需的时间*/
                transition: 2s;
            }
            /*鼠标经过时的2D旋转180度*/
            #twod:hover{
                transform: rotate(180deg);
            }
            #threed{
                width:300px;
                height: 260px;
                border: 1px solid transparent;
                float: left;
                margin-left: 60px;
                margin-top: 20px;
                background-image: url(img/qy3.jpg);
                background-size: 100% 100%;
                transition: 2s;
            }
            /*鼠标经过时的沿Y旋转180度*/
            #threed:hover{
                transform: rotateY(180deg);
            }
            #yinyingyuanjiao{
                width:300px;
                height: 260px;
                border: 1px solid transparent;
                float: left;
                margin-left: 90px;
                margin-top: 20px;
                background-image: url(img/qy4.jpg);
                background-size: 100% 100%;
                transition: 2s;
            }
            /*鼠标经过时的变圆角
             阴影*/
            #yinyingyuanjiao:hover{
                border-radius: 5px;
                box-shadow: -10px 10px 5px slategray;
            }
            #lvjing{
                width:300px;
                height: 260px;
                border: 1px solid transparent;
                float: left;
                margin-left: 60px;
                margin-top: 20px;
            }
            #lvjing img{
                width: 100%;
                height: 100%;
                transition: 2s;
            }
            /*鼠标经过时添加滤镜*/
            #lvjing img:hover{
                filter: hue-rotate(180deg);
            }
            #huanbeijing{
                width:300px;
                height: 260px;
                border: 1px solid transparent;
                float: left;
                margin-left: 60px;
                margin-top: 20px;
                background-image: url(img/qy1.jpg);
                background-size: 100% 100%;
                transition: 2s;
            }
            /*鼠标经过时的更换背景*/
            #huanbeijing:hover{
                background-image: url(img/qy6.jpg);
                background-size: 100% 100%;
            }
            #lvjing1{
                width:300px;
                height: 260px;
                border: 1px solid transparent;
                float: left;
                margin-left: 60px;
                margin-top: 20px;
            }
            #lvjing1 img{
                width: 100%;
                height: 100%;
                transition: 2s;
            }
            /*鼠标经过时添加滤镜*/
            #lvjing1 img:hover{
                filter: grayscale(100%);
            }
            #lvjing2{
                width:300px;
                height: 260px;
                border: 1px solid transparent;
                float: left;
                margin-left: 60px;
                margin-top: 20px;
                background-image: url(img/qy3.jpg);
                background-size: 100% 100%;
                transition: 5s;
            }
            #lvjing2:hover{
                background-image: url();
                background-color: black;
            }
        </style>
    </head>
    <body>
        <div id="wai">
            <div id="lajin">
                <img src="img/wangzuxian.jpeg" width="300px" height="260px"/>
            </div>
            <div id="twod"></div>
            <div id="threed"></div>
            <div class="clear"></div>
            <div id="yinyingyuanjiao"></div>
            <div id="lvjing">
                <img src="img/qy5.jpg"/>
            </div>
            <div id="huanbeijing"></div>
        </div>
        <div id="lvjing1">
            <img src="img/qy5.jpg"/>
        </div>
        <div id="lvjing2">
            
        </div>
    </body>
</html>

css变化代码2的更多相关文章

  1. css变化代码

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  2. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  3. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  4. css初始化代码

    最近老有新项目开发,一直在找存留的CSS初始化代码,索性放到这里备份下, @charset "utf-8"; /* -------------------------------- ...

  5. 网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码

    下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大 ...

  6. CSS透明代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...

  7. 各大门户网站的css初始化代码

    腾讯QQ官网 css样式初始 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select ...

  8. CSS颜色代码 颜色值 颜色名字大全(转载)

    CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...

  9. CSS颜色代码大全

    CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...

随机推荐

  1. 【Luogu3807】【模板】卢卡斯定理（数论）

    题目描述 给定\(n,m,p(1≤n,m,p≤10^5)\) 求 \(C_{n+m}^m mod p\) 保证\(P\)为\(prime\) \(C\)表示组合数. 一个测试点内包含多组数据. 输入输 ...

  2. [ZOJ3435]Ideal Puzzle Bobble

    题面戳我 题意:你现在处于\((1,1,1)\),问可以看见多少个第一卦限的整点. 第一卦限:就是\((x,y,z)\)中\(x,y,z\)均为正 sol 首先L--,W--,H--,然后答案就变成了 ...

  3. webpack3中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

    1.在webpack中需要处理css必须先安装如下两个loader npm install --save-dev css-loader style-loader 2.要处理sass和添加浏览器前缀需要 ...

  4. Delphi的RzDbgrid改变某行的背景色

    本想改变符合条件的行的背景色,试了DbgridEh和原生的Dbgrid直接在DrawColumnCell事件中写重绘代码就好了,But在RzDbgrid就不起效果,查了好一会,百度了一大堆,都是千篇一 ...

  5. JavaScript中的私有成员[翻译]

    原作者:Douglas Crockford,原文地址:http://www.crockford.com/javascript/private.html JavaScript 是世界上被误解最深的编程语 ...

  6. html2canvas不能识别svg的解决方案

    最新有个功能需要截取网页成图片,于是用到比较流行的html2canvas,本来以为能顺顺利利的搞定,后来发现网页上的流程图连接线不在截图中.于是各种百度.bing,也搜到好多,但是感觉没有一个完整的代 ...

  7. UWP 调用系统拍照程序

    当需要用户选择照片时,一般有两种方法: 1.从本地磁盘选择 2.调用照相机拍照 这次就说一下第二种方法,毕竟第一种大家都会. 先看下效果 如图所示,点击拍照后,会弹出系统照相机界面,在手机上,会打开相 ...

  8. Redis的持久化机制包括RBD和AOF两种，对于这两种持久化方式各有优势

    RDB机制的策略 RDB持久化是指在指定的时间间隔内将内存中的数据和操作通过快照的方式保存到redis bin目录下的一个默认名为 dump.rdb的文件,可以通过配置设置自动的快照持久化的方式,我们 ...

  9. Netty实现客户端和服务端通信简单例子

    Netty是建立在NIO基础之上,Netty在NIO之上又提供了更高层次的抽象. 在Netty里面,Accept连接可以使用单独的线程池去处理,读写操作又是另外的线程池来处理. Accept连接和读写 ...

  10. Java技术总结

    1.在非空判断是一定把not null 判断写前边,否则如果为空先判断size为0会报错 String str = null; if(str !=null&&str.length()& ...