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联合起 ...
随机推荐
- 调用API接口，查询手机号码归属地（1）
使用https://www.juhe.cn/提供的接口,查询归属地 在官网注册key即可使用. 代码如下 #!/usr/bin/python # -*- coding: utf-8 -*- impor ...
- 第十八天：CSV、JSON、Excel、SQLite
一.CSV文件 1.读取 reader = csv.reader(打开的file对象), reader为可迭代对象 2.用namedtuple映射列名 with open('apple.csv') a ...
- react-router v4 理解
1.Router (1)最基础的路由器,必须有history属性 (2)BrowserRouter和HashRouter都是由Router组件扩展而来 2.BrowserRouter (1)Brows ...
- java idea 创建第一个java 程序
我们在 src 目录下边创建一个 package. 然后在package下创建我们的程序 helloworld.java 代码: package com.api.com; public class ...
- C#中反射的基础基础基础
class Program { static void Main(string[] args) { Type t = typeof(Student);//typeof(类) 取类的类型 并且存储在Ty ...
- leetcood学习笔记-141-环形列表
题目描述: 方法一: class Solution(object): def hasCycle(self, head): """ :type head: ListNode ...
- delphi Copy函数 和 Pos函数
copy(a,b,c); a:就是copy源,就是一个字符串,表示你将要从a里copy一些东西, b:从a中的第b位开始copy(包含第1位), c:copy从第b位开始后的c个字符, 例如: m:= ...
- bzoj1016题解
[解题思路] Kruskal的拓展. 可以先对边排序,进行一次Kruskal,判断是否可行,并计算出每种权值的边需要多少条. 然后暴力统计每种权值可行的方案数,根据乘法原理乘起来即可.复杂度o(210 ...
- Qt---QFtp上传、下载二进制文件
#include "mainwindow.h" #include "ui_mainwindow.h" #include <QFtp> #includ ...
- Python 爬虫-抓取小说《盗墓笔记-怒海潜沙》
最近想看盗墓笔记,看了一下网页代码,竟然不是js防爬虫,那就用简单的代码爬下了一节: """ 爬取盗墓笔记小说-七星鲁王宫 """ from ...