CSS新特性2

转换

转换的效果是让某个元素改变形状，大小和位置

transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

<div class="box"></div>
.box {width: 100px;height: 80px;background-color: rgba(255, 0, 0, .8);transform: translate(50px, 100px);
}

<div class="box"></div>
.box {width: 100px;height: 80px;background-color: rgba(255, 0, 0, .8);transform: rotate(30deg);
}

<div class="box"></div>
.box {width: 100px;height: 80px;background-color: rgba(255, 0, 0, .8);transform: scale(2,3); 
}

3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化

1. rotateX()
2. rotateY()

<div class="box"></div>
.box {width: 200px;height: 250px;background-color: #8ac007;margin: 50px;
}
.box:hover{box-shadow: 0 15px 30px rgba(0,0,0,0.2);transform: translate3d(0,-2px,0);
}

过渡

<div class="box"></div>
.box {width: 100px;height: 80px;background-color: rgba(255, 0, 0, .8);transition: width 2s ease 1s;
}
.box:hover{width: 500px;
}

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%

0% 是动画的开始，100% 是动画的完成。

@keyframes创建动画

使用@keyframes规则，你可以创建动画

@keyframes name {from|0%{css样式}percent{css样式}to|100%{css样式}
}

切换背景颜色

<div class="animation"></div>
.animation {width: 300px;height: 300px;background-color: red;animation: anima 5s linear 5s infinite;
}
.animation:hover {animation-play-state: paused;
}
@keyframes anima {0% {background-color: red;}50% {background-color: green;}100% {background-color: blueviolet;}
}

呼吸效果

<div class="box"></div>
.box {width: 500px;height: 400px;margin: 40px auto;background-color: #2b92d4;border-radius: 5px;box-shadow: 0 1px 2px rgba(0, 0, 0, .3);/* animation-timing-function: ease-in-out;animation-name: breathe;animation-duration: 2700ms;animation-iteration-count: infinite;animation-direction: alternate; */animation: breathe 2700ms ease-in-out infinite alternate;
}
@keyframes breathe {0% {opacity: .2;box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1)}50% {opacity: .5;box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76)}100% {opacity: 1;box-shadow: 0 1px 30px rgba(59, 255, 255, 1)}
}