你不知道的css3(下） -- 用css3为你的组件添加可靠性

时间  2019-11-06
标签 不知道 css3 css 为你 组件 添加 可靠性 栏目 CSS 繁體版
原文   原文链接

写在前面：上一篇介绍了下css3组件实战--绚丽效果篇,那篇文章主要是介绍了几个效果比较风骚但相对用的很少的几个组件，这一次介绍几个平时用的比较多的几个实用组件css

一.鼠标划过光影效果 当鼠标移动到图片上时，有一道白光从图片上划过，犹如刀光剑影。css3

鼠标划过光影效果

1.HTML模板web

咱们要放置一张图片，用一个div包裹起来：chrome

<div class="highlight-box">
	![](images/example.jpg)
</div>
复制代码

2.设置图片CSS样式浏览器

.highlight-box {
	width: 500px;
	height: 300px;
	overflow: hidden;
	position: relative;
}

.highlight-box img {
	width: 100%;
	height: 100%;
}
复制代码

3.接着制做白光，这里要用到强大的伪元素:before选择器：bash

.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);
}
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程