现在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. 执行 systemctl start firewalld 命令后出现Failed to start firewalld.service: Unit is masked

    firewalld服务被锁定,不能添加对应端口 执行命令,即可实现取消服务的锁定 # systemctl unmask firewalld 下次需要锁定该服务时执行 # systemctl mask ...

  2. 51nod 1149 Pi的递推式(组合数学)

    传送门 解题思路 首先因为\(Pi\)不是整数,所以不能直接递推.这时我们要思考这个式子的实际意义,其实\(f(i)\)就可以看做从\(i\)这个点,每次可以向右走\(Pi\)步或\(1\)步,走到[ ...

  3. AcWing 156. 矩阵 (哈希二维转一维查询)打卡

    给定一个M行N列的01矩阵(只包含数字0或1的矩阵),再执行Q次询问,每次询问给出一个A行B列的01矩阵,求该矩阵是否在原矩阵中出现过. 输入格式 第一行四个整数M,N,A,B. 接下来一个M行N列的 ...

  4. maven学习整理-基础知识

    1.maven认识 maven是一种自动化的构建工具,它主要解决的问题有: ①项目中的划分规则:原先我们用package或文件夹的形式来划分不同模块,导致在一个项目中存在大量的文件夹和包代码显得庞大: ...

  5. 2019杭电多校第三场hdu6608 Fansblog(威尔逊定理)

    Fansblog 题目传送门 解题思路 Q! % P = (P-1)!/(P-1)...(Q-1) % P. 因为P是质数,根据威尔逊定理,(P-1)!%P=P-1.所以答案就是(P-1)((P-1) ...

  6. C# Winform DotNetBar控件之StyleManager

    这个控件作用改变窗体样式 使用方法 拖拽一个styleManager到窗体 改变它的managerStyle,再把窗体的继承改成Office2007Form 最后一步窗体初始化控件前 改掉的Enabl ...

  7. 利用left join 筛选B表中不包含A表记录

    select A.key from A LEFT JOIN B ON A.KEY=B.KEY WHERE B.FIELD IS NULL;

  8. 普通浏览器实现点击打开微信app

    给予点击事件,然后调用以下方法即可(我这用的是jq的点击): $(function() { Cz.Alert().success({text: '请返回公众号查看充值结果'}); $(".a ...

  9. Ubuntu Server 19配置静态IP

    这个/etc/netplan下默认有个文件50-cloud-init.yaml,直接修改它就行了 sudo vim /etc/netplan/50-cloud-init.yaml 网口名字ens33可 ...

  10. Mybatis3中@SelectProvider传递参数

    一.通常情况下我们使用实体类或者vo类来传递参数,这样可以在provider中直接使用#{param}来获取参数 二.在mybatis3.3以下版本只能传递一个参数,所以如果要传递多个参数必须封装成M ...