css组件实战--实用组件篇
写在前面：上一次介绍了下css3组件实战--绚丽效果篇,那篇文章主要是介绍了几个效果比较风骚但相对用的不多的几个组件，这一次介绍几个平时用的比较多的几个实用组件
一.鼠标划过光影效果
当鼠标移动到图片上时，有一道白光从图片上划过，犹如刀光剑影。
鼠标划过光影效果
1.HTML模板
我们要放置一张图片，用一个div包裹起来：
<div class="highlight-box">
</div>
2.设置图片CSS样式
.highlight-box {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.highlight-box img {
width: 100%;
height: 100%;
}
3.接着制作白光，这里要用到强大的伪元素:before选择器：
.highlight-box:before {
display: block;
/*注意这里top和left，让白光移动到图片左上角，
后续的划过动画也是依靠这两个属性*/
top: -200%;
left: -100%;
/*定义白光的宽高*/
width: 50%;
height: 300%;
/*旋转角度，你也可以调整*/
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
/*使用渐变来实现白光*/
background: -webkit-linear-gradient(left, rgba(255, 255, 255, .05) 20%,
rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .05) 100%);
background: linear-gradient(left, rgba(255, 255, 255, .05) 20%,
rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .05) 100%);
content: '';
z-index: 2;
position: absolute;
}
这里使用渐变（linear-gradient）来实现白光效果，同时为了斜向划过，使用transform: rotate(45deg)将其旋转45度。
上面的height、width、top和left，你也可以使用具体的像素值，建议采用百分比。
4.最后一步，让白光动起来：
.highlight-box:hover:before {
animation: cross 1s linear;
}
@keyframes cross {
0% {
top: -200%;
left: -100%;
}
100% {
top: -50px;
left: 100%;
}
}
需要改变的只是top和left的值，也就是让白光从左上角向右下角移动。
二.仿loading动态效果
一般loading是用图片来实现的，这里使用纯css来仿写这个图片效果。
仿loading动态效果
1.HTML模板
我们需要一个div，里面放置子元素。
<div class="loader circle-line small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
2.设置CSS样式
先制作静态的loading
其实，是通过转换不同span之间的位置和角度来实现：
.loader { position: relative; width: 5rem; height: 5rem;}.loader.circle-line span { position: absolute; display: inline-block; width: 1.5rem; height: .5rem; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; background: red;}.loader.circle-line span:nth-child(1) { top: 50%; left: 0; margin-top: -.25rem;}.loader.circle-line span:nth-child(2) { top: 1rem; left: .5rem; -webkit-transform: rotate(45deg); transform: rotate(45deg);}.loader.circle-line span:nth-child(3) { left: 50%; top: .5rem; margin-left: -.75rem; -webkit-transform: rotate(90deg); transform: rotate(90deg);}.loader.circle-line span:nth-child(4) { right: .5rem; top: 1rem; -webkit-transform: rotate(145deg); transform: rotate(145deg);}.loader.circle-line span:nth-child(5) { left: 3.5rem; top: 50%; margin-top: -.25rem; -webkit-transform: rotate(180deg); transform: rotate(180deg);}.loader.circle-line span:nth-child(6) { bottom: 1rem; right: .5rem; -webkit-transform: rotate(-145deg); transform: rotate(-145deg);}.loader.circle-line span:nth-child(7) { left: 50%; bottom: .5rem; margin-left: -15px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}.loader.circle-line span:nth-child(8) { bottom: 1rem; left: .5rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
静态的loading已经有了，现在我们需要添加动画让其真实地动起来：
创建一个名为circle-line的动画（改变透明度）：
@keyframes circle-line {
0% {
opacity: .05;
}
100% {
opacity: .7;
}
}
@-webkit-keyframes circle-line {
0% {
opacity: .05;
}
100% {
opacity: .7;
}
}
然后给每一个线条添加circle-line动画：
.loader.circle-line span {
position: absolute;
display: inline-block;
width: 1.5rem;
height: .5rem;
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
background: #1ABC9C;
opacity: .05;
-webkit-animation: circle-line 1s ease infinite;
animation: circle-line 1s ease infinite;
}
要实现不同线条的间隔动画，我们只需添加animation-delay延迟时间：
.loader.circle-line span:nth-child(1) {
top: 50%;
left: 0;
margin-top: -.25rem;
-webkit-animation-delay: .13s;
animation-delay: .13s;
}
.loader.circle-line span:nth-child(2) {
top: 1rem;
left: .5rem;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation-delay: .26s;
animation-delay: .26s;
}
.loader.circle-line span:nth-child(3) {
left: 50%;
top: .5rem;
margin-left: -.75rem;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation-delay: .39s;
animation-delay: .39s;
}
.loader.circle-line span:nth-child(4) {
right: .5rem;
top: 1rem;
-webkit-transform: rotate(145deg);
transform: rotate(145deg);
-webkit-animation-delay: .52s;
animation-delay: .52s;
}
.loader.circle-line span:nth-child(5) {
left: 3.5rem;
top: 50%;
margin-top: -.25rem;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation-delay: .65s;
animation-delay: .65s;
}
.loader.circle-line span:nth-child(6) {
bottom: 1rem;
right: .5rem;
-webkit-transform: rotate(-145deg);
transform: rotate(-145deg);
-webkit-animation-delay: .78s;
animation-delay: .78s;
}
.loader.circle-line span:nth-child(7) {
left: 50%;
bottom: .5rem;
margin-left: -15px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-animation-delay: .91s;
animation-delay: .91s;
}
.loader.circle-line span:nth-child(8) {
bottom: 1rem;
left: .5rem;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
circle-line动画的周期时间正好是最后一个span的延迟时间。
其他加载Loading也是同样的原理，先是定义好静态布局，然后实现一个动画（透明度变化、高度变化、大小变化等），最后将动画添加给给每个子项，再添加动画延迟时间即可。
三.纸片阴影
纸片阴影
1.要实现实现阴影，先来了解一下box-shadow属性：
box-shadow:[inset] x-offset y-offset blur-radius spread-radius color;
参数说明：
阴影类型：可选；如省略，默认是外阴影；它有且只有一个值“inset”，表示为内阴影；
x-offset：阴影水平偏移量，它可以是正负值。如为正值，则阴影在元素的右边；如其值为负值，则阴影在元素的左边；
y-offset：阴影垂直偏移量，它可以是正负值。如为正值，则阴影在元素的底部；如其值为负值时，则阴影在元素的顶部；
blur-radius：阴影模糊半径，可选，它只能是正值。如值为0，则阴影不具有模糊效果；它的值越大，阴影的边缘就越模糊；
spread-radius：阴影扩展半径，可选，它可以是正负值。如为正值，则扩大阴影的尺寸；如为负值，则缩小阴影的尺寸；（记住这个属性值，制作单边阴影的关键）
color：阴影颜色，可选，如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致。（经测试，在Safari上是半透明的，在chrome、firefox、ie上都是黑色的）。不推荐省略颜色值。
注意：颜色（color）也可以放在最前面的，inset值也可以放在最后面；阴影并不会占据空间，也就是说它不会阴影布局。
2.HTML模板
只需一个div：
<div class="box shadow">纸片阴影</div>
3.设置CSS样式
之前也已经已经介绍过box-shadow属性的用法
// 四周阴影
.shadow {
box-shadow:0 0 25px 0px rgba(0,0,0,0.22);
}
// 左上邻边阴影
.shadow-top-left {
box-shadow:-10px -10px 25px 0px rgba(0,0,0,0.22);
}
// 右上邻边阴影
.shadow-top-right {
box-shadow:10px -10px 25px 0px rgba(0,0,0,0.22);
}
// 右下邻边阴影
.shadow-bottom-right {
box-shadow:10px 10px 25px 0px rgba(0,0,0,0.22);
}
// 左下邻边阴影
.shadow-bottom-left {
box-shadow:-10px 10px 25px 0px rgba(0,0,0,0.22);
}
// 顶部单边阴影
.shadow-top {
box-shadow:0 -15px 10px -10px rgba(0,0,0,.22);
}
// 右侧单边阴影
.shadow-right {
box-shadow:15px 0 10px -10px rgba(0,0,0,.22);
}
// 底部单边阴影
.shadow-bottom {
box-shadow:0 15px 10px -10px rgba(0,0,0,.22);
}
// 左侧单边阴影
.shadow-left {
box-shadow:-15px 0 10px -10px rgba(0,0,0,.22);
}
注意：当实现单边阴影时，第四个数值都是负数，而且水平偏移量（第一个数值）或垂直偏移量（第二个数值）的绝对值都会比第四个数值的绝对值大。
四.纯css版tooltip
我们平时用到的提示框tooltip大部分都是用js去写的，其实用css3不需要一句js同样可以达到这个效果的。
2.HTML模板
div和button都可，这里的重点是data-tooltip和data-direction这两个自定义属性。
<button class="btn btn-tooltip tooltip"
data-tooltip="在下方" data-direction="down">
在下方
</button>
纯css版tooltip
3.设置CSS样式
首先还是我们之前大量使用过的伪元素来写出hover效果显示的工具栏
image.png
.tooltip
{
position: relative;
}
.tooltip:before
{
position: absolute;
content: '';
border: 5px solid transparent;
}
.tooltip:after
{
font-size: 14px;
line-height: normal;
position: absolute;
padding: 5px 10px;
/* 在 content里使用HTML模板里的data-tooltip属性*/
content: attr(data-tooltip);
white-space: nowrap;
color: #fff;
border-radius: 3px;
background: #383838;
}
默认先用 visibility属性隐藏tooltip
.tooltip:before,
.tooltip:after
{
visibility: hidden;
opacity: 0;
z-index: 1000000;
transition: .3s ease;
transition-delay: 0ms;
/* 阻止tooltip元素不会成为鼠标事件的target */
pointer-events: none;
}
然后hover让tooltip显示：
.tooltip:hover:before,
.tooltip:hover:after
{
visibility: visible;
opacity: 1;
}
最后加点动画：
[data-direction='down']:before
{
top: -webkit-calc(100% - 5px);
top: -moz-calc(100% - 5px);
top: calc(100% - 5px);
border-bottom-color: #383838;
}
[data-direction='down']:after
{
top: -webkit-calc(100% + 5px);
top: -moz-calc(100% + 5px);
top: calc(100% + 5px);
}
[data-direction='down']:before,
[data-direction='down']:after
{
left: 50%;
-webkit-transform: translate3d(-50%,0,0);
-moz-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
}
