css心跳动画
1、图片无限放大缩小,类似心跳
css如下
@keyframes scaleDraw { /*定义关键帧、scaleDrew关键帧名称*/
0%{
transform: scale(1); /*开始为原始大小*/
}
25%{
transform: scale(1.6); /*放大1.1倍*/
}
50%{
transform: scale(1);
}
75%{
transform: scale(1.6);
}
}
元素css中写上
-webkit-animation: scaleDraw 5s ease-in-out infinite;
2、元素或者图片,类似波纹扩散动画无限循环
html部分
<div class="parent">
<img src="...." alt="">
<span></span>
<span></span>
</div>
css部分
.parent{
position: relative;
width: 200px;
height: 200px;
}
.parent img{
width: 200px;
height: 200px;
z-index:;
}
@keyframes biging{
0%{
transform: scale(1);
opacity: 0.5;
}
50%{
transform: scale(1.5);
opacity:; /*圆形放大的同时,透明度逐渐减小为0*/
}
100%{
transform: scale(1);
opacity: 0.5;
}
}
.parent span{
position: absolute;
width: 100px;
height: 100px;
left:;
bottom:;
background: #fff;
border-radius: 50%;
-webkit-animation: biging 3s linear infinite;
z-index: -1;
}
.parent span:nth-child(2){
-webkit-animation-delay: 2s; /*第二个span动画需要延迟2秒*/
}
3、制作动画相册
重叠的图片控制一张的透明度的无限循环变化
@keyframes picOpacit{
0%{
opacity:;
}
50%{
opacity:;
}
100%{
opacity:;
}
}
.pic2{
position: absolute;
width: 100px;
height: 100px;
left:;
top:;
-webkit-animation: picOpacity 3s ease-in-out infinite;
}
4、加载的旋转动画
/*加载中动画*/
@keyframes rotate{
0%{
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari ºÍ Chrome */
-o-transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari ºÍ Chrome */
-o-transform:rotate(360deg);
}
} .notLoad img{
position: relative;
top: .05rem;
margin-right: 3px;
width: .32rem;
height: .32rem;
-webkit-animation: rotate 2s ease-in-out infinite;
}
css心跳动画的更多相关文章
- 第四十二课:基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- Effeckt.css项目:CSS交互动画应用集锦
目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...
- Android 心跳动画
直接上代码 MainActivity public class MainActivity extends AppCompatActivity { private ImageView ivHart; ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- CSS波纹动画
波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...
- css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发外层hover,要用外层position 定义绝对定位,内层的hover跳出外层的div,这样视觉上就是两个单独的div,进行内外层联动。
css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...
- CSS变形动画
CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...
- CSS帧动画
CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...
随机推荐
- POJ2411(SummerTrainingDay02-I 状态压缩dp)
Mondriaan's Dream Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 17187 Accepted: 991 ...
- Code Signal_练习题_extractEachKth
Given array of integers, remove each kth element from it. Example For inputArray = [1, 2, 3, 4, 5, 6 ...
- JS笔记--------预编译,闭包和作用域
(一)JS预编译四部曲: 1,创建AO对象. 2,找形参和变量声明,将变量和新参名作为AO属性名,值为undefined. 3,将实参值和形参值统一. 4,在函数体里找函数声明,值赋给函数体. (二) ...
- ES6——TDZ(暂时性死区)
暂时性的死区(Temporal Dead Zone),简写为 TDZ: 只要块级作用域里存在let命令,它所声明的变量就绑定这个区域,不在受外部的影响 let 和 const 声明的变量不会被提升到作 ...
- Android 监听 WiFi 开关状态
Android 监听 WiFi 开关状态 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/70854309 本文出自[赵彦军的博客] ...
- vs2017安装cuda9.0编译默认示例失败解决方法
https://devtalk.nvidia.com/default/topic/1027209/cuda-setup-and-installation/cuda-9-0-does-not-work- ...
- MySQL常用查询语句积累
>>MySQL某列插入递增值 SET @i := 100; UPDATE auge_item_classification SET c_code=(@i:=(@i+1)); >> ...
- Java -- Web前端面试题及答案(需更深入了解)
Web前端方面 1.CSS引入的方式有哪些? 1)外联:<link>标签 2)内联:<style>标签 3)元素内嵌:元素的style属性 2.CSS选择符有哪些? 标签选择符 ...
- C# 字符串的操作
var tStr = "0|1:开门|2:关门|3:门检失败|4:开门|5:开门|6:关门"; ).Split(], s.Split(]).Replace(").Repl ...
- jetty和tomcat比较
两点,性能极佳,配置简单方便. 主要是设计思想的不同.Tomcat 主要是作为 JSP/Servlet 最新规范的参考实现而设计,属于学院派,但是显得庞大而杂乱.Tomcat 的性能很差,一般是作为 ...