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联合起 ...
随机推荐
- 68.最大k乘积问题 (15分)
C时间限制:3000 毫秒 | C内存限制:3000 Kb题目内容:设I是一个n位十进制整数.如果将I划分为k段,则可得到k个整数.这k个整数的乘积称为I的一个k乘积.试设计一个算法,对于给定的I和 ...
- eduCF#61 F. Clear the String /// 区间DP 消除连续一段相同字符 全部消完的最少次数
题目大意: 给定字符串 每次消除可消除连续的一段相同的字符的子串 求消除整个字符串的最少消除次数 #include <bits/stdc++.h> using namespace std; ...
- webpack 配置之入门二（css 篇）
在项目中我们通过 css 来美化页面,css 也成为了网站不可或缺的一部分,这章节主要介绍 webpack 处理 css 部分, 1.webpack 处理 css 在 webpack 中,我们通过 s ...
- Object相关方法
const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.values(object1)); // expect ...
- HTML5字体、伪元素、背景
1.字体样式: 选择器 { font:font-style font-weight font-size / line-height font-family:} 例:p { font: ita ...
- [转载]A星寻路算法介绍
转载自:http://www.raywenderlich.com/zh-hans/21503/a%E6%98%9F%E5%AF%BB%E8%B7%AF%E7%AE%97%E6%B3%95%E4%BB% ...
- Vue登录登出以及JWT认证
数据模型 主要用户名,密码,邮箱,头像,身份 const mongoose = require('mongoose') const schema = new mongoose.Schema({ use ...
- wordpress翻译插件gtranslate
https://www.gdstautoparts.com/
- thinkphp 查询缓存
对于及时性要求不高的数据查询,我们可以使用查询缓存功能来提高性能,而且无需自己使用缓存方法进行缓存和获取. 大理石平台价格 查询缓存功能支持所有的数据库,并且支持所有的缓存方式和有效期. 在使用查询缓 ...
- .net 项目如何添加log4net日志记录
1.在项目根目录新建文件log4net.config,此文件中的节点解释还请自动百度. 文件实例: <?xml version="1.0"?><configura ...