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>

效果

CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex