css 动画 (2)
1. html 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes 02</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
2. css 样式
body {
background-color: #333;
}
.box {
background-color: #fff;
width: 200px;
height: 200px;
position: relative;
top: 0;
left: 0;
animation: anim 2s forwards ease-in-out;
}
@keyframes anim {
25% {
top: 0;
left: 300px;
background-color: cornflowerblue;
border-radius: 50% 0 0 0;
}
50% {
top: 300px;
left: 300px;
background-color: brown;
border-radius: 50% 50% 0 0;
}
75% {
top: 300px;
left: 0;
background-color: blueviolet;
border-radius: 50% 50% 50% 0;
}
100% {
top: 0;
left: 0;
background-color: aqua;
border-radius: 50%;
}
}
css 动画 (2)的更多相关文章
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- Css 动画的回调
在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...
- 【译】css动画里的steps()用法详解
原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- Animo.js ：一款管理 CSS 动画的强大的小工具
Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...
随机推荐
- vue学习过程总结（03） - 菜鸟教程归纳
1.模板语法 1.1.文本插值,数据绑定.{{}},如: <p>{{ message }}</p> 1.2.输出HTML代码.v-html,如: <div v-html= ...
- 计算机网络：套接字（Socket）| Python socket实现服务器端与客户端通信，使用TCP socket阿里云ECS服务器与本机通信
所谓套接字(Socket),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象.一个套接字就是网络上进程通信的一端,提供了应用层进程利用网络协议交换数据的机制.从所处的地位来讲,套接字上联应 ...
- 搭建分布式事务组件 seata 的Server 端和Client 端详解（小白都能看懂）
一,server 端的存储模式为:Server 端 存 储 模 式 (store-mode) 支 持 三 种 : file: ( 默 认 ) 单 机 模 式 , 全 局 事 务 会 话 信 息 内 存 ...
- MyISAM 表格将在哪里存储，并且还提供其存储格式？
每个 MyISAM 表格以三种格式存储在磁盘上: ·".frm"文件存储表定义 ·数据文件具有".MYD"(MYData)扩展名 索引文件具有".MY ...
- JVM组成结构以及各部分的功能
Java虚拟机主要分为以下五个区: 一.方法区(METHOD AREA): 1. 有时候也成为永久代,在该区内很少发生垃圾回收,但是并不代表不发生GC,在这里进行的GC主要是对方法区里的常量池和对类型 ...
- java中的正则表达式And Pattern And Macher
在哪里?? java.util.regex包下有两个用于正则表达式的类, 一个是Matcher类, 另一个Pattern 简单例子 public class RegexLeaning { public ...
- django 三件套(render,redirect,HttpResponse)
Django基础必备三件套**: HttpResponse 内部传入一个字符串参数,返回给浏览器. from django.shortcuts import HttpResponse def inde ...
- 5-Pandas数据分组的函数应用（df.apply()、df.agg()和df.transform()、df.applymap()）
将自己定义的或其他库的函数应用于Pandas对象,有以下3种方法: apply():逐行或逐列应用该函数 agg()和transform():聚合和转换 applymap():逐元素应用函数 一 ...
- word中怎么加入endnote的插件
首先,打开Microsoft Word 2010,然后点击文件菜单,在弹出的项目中点击选项. 2 弹出Word选项对话框,在左侧导航处点击"加载项"按钮,如图. 3 在右侧内容窗口 ...
- 浅析CSS定位
position 属性指定了html元素的定位类型. position 属性有 4 种值:1. static(default)表示没有定位,元素出现在正常的文档流中.为静态定位的元素设置 top|bo ...