现在html中利用div来包裹住一张图片。

    <div class="xuanzhuan">
<img src="data:images/top.png" alt="">
</div>

然后在css中利用固定定位来将图片固定好,再利用动画的效果即可出来。

       .xuanzhuan {
position: fixed;
top: 20%;
right: 10%;
animation: haha 1s ease-in-out 0s infinite;
} @keyframes haha {
0% {
transform: scale(1);
/*开始为原始大小*/
} 25% {
transform: scale(1.1);
/*放大1.1倍*/
} 50%,
70%,
90% {
transform: scale(1.1) rotate(3deg);
} 60%,
80% {
transform: scale(1.1) rotate(-3deg);
}
}

css中图片有缩放和转动效果的更多相关文章

  1. Css中光标,DHTML,缩放的使用

    Css中光标的使用: 属性名称                属性值                                         说明cursor                 ...

  2. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  3. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  4. css中图片的四种地址引用

    URL: CSS中四种引用图片asset的方式:

  5. java基础---->Java中图片的缩放

    缩略图代表网页上或计算机中图片经压缩方式处理后的小图 ,其中通常会包含指向完整大小的图片的超链接.缩略图用于在 Web 浏览器中更加迅速地装入图形或图片较多的网页.今天,我们就开始java中图像的缩略 ...

  6. css中图片等比例缩放

    li img{ display: inline-block; max-height: 60px; max-width: 60px; vertical-align: middle; }

  7. mui中图片手势缩放功能的实现

    MUI框架,要实现手势缩放图片,可以使用imageviewer组件来实现.代码很简单: 引入css: <link href="assets/css/mui.imageviewer.cs ...

  8. css中的视距perspective和视差效果

    概述 之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果.今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用. 3D翻转 3D翻转效果其实非常简单,其实就是perspec ...

  9. CSS背景图片垂直居中center不起效果完美解决

    背景图片居中CSS如下 background:#4892fe url("<%=basePath%>/img/login_bg.jpg") no-repeat cente ...

随机推荐

  1. 原生Ajax( XHR 和 Fetch )

    原生Ajax 基本使用的四大步骤,简单易懂 ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页.接下来通过本文给大家介绍Ajax的使用四大步骤,非常不错,感兴趣的 ...

  2. php编译安装phalcon框架 - centos

    使用官方的文档安装方式会报错,进行了一些实验,终于安装成功! 安装phalcon前提是需要安装php的pdo,如果使用mysql 需要安装 pdo_mysql 先看下git的版本号git --vers ...

  3. readUTF()和writeUTF()

    readUTF()和writeUTF() 这是dataOutputStream 的方法~~使用utf-8编码 其实就是从unicode变过来的,utf8编码把unicode的ASCII编码变成1个字节 ...

  4. FastJson乱序问题

    1.初始化为有序json对象 JSONObject jsonOrdered= new JSONObject(true); 2.将String对象转换过程中,不要调整顺序 JSONObject json ...

  5. explain分析sql语句执行效率

    Explain命令在解决数据库性能上是第一推荐使用命令,大部分的性能问题可以通过此命令来简单的解决,Explain可以用来查看SQL语句的执行效 果,可以帮助选择更好的索引和优化查询语句,写出更好的优 ...

  6. php连接mysql遇到的问题: (HY000/1130) 和 [caching_sha2_password]

    说明一下我的mysql是安装在虚拟机上的 所以遇到的第一个问题就是访问问题 解决: update user set host = '%' where user = 'root'; 重启mysql服务 ...

  7. Vuex篇

    [Vuex篇] vuex源码你学会了吗? 我来免费教你!~ 1.vuex是什么?  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的 ...

  8. Warshall算法和Floyd算法

    不用说这两位都是冷门算法……毕竟O(n^3)的时间复杂度算法在算法竞赛里基本算是被淘汰了……而且也没有在这个算法上继续衍生出其他的算法… 有兴趣的话:click here.. 话说学离散的时候曾经有个 ...

  9. Mybatis_环境搭建

    1.配置pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  10. 网络编程之 OSI七层协议

    内容目录: 1.软件开发架构 2.OSI七层协议 3.每层协议介绍 1.软件开发架构 c/s架构: c:客户端 s:服务端 b/s架构: b:浏览器 s:服务器 本质:b/s其实也是c/s 2.OSI ...