原文章:http://www.pianshen.com/article/6672108066/
一、transform:改变元素形状
4个属性
1. rotate:围绕中心点旋转 deg 单位
2. translate(x,y):向 x y 轴移动位置 px
3. scale:整体缩放 倍数、scaleX scaleY 沿 轴方向缩放
4. skew(x,y) 切变、scaleX scaleY 沿轴切变
二、transition:过渡,一个元素从一个形状变换到另一个形状。(需要事件触发)
1. transition-property(none/all/indent):变换的属性
2. transition-duration:转换持续时间,单位 s/ms
3. transition-timing-function(ease/liner/ease-in/ease-out/ease-in-out/cubic-bezier):变换速率
4. transition-delay:转换开始执行的时间,事件触发后多久执行
transition 连写格式:
连写格式
transition: property duration animation type delay
例子:
单个属性property
div{ transition: opacity .35s, transform .35s }
多个属性property 同时变化,用 "," 逗号隔开
div1{ transition: background-color 1s ease 0.1s, width 1s linear 0.1s, height 1s ease-in-out 0.1s; }
PS:因为transition最早是有由webkit内核浏览器提出来的,mozilla和opera都是最近版本才支持这个属性,而我们的大众型浏览器 IE 全家都是不支持,另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法,所以在应用transition时我们有必要加上各自的前缀
transition例子
.transform{
width: 300px;
height: 300px;
position: absolute;
font-size: 22px;
color: white;
background-color: brown;
-webkit-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
-moz-transition: background-color 1s ease 0.1s ,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
-ms-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
-o-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
}
.transform:hover{
background-color: gray;
width: 350px;
height: 350px;
}
transition 例子。
结合transform。transform在这里作为transition 的 属性(property)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.effect-box {
position: relative;
display: inline-block;
overflow: hidden;
width: 250px;
height: 158px;
background: rgba(53, 172, 197, 1);
cursor: pointer}
.effect-box img {
display: block;
width: 100%;
height: 100%;
opacity: 1;
opacity: 1;
-webkit-transition: opacity .35s;
transition: opacity .35s
}
.effect-box:hover img {
opacity: .4
}
.effect-box .border-line2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 2em;
font-size: 1.25em;
color: #fff;
text-transform: uppercase;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.effect-box .border-line2::after,
.effect-box .border-line2::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
pointer-events: none;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s
}
.effect-box .border-line2::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1)
}
.effect-box .border-line2::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0)
}
.effect-box:hover .border-line2::after,
.effect-box:hover .border-line2::before {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
.effect-box .border-line2 p {
padding: 4px 10px;
margin: 0;
font-size: 16px;
line-height: 1.0;
text-align: center;
color: #fff;
letter-spacing: 1px;
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0)
}
.effect-box:hover .border-line2 p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
</style>
</head>
<body>
<div class="effect-box">
<img src="http://pic117.huitu.com/pic/20190409/915016_20190409173546032070_0.jpg">
<div class="border-line2">
<p> 319 </p>
<p> 布局和界面</p>
<p>Read More</p>
</div>
</div>
</div>
</body>
</html>
三、animation动画
0. 用 @keyframes 定义动画名 ,以及该名称包含的动画需要变化的属性及内容
1. animation-name:元素绑定动画名(@keyframes定义的动画名)
2. animation-duration:动画持续时间
3. animation-timing-function:动画变换速率
4. animation-delay:开始时间。触发动画后多久开始动画
5. animation-interation-count: 循环播放次数。(infinite 是无限次)
6. animation-direction: 动画运动方向 (normal/ alternate: 默认值为normal,如果是normal动画每次循环都是向前播放的,也就是每次都是从0%播放到100%。 另一个值是alternate,设定animation-direction为alternate,那么就会从0%播放到100%后就会从100%播放到0%。结合 animation-interation-count:infinite,可以形成动画来回循环播放。例如实现“如何使一个小球来回无限运动”)
7.animation-play-state(running/pause):动画的播放状态(其中running是默认值,就是在播放。而paused就是暂停播放。而当动画暂停播放后,再重新设置为running的时候,就会从原来的位置重新播放。)
.animation{
width: 300px;
height: 300px;
position: absolute;
font-size: 22px;
color: white;
background-color: brown;
animation: ccchange 3s ease alternate infinite;
}
@keyframes ccchange {
0%{
width: 300px;
height: 300px;
background-color: brown;
}
40%{
width: 500px;
height: 500px;
background-color: seagreen;
}
60%{
width: 400px;
height: 400px;
background-color: coral;
}
100%{
}
}