CSS3基础利用CSS线性渐变制作磁铁和信封描边效果

利用CSS线性渐变制作磁铁和信封描边效果

CSS线性渐变可以完成很多特殊的效果,比如在本站“从零开始学习CSS线性渐变”一文中曾感受到CSS渐变是很强大很实用的功能,本文主要对线性渐变知识再做一些巩固,并使用渐变完成实验室磁铁图案和信封描边图案的效果,首先回顾一下线性渐变属性的定义方法:

.box {background:linear-gradient(to right,red 50%,blue 50%);}

这里使用了百分比设置了渐变的起始位置,当两种颜色的起始位置设置为相同的时候,会得到一个两色拼接的效果。事实上这里还可以使用具体的长度来设置,例如:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST</title>
<style>
.box {
 width:400px;height:60px;
 position:relative;
 background:linear-gradient(to right,red 200px,blue 200px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

这里定义了一个长400px高60px的矩形,将红蓝渐变的位置设置为中间的200px,便得到一个红蓝拼接的图案,最后效果有点像学校实验室里的磁铁,所以这里顺便给它标上磁铁的两个磁极吧:

.box:before,.box:after {
 position:absolute;
 line-height:60px;
 color:#fff;
 font-size:30px;
 font-weight:bold;
}
.box:before {content:"N";left:30px;}
.box:after {content:"S";right:30px;}

这样以来,一个条形的磁铁图案就做好了,如下图:

CSS制作的条形磁铁.png

既然这样,能不能使用CSS做出U型磁铁呢,当然也是没问题的,本来就是一个学习的过程,所以我现在就试着来做一下吧:

CSS制作实验室U型磁铁图案

首先理清楚思路和步骤,大致的步骤应该是先做个顶部为半圆的矩形,再做一个比它小的顶部为半圆的矩形覆盖上去,就形成U型的图案了,然后使用渐变来改变颜色就可以了,接下来就一步步的实现吧:

1. 在html里定义一个矩形:

<div class="box"></div>

2. 设置该矩形的基本样式,并将左上角和右上角的圆角半径设置为50%:

.box {
 width:400px;height:400px;
 background:#000;
 border-radius:50% 50% 0 0;
 position:relative;
}

此时,得到一个这样的图案:

CSS制作U型磁铁1.png

3. 通过伪元素在该图案上方覆盖一个同样形状但尺寸较小的图案,并将背景设置为白色:

.box:before {
 content:" ";
 width:200px;height:200px;
 position:absolute;
 left:100px;top:100px;
 background:#fff;
 border-radius:50% 50% 0 0;
}

如果这样写的话,得到的图案是下面这样:

CSS制作U型磁铁2.png

所以这里要给内部的图案增加高度,将高度修改为300px就比较合适了,可是这样的话圆角部分就变成了椭圆,所以内部图案的圆角半径定义为具体数值会更方便,所以上面的代码可以改为:

.box:before {
 content:" ";
 width:200px;height:300px;
 position:absolute;
 left:100px;top:100px;
 background:#fff;
 border-radius:100px 100px 0 0;
}

这样以来,整个U型的图案就做好了:

CSS制作U型磁铁3.png

4. 给这个U型图案加上渐变就变成磁铁的样子了,也就是:

.box {background:linear-gradient(to right,red 200px,blue 200px);}

5. 由于伪元素已经使用过了,所以南北极的两个字母就直接采用两个div来定义,为了定位的方便,直接将这两个div放在原本的box里面:

<div class="box">
  <div class="left">N</div>
  <div class="right">S</div> 
</div>

6. 通过定位的方法,将这两个字母放到合适的位置上去:

.left,.right {position:absolute;top:310px;font-size:50px;color:#fff;}
.left {left:30px;}
.right {left:335px;}

现在浏览页面,就发现一个U型磁铁的图案已经完成了:

CSS制作U型磁铁4.png

刚才的示例中,只用到了两种颜色的线性渐变,实现起来非常容易,接下来再来尝试使用一下多个颜色的渐变。

CSS制作彩色信封描边效果

信封描边的效果大致如下图所示,这里的边框有红白蓝三种颜色,所以可以使用重复线性渐变的方法来完成:

CSS信封描边效果.png

1. 定义一个矩形div,其背景设置为45度角“白-红-白-蓝”循环的线性渐变:

.mail {
 position:relative;
 width:500px;height:300px;
 background:repeating-linear-gradient(45deg,
 #f0f0f0 10px,#f0f0f0 20px,
 #58c 20px,#58c 30px,
 #f0f0f0 30px,#f0f0f0 40px,
 #e55 40px,#e55 50px);
}

这里使用了repeating-linear-gradient方法,所以矩形的背景会产生“白-红-白-蓝”的循环交替效果:

CSS红白蓝交替背景.png

2. 在刚才的矩形内再定义一个较小的矩形,设置一个浅色的背景,也就是这样:

<div class="mail">
  <div class="text">HOW ARE YOU</div>
</div>

通过定位,将这个小矩形放到大矩形的上面,露出大矩形四周的部分:

.text {
 position:absolute;
 left:20px;top:20px;
 width:460px;height:260px;
 background:#f9f9f9;
 line-height:260px;
 font-size:40px;
 text-align:center;
}

这样就形成了四周彩色描边的信封效果了,在这里如果将大矩形的渐变背景定义为动画,那么最终可以做出一个变化的彩色边框效果,例如:

@keyframes flash {
 0%,100% {background:repeating-linear-gradient(45deg,
 #f0f0f0 10px,#f0f0f0 20px,
 #58c 20px,#58c 30px,
 #f0f0f0 30px,#f0f0f0 40px,
 #e55 40px,#e55 50px);}
 50% { background:repeating-linear-gradient(45deg,
 #f0f0f0 20px,#f0f0f0 30px,
 #58c 30px,#58c 40px,
 #f0f0f0 40px,#f0f0f0 50px,
 #e55 50px,#e55 60px);}
}

CSS信封边框.gif

这里我没有仔细计算偏移的距离,所以效果并不完美,实际操作中可以通过计算偏移的距离实现“无缝”的动画。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/145.html