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,为您提供了近 ...
随机推荐
- 先知xss挑战赛学习笔记
xss游戏 游戏地址:http://ec2-13-58-146-2.us-east-2.compute.amazonaws.com/ LEMON参考wp地址 1. 文件上传 源码如下 <?php ...
- 《前端运维》四、Jenkins--持续构建
首先,我们先来了解下什么叫做持续构建.持续构建简称CI,负责拉取代码库中的代码后,执行用户预定义的脚本,通过一系列编译操作构建出一个制品,并将制品推送到制品库里.常用的持续构建工具有 Gitlab C ...
- 12.9 supper
Super super的注意事项 super可以用来在子类中访问父类的public属性或方法,super只能出现在子类中. super()调用的是父类的默认无参构造,super(参数)可以调用父类的有 ...
- idea如何打包项目，部署到linux后台运行
服务器安装tomcat 上传好tomcat包 scp -r tomcat liwwww@111116.11222.101121.12111111:/opt/ linux下启动tomcat服务的命令 ...
- springboot服务引入外部jar包在windows运行正常，在linux环境上无法加载到引入jar包的类
一.问题描述 最近开发了一个springboot程序,需要依赖第三方jar包,这个jar包无法直接通过pom远程仓库下载,需要从自己本地引入,于是配置pom文件如下:将本地jar包引入工程,syste ...
- Mybatis有哪些执行器？
Mybatis有三种基本的Executor执行器: SimpleExecutor.ReuseExecutor.BatchExecutor. SimpleExecutor:每执行一次 ...
- kafka producer的batch.size和linger.ms
1.问题 batch.size和linger.ms是对kafka producer性能影响比较大的两个参数.batch.size是producer批量发送的基本单位,默认是16384Bytes,即16 ...
- 初识mybatis（为什么是mybatis？）
对原生态的 jdbc 中的问题总结 1.数据库连接,使用就创建,不使用立即释放,对数据库进行频繁连接开启和关闭,造成数据库资源浪费,影响数据库性能. 设想:使用数据库连接池管理数据库连接 2.将sql ...
- 全方位讲解 Nebula Graph 索引原理和使用
本文首发于 Nebula Graph Community 公众号 index not found?找不到索引?为什么我要创建 Nebula Graph 索引?什么时候要用到 Nebula Graph ...
- 理解OIDC协议和认证机制
当互联网应用越来越多,每个应用程序都实现了自己的身份存储.认证和授权,用户需要在应用上反复的注册与登录,体验糟糕,用户身份信息无法在多个应用间共享与同步.当使用企业应用时,企业提供了一系列应用,尽管是 ...