现在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. URAL 1996. Cipher Message 3(KMP+fft)

    传送门 解题思路 因为要完全匹配,所以前七位必须保证相同,那么就可以把前7位提出来做一遍\(kmp\)匹配,最后的答案一定在这些位置里.考虑最后一位,可以把最后一位单独取出来,要计算的是最后一位相同的 ...

  2. AcWing 157. 树形地铁系统 (hash判断树同构)打卡

    一些主要城市拥有树形的地铁系统,即在任何一对车站之间,有且只有一种方式可以乘坐地铁. 此外,这些城市大多数都有一个中央车站. 想象一下,你是一名在拥有树形地铁系统的城市游玩的游客,你想探索该城市完整的 ...

  3. centos7下命令行配置nginx

    本教程中的步骤要求用户拥有root权限 第一步 - 添加Nginx存储库要添加CentOS 7 EPEL仓库,请打开终端并使用以下命令: sudo yum install epel-release第二 ...

  4. Go语言中接口组合的实现方法

    在Go语言中,可以在接口A中组合其它的一个或多个接口(如接口B.C),这种方式等价于在接口A中添加接口B.C中声明的方法. 代码如下: //接口中可以组合其它接口,这种方式等效于在接口中添加其它接口的 ...

  5. systemctl命令配置系统服务

    1.systemd的配置文件目录 systemd将daemon执行的脚本视作服务单位(unit),服务依据功能区分时,分为不同的类型(type). 常见的systemd服务类型如下表: 后缀名称    ...

  6. Vue 学习笔记之 —— 组件(踩了个坑)

    最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...

  7. 最小生成树--Prim及Kruskal

    //prim算法#include<cstdio> #include<cmath> #include<cstring> #include<iostream> ...

  8. 牛客网多校训练第四场C sequence

    (牛客场场有笛卡尔树,场场都不会用笛卡尔树...自闭,补题心得) 题目链接:https://ac.nowcoder.com/acm/contest/884/C 题意:给出两个序列a,b,求max{mi ...

  9. USACO2007 The Bale Tower /// DFS oj21160

    题目大意: 给出N个捆包,每个捆包有相应的长度和宽度,要求堆叠捆包,使下方的捆包长宽永远大于上方的捆包的长宽. Input Multiple test case. For each case: * L ...

  10. 怎样在Cocos2d-x中使用Lua脚本

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u013321328/article/details/25699545 笔者使用的是Cocos2d-x ...