CSS3实现放大缩小动画
HTML
<div>
<div style="height: 35px;width:300px;background:orangered;border-radius: 4px;" id="animat"></div>
</div>
CSS
#animat{
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
animation-direction:alternate;/*轮流反向播放动画。*/
animation-timing-function: ease-in-out; /*动画的速度曲线*/
/* Safari 和 Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-direction:alternate;/*轮流反向播放动画。*/
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
}
@keyframes mymove
{
%{
transform: scale(); /*开始为原始大小*/
}
%{
transform: scale(1.1); /*放大1.1倍*/
}
%{
transform: scale();
}
%{
transform: scale(1.1);
} } @-webkit-keyframes mymove /*Safari and Chrome*/
{
%{
transform: scale(); /*开始为原始大小*/
}
%{
transform: scale(1.1); /*放大1.1倍*/
}
%{
transform: scale();
}
%{
transform: scale(1.1);
}
}
CSS3实现放大缩小动画的更多相关文章
- keyframes 放大缩小动画
本次项目中动画放大缩小代码小结 .fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infi ...
- 一个CSS+jQuery的放大缩小动画效果
日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...
- CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- css3 放大缩小代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- svg 动画 透明度 放大缩小 x轴Y轴
参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...
- css3 animation(左右摆动) (放大缩小)
左右摆动: @-webkit-keyframes roundRule{ 0%, 100%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-tran ...
- css3 一个六边形 和 放大旋转动画DEMO演示
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...
- 用css3实现图片的放大缩小
记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...
- css3 制作平滑过度动画
-webkit-transition(属性渐变) -webkit-transition:CSS属性(none|all|属性) 持续时间 时间函数 延迟时间 CSS属性(transition-pr ...
随机推荐
- 添加安卓端的User-Agent
将系统换为Android即可 随机UA UA分析网站 Mozilla/5.0 (Windows NT 6. 4; WOW64) AppleWebKit/537. 36 (KHTML, like Gec ...
- 吴裕雄 PYTHON 神经网络——TENSORFLOW 学习率的设置
import tensorflow as tf TRAINING_STEPS = 10 LEARNING_RATE = 1 x = tf.Variable(tf.constant(5, dtype=t ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:堆叠的水平
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 显ipQQ
链接:https://pan.baidu.com/s/1l1WN4b3jT8n4e66DH8d-cg 提取码:kjm4
- faster-RCNN 加入新的Ground Truth
出于project的需要,不仅要detect和classify对象,还希望建立不同class的对象之间的关系,进行所谓的pair-matching. 需要完成以下几步: 1. dataset中labe ...
- 关于sarima模型的描述,时间序列的理论与方法(第二版)(美 布洛克威尔)有一部分比较值得看
- github日常的基本命令
git 常用命令 git clone 仓库地址 -从远端克隆项目 git pull -从远端拉取代码 git pull -p -从远端拉取代码和分支 提交代码流程: git add xxx -添加到暂 ...
- PAT T1013 Image Segmentation
krustral算法加并查集,按题给要求维护并查集~ #include<bits/stdc++.h> using namespace std; ; const int inf=1e9; i ...
- Codeforces Round #617 (Div. 3)A. Array with Odd Sum(水题)
You are given an array aa consisting of nn integers. In one move, you can choose two indices 1≤i,j≤n ...
- Windows远程“要求的函数不受支持”解决办法
解决方法: 开启组策略中远程桌面链接安全层.1.开始-运行-gpedit.msc,进入组策略编辑器:2.找到左侧边栏计算机配置-管理模板-Windows组件-远程桌面服务-远程桌面会话主机-安全项:3 ...