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{
    width:100%;
    max-width: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;  
            width: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;  
            width: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-

转载于:https://www.cnblogs.com/addi/p/7137397.html

前端特效（css3）相关推荐

  1. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...

  2. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个复古手机键盘（带声音）的动画效果~~适合初学者~超简单~

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...

  3. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYP ...

  4. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!D ...

  5. 【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTY ...

  6. html烟花特效案例,HTML5前端特效库 css3 按钮粒子烟花特效源码

    HTML5前端特效库 css3 按钮粒子烟花特效源码 效果图 各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 有想要文件版源码的可以 在我 ...

  7. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个影子~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个影子特效~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...

  8. 【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCT ...

  9. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: < ...

  10. 【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...

最新文章

  1. “国家使命”图书第一批权威发布
  2. Chrome 控制台不完全指南
  3. ffplay.c学习-6-⾳视频同步基础
  4. 重磅发布！36氪中国新基建之王「大数据领域」TOP50企业揭晓
  5. CSS定位和浮动（吸顶、居中）
  6. 移动App的原型创建工具
  7. 一加6体验深度测评：一款性价比极高的旗舰
  8. ActiveMQ-1 安装以及WebUI的配置
  9. java编程用什么文本编辑器_编程必备，程序员应该都知道的7款文本编辑器
  10. 最新《圣思园JavaSE实地培训系列教程》
  11. eclipse SWT 中实现工程图标最小化到托盘，并只能右键托盘图标选择关闭
  12. 用Python写了一个图像文字识别OCR工具
  13. 张铁柱-前端实现《低代码可视化编辑器》(一)思路整理 React-dnd+Ts
  14. Android 时光轴 -记录生活
  15. The last packet sent successfully to the server was 0 milliseconds ago 解决
  16. 更新升级windows11提示“该电脑必须支持安全启动
  17. CDH6中的各种目录
  18. [QNX 自适应分区用户指南]12 APS开发实践
  19. 大数据行业前景如何?
  20. 适配 iphone 微信h5页面

热门文章

  1. 西门子step7安装注册表删除_不用重装系统就能完全卸载西门子PLC编程软件STEP 7...
  2. CV进阶 -- 目标检测原理及代码实现、YOLO源码解读学习
  3. linux ls -l 日期乱码,请教-关于ls-l的日期显示问题
  4. 使用post访问不到接口_Postman调试依赖登录接口的3种方法
  5. 施乐7556_富士施乐Fuji Xerox WorkCentre 7556 驱动
  6. Extjs4操作TreeStore处理proxyAjax获取的数据
  7. 如何对西数硬盘固件进行逆向分析（下）
  8. CentOS7 编译安装LNMP
  9. winform制作简单计算器
  10. vc有关 directx组态，和dxsdk_extras（directshow)