码迷,mamicode.com
首页 > Web开发 > 详细

##CSS 2D 转换##

时间:2019-06-12 18:07:45      阅读:48      评论:0      收藏:0      [点我收藏+]

标签:颜色   property   inf   暂停   normal   opera   charset   要求   content   

通过CSS 2D转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
<br>2D转换一共五个属性:transfrom=>
translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据给定的x坐标和y坐标位置参数,将元素移动到新的位置
<br>rotate(数值deg):元素顺时针旋转给定的角度,允许负值,元素将逆时针旋转。
<br>scale(宽度数值,高度数值):元素的尺寸会增加或减少,根据给定的宽度和高度参数。
<br>skew(X数值deg,Y数值deg):元素翻转给定的角度,根据给定的X轴和Y轴参数,将元素围绕着X,Y轴翻转。
<br>matrix(n,n,n,n,n,n):可以设定所有的数值,不建议使用,容易混乱。
##CSS 3D转换##
3D转换,将比2D转换X,Y多出一个Z轴。
注:Opera 仍然不支持 3D 转换(它只支持 2D 转换)。
<br>3D转换相应的属性=>
<br>transfrom-origin:(X轴数值,Y轴数值)改变元素被转换的位置,XY交叉部分定位被转换的位置,元素将依照这个位置进行变化.
<br>transfrom-style:规定被嵌套元素如何在3D空间中显示。
<br>perspective-origin:规定 3D 元素的底部位置。
<br>perspective-visibility:定义元素在不面对屏幕时是否可见=>
<br>(1)visible:默认,背面可见,类似透明。
<br>(2)hidden:背面不可见。
##过渡##
通过添加过渡效果,我们可以把一个元素从一种样式变成另外一种样式。
<br>初始属性{transition: 需要变化的位置(也可以设置全部all) 时间}
<br>注:如果不设定时长,则不会有过渡效果,因为默认值为0。
<br>初始属性{(背景颜色、边框大小等)+transition}=>初始属性:hover{背景颜色、边框大小等}
<br>注:鼠标移除元素时,它会逐渐变回原样。
###过渡属性###
transition:简写属性,用于在一个属性中设置四个过渡属性。
<br>transition-property:规定应用过渡的 CSS 属性的名称。
<br>transition-duration:定义过渡效果花费的时间。默认是 0。
<br>transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"=>
<br>(1)ease:渐快、匀速、减速
<br>(2)ease-in:渐快、匀速
<br>(3)ease-out:匀速、减速
<br>(4)ease-in-out:和ease类似,但比ease的加速增幅更大
<br>(5)linear:全程匀速
<br>transition-delay:规定过渡效果何时开始。默认是 0,直接开始。
<br>注:这些都将写在初始元素中。
##动画##
书写方式:
<br>@keyframes 名字{在一定时间的时候的样式,用%后跟{要求}显示}
<br>@keyframes用于创建动画
<br>注:0%(或form)是动画的开始,100%(或to) 是动画的完成。
<br>注2:@keyframes 名字,必须写在要求元素前,否色无效。
<br>@keyframes对应的元素中可以设定的标签=>
<br>animation:所有动画属性的简写属性,除了 animation-play-state 属性
<br>animation-name:规定 @keyframes 动画的名称。
<br>animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。
<br>animation-timing-function:规定动画的速度曲线。默认是 "ease"。
<br>animation-delay:规定动画何时开始。默认是 0。
<br>animation-iteration-count:规定动画被播放的次数。默认是 1。
<br>animation-direction:规定动画是否在下一周期逆向地播放。默认是 "normal"。
<br>animation-play-state:规定动画是否正在运行或暂停。默认是 "running"。
<br>animation-fill-mode:规定对象动画时间之外的状态。
光说估计大家也不懂,我发个例子吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.big{
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
margin: 0 auto;
margin-top: 200px;
display: flex;
text-align: center;
align-items: center;
}
@keyframes wo{
0%{transform: rotate(45deg)}
25%{transform: rotate(135deg)}
50%{transform: rotate(215deg)}
75%{transform: rotate(305deg)}
100%{transform: rotate(395deg)}
}
.wu{
width: 300px;
height: 300px;
position: absolute;
margin-left: 530px;
margin-top: -250px;
transform: rotate(45deg);
animation-name: wo;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.mix{
width: 50px;
height: 50px;
border-radius: 50%;
background: blue;
}
.tx{
display: flex;
width: 300px;
height: 150px;
}
@keyframes hf{
0%{transform: scale(1.5,1.5)}
50%{transform: scale(1,1)}
100%{transform: scale(1.5,1.5)}
}
.a{
width: 150px;
height: 150px;
animation-name: hf;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.s{
width: 150px;
height: 150px;
animation-name: hf;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.d{
width: 150px;
height: 150px;
animation-name: hf;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.f{
width: 150px;
height: 150px;
animation-name: hf;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#q{
float: left;
}
#w{
float: right;
}
#e{
float: left;
margin-top: 100px;
}
#r{
float: right;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="big"></div>
<div class="wu">
<div class="tx">
<div class="a"><div id="q" class="mix"></div></div>
<div class="s"><div id="w" class="mix"></div></div>
</div>
<div class="tx">
<div class="d"><div id="e" class="mix"></div></div>
<div class="f"><div id="r" class="mix"></div></div>
</div>
</div>
</body>
</html>
以上只是一个简单的例子,大家可以多多尝试各种元素组合书写。

##CSS 2D 转换##

标签:颜色   property   inf   暂停   normal   opera   charset   要求   content   

原文地址:https://www.cnblogs.com/html-he-css/p/11011075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!