css中图片有缩放和转动效果
现在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中图片有缩放和转动效果的更多相关文章
- Css中光标,DHTML,缩放的使用
Css中光标的使用: 属性名称 属性值 说明cursor ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- css中图片的四种地址引用
URL: CSS中四种引用图片asset的方式:
- java基础---->Java中图片的缩放
缩略图代表网页上或计算机中图片经压缩方式处理后的小图 ,其中通常会包含指向完整大小的图片的超链接.缩略图用于在 Web 浏览器中更加迅速地装入图形或图片较多的网页.今天,我们就开始java中图像的缩略 ...
- css中图片等比例缩放
li img{ display: inline-block; max-height: 60px; max-width: 60px; vertical-align: middle; }
- mui中图片手势缩放功能的实现
MUI框架,要实现手势缩放图片,可以使用imageviewer组件来实现.代码很简单: 引入css: <link href="assets/css/mui.imageviewer.cs ...
- css中的视距perspective和视差效果
概述 之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果.今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用. 3D翻转 3D翻转效果其实非常简单,其实就是perspec ...
- CSS背景图片垂直居中center不起效果完美解决
背景图片居中CSS如下 background:#4892fe url("<%=basePath%>/img/login_bg.jpg") no-repeat cente ...
随机推荐
- 执行 systemctl start firewalld 命令后出现Failed to start firewalld.service: Unit is masked
firewalld服务被锁定,不能添加对应端口 执行命令,即可实现取消服务的锁定 # systemctl unmask firewalld 下次需要锁定该服务时执行 # systemctl mask ...
- 51nod 1149 Pi的递推式(组合数学)
传送门 解题思路 首先因为\(Pi\)不是整数,所以不能直接递推.这时我们要思考这个式子的实际意义,其实\(f(i)\)就可以看做从\(i\)这个点,每次可以向右走\(Pi\)步或\(1\)步,走到[ ...
- AcWing 156. 矩阵 (哈希二维转一维查询)打卡
给定一个M行N列的01矩阵(只包含数字0或1的矩阵),再执行Q次询问,每次询问给出一个A行B列的01矩阵,求该矩阵是否在原矩阵中出现过. 输入格式 第一行四个整数M,N,A,B. 接下来一个M行N列的 ...
- maven学习整理-基础知识
1.maven认识 maven是一种自动化的构建工具,它主要解决的问题有: ①项目中的划分规则:原先我们用package或文件夹的形式来划分不同模块,导致在一个项目中存在大量的文件夹和包代码显得庞大: ...
- 2019杭电多校第三场hdu6608 Fansblog(威尔逊定理)
Fansblog 题目传送门 解题思路 Q! % P = (P-1)!/(P-1)...(Q-1) % P. 因为P是质数,根据威尔逊定理,(P-1)!%P=P-1.所以答案就是(P-1)((P-1) ...
- C# Winform DotNetBar控件之StyleManager
这个控件作用改变窗体样式 使用方法 拖拽一个styleManager到窗体 改变它的managerStyle,再把窗体的继承改成Office2007Form 最后一步窗体初始化控件前 改掉的Enabl ...
- 利用left join 筛选B表中不包含A表记录
select A.key from A LEFT JOIN B ON A.KEY=B.KEY WHERE B.FIELD IS NULL;
- 普通浏览器实现点击打开微信app
给予点击事件,然后调用以下方法即可(我这用的是jq的点击): $(function() { Cz.Alert().success({text: '请返回公众号查看充值结果'}); $(".a ...
- Ubuntu Server 19配置静态IP
这个/etc/netplan下默认有个文件50-cloud-init.yaml,直接修改它就行了 sudo vim /etc/netplan/50-cloud-init.yaml 网口名字ens33可 ...
- Mybatis3中@SelectProvider传递参数
一.通常情况下我们使用实体类或者vo类来传递参数,这样可以在provider中直接使用#{param}来获取参数 二.在mybatis3.3以下版本只能传递一个参数,所以如果要传递多个参数必须封装成M ...