html实现圆圈逐渐放大,CSS3 简单的圆形放大旋转变换
CSS
语言：
CSSSCSS
确定
html,
body {
height: 100%;
}
body {
background: #fefefe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-perspective: 10px;
perspective: 10px;
overflow: hidden;
-webkit-animation: slide 2s ease-in-out infinite both, background 4s steps(1) infinite both;
animation: slide 2s ease-in-out infinite both, background 4s steps(1) infinite both;
pointer-events: none;
}
.box {
display: inline-block;
-webkit-animation: scale 2s ease-in-out infinite both;
animation: scale 2s ease-in-out infinite both;
-webkit-transform: scale(0.021);
-ms-transform: scale(0.021);
transform: scale(0.021);
}
.dot {
width: 200vw;
height: 200vw;
margin-left: 50vw;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-animation: spin 2s ease-in-out infinite, dot-background 4s steps(1) infinite;
animation: spin 2s ease-in-out infinite, dot-background 4s steps(1) infinite;
border-radius: 50%;
}
@-webkit-keyframes background {
0%, 70%, 100% {
background: #508ce0;
}
20%,
40% {
background: #fff;
}
}
@keyframes background {
0%, 70%, 100% {
background: #508ce0;
}
20%,
40% {
background: #fff;
}
}
@-webkit-keyframes dot-background {
0%, 70%, 100% {
background: #fff;
}
20%,
40% {
background: #508ce0;
}
}
@keyframes dot-background {
0%, 70%, 100% {
background: #fff;
}
20%,
40% {
background: #508ce0;
}
}
@-webkit-keyframes slide {
0%, 80% {
-webkit-transform: none;
transform: none;
}
90% {
-webkit-transform: scale3d(1.1, 1, 1);
transform: scale3d(1.1, 1, 1);
}
100% {
-webkit-transform: translate3d(4.2vw, 0, 0);
transform: translate3d(4.2vw, 0, 0);
}
}
@keyframes slide {
0%, 80% {
-webkit-transform: none;
transform: none;
}
90% {
-webkit-transform: scale3d(1.1, 1, 1);
transform: scale3d(1.1, 1, 1);
}
100% {
-webkit-transform: translate3d(4.2vw, 0, 0);
transform: translate3d(4.2vw, 0, 0);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
80%,
100% {
-webkit-transform: rotateY(-0.5turn);
transform: rotateY(-0.5turn);
}
}
@keyframes spin {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
80%,
100% {
-webkit-transform: rotateY(-0.5turn);
transform: rotateY(-0.5turn);
}
}
@-webkit-keyframes scale {
0%, 100% {
-webkit-transform: scale3d(0.021, 0.021, 0.021);
transform: scale3d(0.021, 0.021, 0.021);
}
40% {
-webkit-transform: none;
transform: none;
}
}
@keyframes scale {
0%, 100% {
-webkit-transform: scale3d(0.021, 0.021, 0.021);
transform: scale3d(0.021, 0.021, 0.021);
}
40% {
-webkit-transform: none;
transform: none;
}
}
html实现圆圈逐渐放大,CSS3 简单的圆形放大旋转变换相关推荐
- android圆形变方形动画,CSS3 简单的圆形/方形变形动画
CSS 语言: CSSSCSS 确定 html, body { width: 100%; height: 100%; background-color: #221e40; } *, *:after, ...
- html 圆圈扩大动画,CSS3圆圈动画放大缩小循环动画效果
今天在写一个zblog主题的时候,在无限下拉加载等待时间内,需要加一个动画循环效果,如上图! 1.简单放大缩小循环!html> CSS3圆圈动画放大缩小循环动画效果 .dot { margin: ...
- CSS3实现旋转与放大缩小
CSS3实现旋转与放大缩小 开发工具与关键技术:Abobe Dreamweaver 动画旋转与放大缩小 作者:李国旭 撰写时间:2019年1月26日 一. 我们来简单认识一下动画,动画是使元素从一种样 ...
- html中如何实现放大动画,CSS3实现点击放大的动画实例
这次给大家带来CSS3实现点击放大的动画实例,CSS3实现点击放大动画实例的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 最近在工作中遇到一个需求,实现的效果是当点击商品图片右上的收藏按钮触 ...
- html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
原标题:HTML5+CSS3实现图片的放大/缩小 最近做项目时,经常遇到需要图片缓慢放大的效果.我做的时候想到了几种方法,所以来总结一下. 1. 利用css改变图片的宽高,做出视觉上的放大. 首先,将 ...
- h5+css3简单实现网页端五子棋游戏1.0版
H5+css3简单实现五子棋游戏 原理 主要使用H5的拖拽接口功能,通过拖拽移动棋子,目标位置通过接收拖拽棋子的拷贝元素,实现棋子摆放. 效果图如下 步骤 第一步:简单排版五子棋游戏页面,设定好棋盘排 ...
- css来回摆动,css3 animation(左右摆动) (放大缩小)
左右摆动: @-webkit-keyframes roundRule{ 0%, 100%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-tran ...
- css三角形 增涨,CSS3实现三角形不断放大效果
一.CSS3三角形不断放大特效 11.1 图片预览 11.2 index.html代码 CSS3三角形不断放大特效 11.3 style.css代码 html { height: 100%; } bo ...
- CSS3简单特效--animation实现流光按钮
CSS3简单特效–animation实现流光按钮 在学习css3的过程中,发现很多看着炫酷的效果,利用css3的属性能很简单的实现,animation是css3动画效果中常见的属性.下面让我们了解一下 ...
最新文章
- Vivado中debug用法
- 【洛谷 P1896】[SCOI2005]互不侵犯（状压dp）
- android 修改toolbar菜单item的icon图标
- IOS将字符串转换为日期时间格式
- dbutils java_Dbutils工具类的使用
- 找回华为云删除的通讯录_找回小米手机误删照片只要10秒！人人都知道的方法，你怎能不知道...
- java 正则表达式提取html纯文本
- PBR理论基础1：辐射度与BRDF
- 电脑课学生端密码查看
- Cookie用法大全
- vue中实现图片预览功能
- 饿了么虚拟号码可以发短信吗_饿了麽APP逆向及爬虫实现详参
- react实现markdown编辑器
- “因遭勒索软件攻击，我被认定工作失职开除，并被老东家索赔 21.5 万元”
- ps 的一些常见的键位技巧
- vue开发微信公众号订阅消息踩坑记录
- 微型计算机中的i3和i5指的是,i3和i5的处理器有什么区别
- 如何布置环境？自己这边打版了，后台怎么打版才能创建活动？
- 文件误删没进回收站怎么恢复?
- 免费将PPT转换成PDF的教程，拿走不谢！