先给大家推荐animate.css库,里面有一些效果很不错的过度样式,不想自己写的也可以直接安装这个库来使用,如果不想安装这个库也可以去https://daneden.github.io/animate.css/挑选自己喜欢的样式之后F12复制相应的样式代码或者该网站里面也有源码可以复制。这个库的安装及用法直接百度结果有很多。

样式一:效果如下

<div class="ballon"></div>
/*css部分*/
@keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0%{
transform: scale(1); /*开始为原始大小*/
}
25%{
transform: scale(1.1); /*放大1.1倍*/
}
50%{
transform: scale(1);
}
75%{
transform: scale(1.1);
}
}
.ballon{
width: 150px;
height: 200px;
background: url("images/balloon.png");
background-size: 150px 200px;
-webkit-animation-name: scaleDraw; /*关键帧名称*/
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-webkit-animation-iteration-count: infinite; /*动画播放的次数*/
-webkit-animation-duration: 5s; /*动画所花费的时间*/
}

上面的几个属性也可以合在一起写

-webkit-animation: scaleDraw 5s ease-in-out infinite;

样式二:效果如下

实质就是就是利用了动画的延迟属性,两层圆的动画相关的属性基本相同,除了最外层的圆多设置了animation-delay属性

 <div class="live">
<img src="data:images/live.png" alt="">
<span></span>
<span></span>
</div>
.live{
position: relative;
width: 100px;
height: 100px;
}
.live img{
width: 100px;
height: 100px;
z-index:;
}
@keyframes living {
0%{
transform: scale(1);
opacity: 0.5;
}
50%{
transform: scale(1.5);
opacity:; /*圆形放大的同时,透明度逐渐减小为0*/
}
100%{
transform: scale(1);
opacity: 0.5;
}
}
.live span{
position: absolute;
width: 100px;
height: 100px;
left:;
bottom:;
background: #fff;
border-radius: 50%;
-webkit-animation: living 3s linear infinite;
z-index: -1;
}
.live span:nth-child(2){
-webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/
}

样式三:效果如下

思路:将第二张图片用绝对定位叠加在第一张图片上,通过在动画函数里设置透明度来控制图片的显示隐藏

   <div class="pics">
<img src="data:images/avatar1.png" alt="" class="pic1">
<img src="data:images/avatar2.png" alt="" class="pic2">
</div>
.pics{
position: relative;
width: 400px;
height: 400px;
}
.pic1{
width: 400px;
height: 400px;
}
@keyframes picDraw {
0%{
opacity:;
}
50%{
opacity:;
}
100%{
opacity:;
}
}
.pic2{
position: absolute;
width: 400px;
height: 400px;
left:;
top:;
-webkit-animation: picDraw 5s ease-in-out infinite;
}

原文链接:https://blog.csdn.net/yujin0213/article/details/79262825

css----动画(图片无限放大缩小)的更多相关文章

  1. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  2. jquery 实现点击图片居住放大缩小

    该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) /*! jQuery ...

  3. Android 本地/网路下载图片实现放大缩小

     Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...

  4. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  5. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  6. Android DIY之路 (一) 指定区域多图片合成 放大 缩小 镜像 旋转 等(转)

    惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...

  7. Java界面程序实现图片的放大缩小

    Java界面程序实现图片的放大缩小.这个程序简单地实现了图片的打开.保存.放大一倍.缩小一倍和固定缩放尺寸,但是并没有过多的涵盖对图片的细节处理,只是简单地实现了图片大小的放缩. 思维导图如下: 效果 ...

  8. Android 图片的放大缩小拖拉

    package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

  9. [jQuery]地图浏览:如何实现图片的放大缩小和点击之后的位置居中

    HTML代码: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis. ...

随机推荐

  1. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  2. 七:flask-一些小细节

    1.在局域网中,让其他电脑访问我的网站:host参数 如果设置为0.0.0.0,则在局域网中,输入当前项目所在的ip+端口就可以访问这个项目如果host设置为固定的ip,如host=‘'192.168 ...

  3. 【java】的传值方式

    [java]的传值方式 当你问大多数程序员Java是传值还是传引用的时候,你可能会得到两种答案之一: (1)Java传递原始类型数据时使用的是传值方式:传递对象时则使用传引用方式:String类型的数 ...

  4. 【MM系列】SAP 各种冲销凭证

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 各种冲销凭证   前言部分 ...

  5. Scratch少儿编程系列:(七)太阳系八大行星的运转

    一.程序说明 本程序用来模拟太阳系八大行星的运转过程. 二.程序流程图 为了更直观的描述上述过程,采用流程图的方式将猜数字的过程进行描述. 还在制作中... 三.制作过程 1. 场景和角色的选择 场景 ...

  6. 简述Vue的实例属性、实例方法

    1.实例属性 组件树访问 $parent -----> 用来访问当前组件实例的父实例: $root -----> 用来访问当前组件树的根实例,如果当前组件没有父实例,则$root表示当前组 ...

  7. 深入理解Linux-hostname

    当我觉得对Linux系统下修改hostname已经非常熟悉的时候,今天碰到了几个个问题,这几个问题给我好好上了一课,很多知识点,当你觉得你已经掌握的时候,其实你了解的还只是皮毛.技术活,切勿浅尝则止! ...

  8. 多线程13-CountdownEvent

        );         ));             ));             t1.Start();             t2.Start();             _coun ...

  9. [DS+Algo] 009 树的介绍

    目录 1. 树的概念 2. 树的术语 3. 树的种类 4. 常见应用场景 5. 二叉树 1. 树的概念 每个结点(节点)有 0 个或多个子结点 没有父结点的结点称为根结点 每一个非根结点有且只有一个父 ...

  10. SQL查询结果列拼接成逗号分隔的字符串:group_concat

    转自:SQL查询结果列拼接成逗号分隔的字符串 背景:做SQL查询时会经常需要,把查询的结果拼接成一个字符串. 解决方法: 通过 group_concat 函数 拼接的结果很长,导致拼接结果显示不全,可 ...