zoukankan      html  css  js  c++  java
  • 前端特效(css3)

    1、点击图片变大特效 代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <style type="text/css">
    .t1{
        100%;
        max-440px;
        height:250px;
        cursor: pointer; /*食指图标*/
        transition: all 0.6s;  
        }
    .t1:hover{
         transform: scale(1.2);
        }


    </style>
    <body>
        <div>
            <img class=" img-responsive t1" src="img/Cementing Manifolds.png" />
        </div>
    </body>

    2、图片旋转特效 代码如下:

    <!DOCTYPE html>  
    <html>  
    <head lang="en">  
        <meta charset="UTF-8">  
        <title></title>  
        <style>  
            div,img,body{  
                margin: 0;  
                padding: 0;  
            }  
            .box{  
                height: 150px;  
                300px;  
                margin: 0 auto;
                border:2px solid red;
                padding: 20px;  
            }  
            .box:hover img{  
                transform: rotate(45deg); /* css3技术 */
                -webkit-transform: rotate(45deg);  
                -moz-transform: rotate(45deg);  
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
            }  
            img{  
                margin: 0 auto;  
                display: block;  
                transition: all 0.6s ease-in-out;  
                -webkit-transition:0.6s ease-in-out;  
                -moz-transition: all 0.6s ease-in-out;  
                -o-transition: all 0.6s ease-in-out;
                height: 150px;  
                300px;
            }  
        </style>  
    </head>  
    <body>  
        <div class="box">  
            <img src="img/aa.jpg" alt=""/>  
        </div>  
    </body>  
    </html>

    总结:cursor: pointer; 表示食指图标;transform css3特效   可查看http://www.w3school.com.cn/css3/css3_3dtransform.asp 可实现2D旋转和3D旋转

    Chrome 25 以及更早的版本,需要前缀 -webkit-

  • 相关阅读:
    matplotlib formatters
    matplotlib locators
    mysql> 12 simple but staple commands
    mysql--> find your databases' local position
    ubuntu16.04安装caffe常见问题及其解决方案
    gitlab使用说明
    vim配置摘要
    shell 提示符个性化设置
    python拼接参数不确定的SQL时防注入问题--条件语句最后拼入
    python_opencv ——图片预处里(二)
  • 原文地址:https://www.cnblogs.com/addi/p/7137397.html
Copyright © 2011-2022 走看看