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联合起 ...
随机推荐
- explain分析sql语句执行效率
Explain命令在解决数据库性能上是第一推荐使用命令,大部分的性能问题可以通过此命令来简单的解决,Explain可以用来查看SQL语句的执行效 果,可以帮助选择更好的索引和优化查询语句,写出更好的优 ...
- 监控数据库SqlServer
监控数据库的连接数select COUNT( * ) from master.dbo.sysprocesses select COUNT( * ) from master.dbo.sysprocess ...
- C语言typedef
#include <stdio.h> //基本类型 typedef int MyInt; //可以对typedef产生的类型名二次起别名 typedef MyInt MyInt2; // ...
- 1 新增硬盘挂载home文件夹。 2 修理扇区
一 挂载新硬盘 主机磁盘容量不够大时,想新增一颗新磁盘的时候.并将磁盘全部分割成单一分割槽,且将该分割槽挂载到/home目录,你该怎么做呢? 1 安装硬盘. 2 磁盘分区. 3 格式化磁盘 4 将 ...
- cmake 支持-lpthread
set(CMAKE_BUILD_TYPE "Release") if( CMAKE_BUILD_TYPE STREQUAL "Debug" ) set(C ...
- 笔记34 Spring MVC的高级技术——处理multipart形式的数据
一.需求介绍: Spittr应用在两个地方需要文件上传.当新用户注册应用的时候,我 们希望他们能够上传一张图片,从而与他们的个人信息相关联.当用 户提交新的Spittle时,除了文本消息以外,他们可能 ...
- volatile的使用及其原理
1. volatile的作用 相比Sychronized(重量级锁,对系统性能影响较大),volatile提供了另一种解决 可见性和有序性 ???问题的方案.对于原子性,需要强调一点,也是大家容易误解 ...
- Jenkins忘记 admin 密码
进入 jenkins home(我的是/var/jenkins_home)路径下的users 文件夹 cd /var/jenkins_home/users sudo vim admin/config. ...
- openwrt redis
2071 make V=s 2072 cd build_dir/target-x86_64_uClibc-0.9.33.2/root-x86/ cd package/network/services/ ...
- 实时监听input输入情况
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...