CSS3 效果

透明

opacity

<!-- 透明值范围 0 ~ 1 -->

<div style="opacity: 0.3; background: #ff6138; width: 100px; height: 100px;"></div>

<div style="opacity: 0.7; background: #ff6138; width: 100px; height: 100px;"></div>

效果

渐变

linear-gradient

<!-- to right, #ffff9d, #beeb9f, #79bd8f 从左往右三色渐变 -->

<div style="width: 640px; height: 100px; background-image: linear-gradient(to right, #ffff9d, #beeb9f, #79bd8f);"></div>

<!-- 更多方位 / to top / to top right / to right / to bottom / to bottom left / to left / to top left -->

效果

变形

transform

<!-- 倾斜 transform: skew(45deg, 30deg) | 参数【水平角度 / 垂直角度】-->
<!-- 平移 transform: translate(100px, 50px) | 参数 【水平方向 / 垂直方向】 -->
<!-- 缩放 transform: scale(1.5, 0.5) | 参数【水平倍数 / 垂直倍数】 -->
<!-- 旋转 transform: rotate(45deg) | 参数【旋转角度】 -->
<!-- 作用点 transform-origin(left top) | 参数【left cent right 或 %】 -->

<div style="width: 100px; height: 100px; background: #032a33; transform:skew(45deg, 30deg);"></div>

效果

动画

animation

<style type="text/css">
#animation:hover {
 /** 
 1 animation-name 动画帧名称
 2 animation-duration 动画时间
 3 animation-timing-function 动画效果 | ease / linear / ease-in / ease-out / ease-in-out
 4 animation-iteration-count 循环次数
 5 animation-delay 延迟执行
 **/
 animation: ani 2s ease 3 0s;
}

/** 动画帧 | 从 0% ～ 100% 是动画的生命周期 **/
@keyframes ani {
 0% {
  margin-left: 0px;
 }
 50% {
  margin-left: 200px;
 }
 100% {
  margin-left: 0px;
 } 
}
</style>

<div style="width: 100px; height: 100px; background: #a3a7e4;" id="animation"></div>

效果