众所周知,在CSS3中产生了诸多优秀的特性,现在就来分享一下我这段时间对于这些特性的效果实践,希望对大家有所启发。
挑战1: 画一个对话框
要画一个对话框,首先来学习做一个三角形。其实非常的简单。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .triangle{ width: 0; height: 0; border: 50px solid; border-color: #f00 #0f0 #ccc #00f; } </style> </head> <body> <div class="triangle"></div> </body> </html> 复制代码
出现如下效果:
// 四个参数对应 :上 右 下 左
border-color: transparent transparent #ccc transparent;
复制代码
于是就只剩下面的三角形部分啦!
web/web前端学习群244-五百-143,有不懂的可以群里交流在线分享课程。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .dialog { position: relative; margin-top: 50px; margin-left: 50px; padding-left: 20px; width: 300px; line-height: 2; background: lightblue; color: #fff; } .dialog::before { content: ''; position: absolute; border: 8px solid; border-color: transparent lightblue transparent transparent; left: -16px; top: 8px; } </style> </head> <body> <div class="dialog">这是一个对话框鸭!</div> </body> </html> 复制代码
效果如下:
挑战2: 画一个平行四边形
利用skew特性,第一个参数为x轴倾斜的角度,第二个参数为y轴倾斜的角度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parallel {
margin-top: 50px;
margin-left: 50px;
width: 200px;
height: 100px;
background: lightblue;
transform: skew(-20deg, 0);
}
</style>
</head>
<body>
<div class="parallel"></div>
</body>
</html>
复制代码
大家可以自己动手试试。 效果如下:
挑战3: 用一个div画五角星
其实也非常的简单,想一想,下面这两个是不是就是一个向上的三角形旋转而来呢?明白了这一点,就可以动手实现啦!
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #star { position: relative; margin: 200px auto; width: 0; height: 0; border-style: solid; border-color: transparent transparent red transparent; border-width: 70px 100px; transform: rotate(35deg); } #star::before { position: absolute; content: ''; width: 0; height: 0; top: -128px; left: -95px; border-style: solid; border-color: transparent transparent red transparent; border-width: 80px 30px; transform: rotate(-35deg); } #star::after { position: absolute; content: ''; width: 0; height: 0; top: -45px; left: -140px; border-style: solid; border-color: transparent transparent red transparent; border-width: 70px 100px; transform: rotate(-70deg); } </style> </head> <body> <div id="star"></div> </body> </html> 复制代码
效果如下:
你没看错,这就是CSS3的威力!
挑战4: 画一个爱心?
看起来好像不容易下手,我们先来分解一下这个心形的结构:
是两个形状相同的部分,对其中一种稍微旋转一下:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .heart { width: 100px; height: 90px; position: relative; margin: 100px auto; } .heart::before { content: ''; position: absolute; width: 50px; height: 90px; background: red; border-radius: 50px 45px 0 0; /* 设置旋转中心 */ transform-origin: 0 100%; transform: rotate(-45deg); } .heart::after { content: ''; position: absolute; width: 50px; height: 90px; top: -35px; left: -35px; background: red; border-radius: 50px 45px 0 0; /* 设置旋转中心 */ transform-origin: 0 100%; transform: rotate(45deg); } </style> </head> <body> <div class="heart"></div> </body> </html> 复制代码
效果如下:
挑战5: 画一个八卦阵
web/web前端学习群244-五百-143,有不懂的可以群里交流在线分享课程。
按照之前的思路,估计你也有想法了,这个时候依然可以用伪类来画出两个小的圆,那么问题来了,像这种颜色不同的同心圆如何用CSS表达呢?
其实很简单,根据border-radius可以影响padding的形状这一规则,外面的一圈用border来表达,而中间利用白色的背景颜色将padding填满,宽度和高度都可以设为0。
另一个问题是:大圆的效果如何实现? 有两种实现思路,一种是用border-left来表示左边的半圆,右边的半圆利用本身的宽度。 第二种方案其实是从《CSS揭秘》获得的灵感,可以利用linear-gradient颜色渐变的属性来调整。
接下来编码实现:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ background-color: #ccc; } /* 大圆部分第一种思路 (注意下面的小圆定位要调整下)*/ /* .bagua{ position: relative; width: 150px; height: 300px; margin: 100px auto; border-radius: 50%; background-color: #fff; border-left: 150px solid #000; } */ /* 大圆部分第二种思路 */ .bagua{ position: relative; width: 300px; height: 300px; margin: 100px auto; border-radius: 50%; background-color: #000; /*从0-50%用背景色,50%开始到100%用#fff */ background-image: linear-gradient(to right, transparent 50%, #fff 50%); } .bagua::before{ content: ''; position: absolute; left: 75px; width: 0; height: 0; padding: 25px; border-radius: 50%; border: 50px solid #000; background: #fff; background-clip: padding-box; } .bagua::after{ content: ''; position: absolute; top: 150px; left: 75px; width: 0; height: 0; padding: 25px; border-radius: 50%; border: 50px solid #fff; background: #000; background-clip: padding-box; } </style> </head> <body> <div class="bagua"></div> </body> </html> 复制代码
效果如下:
挑战6: 超级棒棒糖
这里直接摆出效果吧:
其中利用了两个CSS3中非常重要的属性————线性渐变和径向渐变。 其中圆形部分利用radial-gradient属性,也就是径向渐变,棒子的颜色利用linear-gradient,之前已经用过,也就是线性渐变。
代码参考如下:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .linear{ width: 300px; height: 300px; margin: 20px auto; border-radius: 50%; /* 重复性径向渐变 */ background-image: repeating-radial-gradient(red 0px, green 30px, orange 40px); position: relative; } .linear::after{ content: ''; position: absolute; top: 100%; left: 50%; width: 10px; height: 500px; border-radius: 0 0 10px 10px; /* 线性渐变 */ background-image: linear-gradient(to top, red 20%, orange 40%, lightblue 60%, green 80%); } </style> </head> <body> <div class="linear"></div> </body> </html> 复制代码
挑战7:跳动的字节
先亮出效果:
相当于是一个loading的效果。其实实现起来是非常简单的,这里直接用animation-delay即可控制五个元素的错落感。直接贴上代码,大家可以参考一下:
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>JS Bin</title> <style> .spinner{ margin: 100px auto; width: 50px; height: 50px; text-align: center; font-size: 10px; } .spinner > div{ display: inline-block; background-color: rgb(43, 128, 226); height: 100%; width: 5px; margin-right:1px; animation: bytedance 1s infinite; } .spinner >div:nth-child(2) { background-color: rgb(49, 84, 124); animation-delay: -0.9s; } .spinner >div:nth-child(3) { background-color: rgb(88, 128, 173); animation-delay: -0.8s; } .spinner >div:nth-child(4) { background-color: rgb(88, 128, 173); animation-delay: -0.7s; } .spinner >div:nth-child(5) { background-color: rgb(142, 187, 240); animation-delay: -0.6s; } @keyframes bytedance{ 0%, 40%, 100%{ transform: scaleY(0.4); } 20%{ transform: scaleY(1); } } </style> </head> <body> <div class="spinner"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> 复制代码
挑战8: 涟漪缓动效果
这里显然可以分解成两个圆,仍然是利用animation-delay来实现错落感。 当一个圆缩小为0的时候,另一圆刚好扩展为最大,依次规律循环。
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>Loading</title> <style> .spinner{ width: 60px; height: 60px; position: relative; margin: 100px auto; } .spinner > div{ width: 100%; height: 100%; opacity: 0.6; border-radius: 50%; background-color: lightblue; position: absolute; top: 0; left: 0; animation: loading 1.4s infinite ease-in; } .spinner > div:nth-child(2){ animation-delay: -0.7s; } @keyframes loading{ 0%, 100% { transform: scale(0.0); } 50% { transform: scale(1.0); } } </style> </head> <body> <div class="spinner"> <div></div> <div></div> </div> </body> </html> 复制代码
通过这些有趣的挑战,相信你已经体会到CSS3世界的奇妙了,但是但是,有部分属性并不是所有的浏览器都支持,保守起见,最好在CSS3新特性名之前加上浏览器的前缀,本文侧重效果的实现,兼容这块暂不做处理。web/web前端学习群244-五百-143,有不懂的可以群里交流在线分享课程。
作为前端工程师,平时通常拿CSS做页面布局,甚至有时候会出现很多莫名其妙的bug,于是很多人不太愿意来写CSS,但实际上更多的时候是因为我们了解不够,功夫不到家,才会觉得这个东西不友好,感到不喜欢,当你开始摆脱门外汉的姿态,真正踏进那个广袤的世界,能够对它的各种特点信手拈来,又会情不自禁地爱上这个东西。因此,有时候我们缺少的不是能力,而是一种包容的心态。
这篇文章只是起一个抛砖引玉的作用,希望对你有启发,当然,CSS3的世界远比我们想象中要丰富的多,我之后也会做更多的分享,让大家领略CSS之美。