web.jpeg
1.过渡(transition)
- 是一个综合属性
transition:要过渡的属性 时间 运动的形式 何时开始 -
transition-property需要过渡的属性，比如:宽度，高度等 -
transition-duration持续时间 比如:4s -
transition-timing-function运行的速率-
linear匀速 -
ease速度由慢到快 -
cubic-bezier(n,n,n,n)贝塞尔函数曲线
-
-
transition-delay延迟执行的时间，比如:1s后执行
<style>
*{
padding: 0;
margin: 0;
}
div {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 100px;
background-color: yellowgreen;
line-height: 100px;
text-align: center;
/* 添加过渡属性 */
/* 更改某个属性 */
transition-property: width;
/* 持续时间 */
transition-duration: 4s;
/* 运行速率 */
transition-timing-function: ease;
/* 延迟执行 1s后执行*/
transition-delay: 1s;
/* 兼容 Safari */
-webkit-transition-property:width;
}
div:hover{
width: 500px;
}
</style>
transition.gif
2. transform 形变
transform形变 包括位移、旋转、倾斜、缩放要配合transition过渡使用才有效transform也是一个综合属性 ,比如你做缩放，旋转transform: scale(2.0) rotate(360deg);-
平移 translate(x, y)
<style>
*{
padding: 0;
margin: 0;
}
div {
margin: 100px auto;
width: 200px;
height: 100px;
background-color: yellowgreen;
line-height: 100px;
text-align: center;
transition: 2s;
}
div:hover{
transform: translate(300px,300px);
}
</style>
translate.gif
注意：如果
translateX是%那就是以自己盒子宽度为基准，比如：50%就是偏移自己宽度的一半的距离 （%经常和定位集合使用，比如 居中 问题）-
旋转 rotate(deg) 有单位
对元素进行旋转，正值为顺时针，负值为逆时针；
注意单位是 deg 度数
div:hover{
transform: rotate(270deg);
}
rotate.gif
注意
transform中一个transform-origin属性，设置中心点，(默认是中心点) 可以自己设置
- 可以是
left top right bottom方位名词可以是精确的 px
div {
margin: 100px auto;
width: 200px;
height: 100px;
background-color: yellowgreen;
line-height: 100px;
text-align: center;
transition: 2s;
// 设置中心点
transform-origin:10px 10px;
}
div:hover{
transform: rotate(270deg);
}
transform-origin.gif
-
倾斜
skew
div:hover{
/* transform: rotate(270deg); */
transform: skew(45deg);
}
skew.gif
-
缩放
scale -
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） -
scaleX(x)元素仅水平方向缩放（X轴缩放） -
scaleY(y)元素仅垂直方向缩放（Y轴缩放） -
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
div:hover{
/* transform: rotate(270deg); */
/* transform: skew(45deg); */
transform: scale(2.0);
}
scale.gif
3D效果
要做3D动画的效果，必须要有一个属性
perspective,并且这个属性是作用在要做3D效果的父级元素上
-
perspective视距效果，其原则是：近大远小透视效果是写在父亲身上。-
perspective效果会叠加，不能在父元素设置之后，在父父的元素上在设置，这样就会出现叠加效果
perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
注意
perspective属性，经常和translateZ()的结合起来使用。
-
transform-style属性- 是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：
flat（平面的）和preserve-3d - 其中
flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
- 是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：
backface-visibility: hidden隐藏做3D的效果的背面
3D旋转 rotate3d(x,y,z,angle)
-
rotate3d(x,y,z,angle)定义 3D 旋转,是一个综合属性-
rotateX(angle)沿着 X 轴的 3D 旋转。 -
rotateY(angle)沿着 Y 轴的 3D 旋转 -
rotateZ(angle)Z 轴的 3D 旋转
-
#warp {
width: 500px;
height: 500px;
border: 1px solid;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
/* 视距 */
perspective: 200px;
/* transform-style: preserve-3d; */
}
.dv{
position: absolute;
left: 50%;
top:50%;
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
background-color: yellowgreen;
line-height: 100px;
text-align: center;
transition: 2s;
}
-
rotateX(angle)沿着 X 轴的 3D 旋转。
.dv:hover{
transform: rotateX(360deg);
cursor: pointer;
}
rotateX.gif
-
rotateY(angle)沿着 Y 轴的 3D 旋转
div:hover{
transform: rotateY(360deg);
}
rotateY.gif
-
rotateZ()旋转
div:hover{
transform: rotateZ(360deg);
}
rotateZ.gif
3D平移 transform: translate3d(x,y,z)
-
transform: translate3d(x,y,z)是translateX() translateY() translateZ()的综合属性
#warp {
width: 500px;
height: 500px;
border: 1px solid;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
/* 视距 */
perspective: 500px;
}
.dv{
position: absolute;
left: 50%;
top:50%;
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
background-color: yellowgreen;
line-height: 100px;
text-align: center;
transition: 2s;
}
.dv:hover{
/* transform: rotateX(270deg); */
transform: translate3d(100px,100px,100px);
cursor: pointer;
background-color: rebeccapurple;
}
Untitled.gif
翻转导航
-
content: attr(data_hover);获取自定义属性的内容
<style>
*{
margin: 0;
padding: 0;
}
*::before,*::after{
box-sizing: border-box;
}
body{
text-align: center;
}
nav{
display: inline-block;
margin-top: 100px;
}
nav a {
display: inline-block;
text-decoration: none;
color: #ffffff;
/* 添加视距效果 */
perspective: 600px;
}
nav a span {
display: inline-block;
line-height: 40px;
background-color: #2195de;
padding: 0 25px;
position: relative;
/* 给父元素添加3D的属性 */
transform-style: preserve-3d;
transition: 2s;
transform-origin: top;
}
nav > a > span::after {
/* 获取属性的内容 */
content: attr(data_hover);
position: absolute;
top:100%;
left: 0;
height: 100%;
width: 100%;
background-color: #0965a0;
transform: rotateX(-90deg);
transform-origin: top;
}
nav > a:hover > span {
/* translateY 向上平移 20 是为了和中心线对齐 */
transform: rotateX(90deg) translateY(-20px);
}
</style>
</head>
<body>
<nav>
<a href="#">
<span data_hover="CC">音乐</span>
</a>
<a href="#">
<span data_hover="一杯仙气">影视</span>
</a>
</nav>
</body>
Untitled.gif
动画 animation
-
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; -
animation-name动画名称 -
animation -duration完成动画的时间 -
animation-timing-function动画速度曲线 -
animation-delay动画延迟的时间 -
animation-iteration-count动画的播放次数animation-iteration-count:infinite是无线循环 -
animation-direction动画下个周期是否逆向播放normal正常 | reverse反向运行 | alternate先正向在反向
-
animation-play-state动画是否正在执行或者暂停 -
animation-fill-mode动画结束 要保持的状态
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
animation: cc_animation 2s linear infinite;
}
/*
@-o-keyframes;
@-moz-keyframes; 火狐浏览器
@-webkit-keyframes 谷歌 Safari
*/
@keyframes cc_animation{
//开始做动画的属性
form{
}
//结束做动画的属性
to {
}
}
@keyframes cc_animation{
0% {
background-color: rebeccapurple;
transform: translateX(0);
}
25% {
background-color: blue;
transform: translateX(200px);
}
50% {
background-color: pink;
transform: translateX(350px);
}
75% {
background-color: palevioletred;
transform: translateX(600px);
}
100% {
background-color: yellowgreen;
transform: translateX(700px);
}
}
Untitled.gif
