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联合起 ...
随机推荐
- mysql动态列--统计报表信息对比
SET @sql = NULL; SELECT GROUP_CONCAT(DISTINCT CONCAT( 'MAX(IF(tmp.summary = ''', tp.summary, ''', tm ...
- UI自动化ADB出现devices offline的解决方法
终端运行如下命令即可解决: adb kill-server adb start-server adb remount
- XVIII Open Cup named after E.V. Pankratiev Stage 5: Eastern Grand Prix
contest link easy: EI medium-easy: BCDGK medium: L medium-hard: AFH A. Artifacts B. Brackets and Dot ...
- XX Russia Team Open, High School Programming Contest St Petersburg, Barnaul, Tbilisi, Almaty, Kremenchug, November 30, 2019
ContestLink easy: AFI medium-easy: BDH medium: CGKL ???: EJ A. Attractive Flowers 签到. B. Blocking th ...
- Django（九） xadmin全局配置
xadmin的使用,首先需要对model进行注册,才能在后台管理中进行操作. 1.在app里创建py文件:adminx(必须这个名称) 2.导入xadmin和models里的类,格式如下: 其中lis ...
- the blank final field factors may not have been initialized
Q1: why we should initialize final field before completion of new instance? final means no changeabl ...
- 【转】谈一谈 Normalize.css
原文链接: https://www.jianshu.com/p/9d7ff89757fd 笔记: 如何使用?
- Xcode使用篇-重新安装Xcode
卸载Xcode sudo rm -rf /Applications/Xcode.app sudo rm -rf /Library/Preferences/com.apple.dt.Xcode.plis ...
- 2018-2-13-win10-uwp-让焦点在点击在页面空白处时回到textbox中
title author date CreateTime categories win10 uwp 让焦点在点击在页面空白处时回到textbox中 lindexi 2018-2-13 17:23:3 ...
- MySQL高可用配置（主从复制）
主从复制包含两个步骤: 在 master 主服务器(组)上的设置,以及在 slave 从属服务器(组)上的设置. 环境: MASTER: 192.168.155.101SLAVE: 192.168.1 ...