css3 放大缩小代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3圆圈动画放大缩小循环动画效果</title>
<style> .dot {
margin:150px auto;
width:200px;
height:200px;
background-color:#E3E3E3;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
} @keyframes ripple {
0% { opacity:0.35;
width:190px;
height:190px;
}
100% { opacity: 0.9;
width:250px;
height:250px;
}
} </style>
</head> <body>
<div class="dot"></div>
</body>
</html>
css3 放大缩小代码的更多相关文章
- keyframes 放大缩小动画
本次项目中动画放大缩小代码小结 .fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infi ...
- CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- css3 animation(左右摆动) (放大缩小)
左右摆动: @-webkit-keyframes roundRule{ 0%, 100%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-tran ...
- hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/ 查找和下载. hamme ...
- 用css3实现图片的放大缩小
记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...
- WPF布局之让你的控件随着窗口等比放大缩小，适应多分辨率满屏填充应用
一直以来,我们设计windows应用程序,都是将控件的尺寸定好,无论窗体大小怎么变,都不会改变,这样的设计对于一般的应用程序来说是没有问题的,但是对于一些比较特殊的应用,比如有背景图片的,需要铺面整个 ...
- C# GDI绘制矩形框，鼠标左键拖动可移动矩形框，滚轮放大缩小矩形框
最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大 ...
- Canvas实现图片放大缩小移动操作
对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...
随机推荐
- Open System Interconnection
https://zh.wikipedia.org/wiki/Secure_Shell Secure Shell(缩写为SSH),由IETF的网络工作小组(Network Working Group)所 ...
- python装饰器的学习笔记
此博文是我对装饰器的一些理解,如果有错误欢迎及时留言,我会第一时间向大家学习. 一.什么是装饰器 1.从字面意义来看: 是用来给函数装饰打扮的函数 2.理论上可以理解为: (1).不改变函数的运行方式 ...
- myeclipse部署web项目部署按钮无效
找到MyEclipse的工作路径,我的是“E:\Java”,到这个目录中去“\.metadata\.plugins\org.eclipse.core.runtime\.settings”找一个含有de ...
- java获取当前路径&读取当前目录下文件
项目目录如下: test1.class中读取test.txt import java.io.*; import java.util.Scanner; public class Test1 { publ ...
- Redis四（Set操作）
1.Set操作 Set集合就是不允许重复的列表 集合操作(无序) sadd(name,values) 1 # name对应的集合中添加元素 scard(name) 1 获取name对应的集合中元素个数 ...
- 4 TensorFlow入门之dropout解决overfitting问题
------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...
- Python基础学习之 函数
阅读目录 第一篇: 函数初识 第二篇: 函数命名空间 作用域 闭包 第三篇: 装饰器 第四篇: 装饰器 面试题错误点 第五篇: 迭代器生成器 第六篇: 生成器进阶 第七篇: 递归 第八篇 ...
- Web框架（Day64）
阅读目录 http协议 web应用与web框架 一.http协议 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World W ...
- go——通道（二）
在Go语言里面,你不仅可以使用原子函数和互斥锁来保证对共享资源的安全访问以消除竞争状态, 还可以使用通道,通过发送和接收需要共享的资源,在goroutine之间做同步. 当一个资源需要在gorouti ...
- SHELL —— BASH环境
一 .什么是SHELL shell一般代表两个层面的意思,一个是命令解释器,比如BASH,另外一个就是shell脚本.本节我们站在命令解释器的角度来阐述shell 二 .命令的优先级 命令分为: == ...