animation,transition,transform小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main {
position: absolute;
width:300px;
height:500px;
background-color: fuchsia;
} .content{
position:absolute;
width:50px;
height:50px;
background-color: red;
animation: one 6s infinite;
/*transition: two 3s ease 0s;*/
} .content1{
position:absolute;
width:50px;
height:50px;
background-color: yellow;
border-radius: 50px;
animation: two 3s ease 0s infinite;
} .content2{
position:absolute;
width:50px;
height:50px;
background-color: dodgerblue;
/*animation: three 3s ease 0s infinite;*/
transition:all 2s;
transition-delay:5s; /*transition-duration: 2s, 4s;*/
} .content2:hover{
height:300px;
width:200px;
transform: translateX(100px) translateY(100px) scale(0.8) rotate(360deg);
} @keyframes one {
0% {
transform: rotate(0deg) ;
left:0px;
}
20%{
transform: rotate(50deg);
left:50px;
top:100px
}
60%{
transform: rotate(180deg);
left:150px;
top:150px
}
100%{
transform: rotate(360deg);
left:230px;
}
} @keyframes two {
0% {
transform: rotate(0deg) ;
left:0px;
width:100px;
}
20%{
transform: rotate(50deg);
left:50px;
top:250px;
width:120px;
} 60%{
transform: rotate(180deg);
left:150px;
top:400px;
width:190px;
}
100%{
transform: rotate(360deg);
left:250px;
width:300px;
}
} @keyframes three {
0% {
transform: rotate(0deg) ;
left:0px;
}
20%{
transform: rotate(50deg);
left:50px;
top:250px
} 60%{
transform: rotate(180deg);
left:150px;
top:400px
}
100%{
transform: rotate(360deg);
left:250px;
}
}
</style> </head>
<body> <div class="main">
<div class="content"></div>
<div class="content1"></div>
<div class="content2"></div>
</div>
</body>
</html>
animation,transition,transform小练习的更多相关文章
- animation transition transform
animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 div{width:100px;height:100px;background:red;animation:move ...
- css transition transform animation例子讲解
1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...
- CSS製作動畫效果(Transition、Animation、Transform)
CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...
- css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS的Animation&Transition&gradients属性
㈠Animation&Transition&gradients 代码示例 圆形,渐变颜色,旋转,当鼠标放在圆上,圆旋转变大 <!DOCTYPE html> <html ...
- 用C3中的animation和transform写的一个模仿加载的时动画效果
用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...
- #8.12.16总结#background transition、animation、transform
background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效. background-origin :bord ...
- transform animation transition css3动画
transform 定义 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 值 应用 如果transform与transition联合起 ...
随机推荐
- postgres日志爆盘处理方案-转自DBA汪x
背景:我们的服务是一个带有部分批处理业务的服务,在跑历史数据入pg时会有大量日志产出,现场服务器出现过几次爆盘,询问DBA后制定了以下两个方案: 方案一:如果不关心或不会使用pg日志,通过参数控制减少 ...
- mysql shell脚本
mysql shell连接脚本 本地连接及远程链接 #!/bin/bash #连接MySQL数据库 Host=127.0.0.1 User=username PASSWORD=password POR ...
- python软件开发规范&分文件对于后期代码的高效管理
根据本人的学习,按照理解整理和补充了python模块的相关知识,希望对于一些需要了解的python爱好者有帮助! 一.软件开发规范--分文件 当代码存在一个py文件中时: 1.不便于管理 (修改,增加 ...
- Jmeter 请求参数中包含 MD5 加密的密码
如何在jmeter中对参数进行加密 使用工具:java+myeclipse 让开发将他的加密类从eclipse中导出来打成jar包,放在jmeter安装文件夹lib文件夹中%JMETER HOME%\ ...
- Swift结构体和类
Swift结构体 在Swift标准中,绝大多数的公开的类型都是结构体,而枚举和类只占很小的一部分 比如Bool.Int.Double.String.Array.Dictionary等常见的类型都是结构 ...
- 2018-8-10-win10-uwp-气泡
title author date CreateTime categories win10 uwp 气泡 lindexi 2018-08-10 19:16:50 +0800 2018-2-13 17: ...
- umount - 卸载文件系统
总览 umount [-hV] umount -a [-nrv] [-t vfstype] umount [-nrv] device | dir [...] 描述 umount 可以卸除当前挂载在文件 ...
- zeromq protobuf例子
https://github.com/AifiHenryMa/zeromq_protocolbuffer_demo https://github.com/protocolbuffers/protobu ...
- 2.Struts2配置文件
1.配置文件的加载顺序 0. 需要掌握 * 加载了哪些个配置文件(重点的) * 配置文件的名称是什么 * 配置文件的位置 * 配置文件的 ...
- 13. this关键字
1.this的概述 this关键字代表是对象的引用.也就是this在指向一个对象,所指向的对象就是调用该函数的对象引用. 2.this实例,初始化成员变 class Employee { privat ...