登陆

「应战题」8个风趣的CSS3作用应战

admin 2019-10-31 302人围观 ,发现0个评论

文章出处:兴趣CSS3作用应战小汇总

应战1: 画一个对话框

要画一个对话框,首先来学习做一个三角形。其实十分的简略。









.triangle{
width: 0;
height: 0;
border: 50px solid;
border-color: #f00 #0f0 #ccc #00f;
}






呈现如下作用:

估量你现已知道border的构成原理,然后只需改一行代码:

// 四个参数对应 :上 右 下 左
border-color: transparent transparent #ccc transparent;

所以就只剩下面的三角形部分啦!

现在来使用三角形技能做对话框:







Document

.dialog {
position: relative;
margin-top: 50px;
margin-left: 50px;
padding-left: 20px;
width: 300px;
line-height: 2;
background: lightblue;
color: #ff「应战题」8个风趣的CSS3作用应战f;
}
.dialog::before {
content: '';
position: absolute;
border: 8px solid;
border-color: transparent lightblue transparent transparent;
left: -16px;
top: 8px;
}



这是一个对话框鸭!



作用如下:

应战2: 画一个平行四边形

使用skew特性,第一个参数为x轴歪斜的视点,第二个参数为y轴歪斜的视点。







Document

.parallel {
margin-top: 50px;
margin-left: 50px;
width: 200px;
height: 100px;
background: lightblue;
transform: skew(-20deg, 0);
}






咱们可以自己着手试试。 作用如下:

应战3: 用一个div画五角星

关于这个五角星而言,咱们可以拆分红三个部分,想一想是不是这样?

那咱们现在就来完成这三个部分。 关于最上面的三角,咱们在第一个部分现已完成了三角形,这个不难。可是下面的两个怎么完成呢?

其实也十分的简略,想一想,下面这两个是不是便是一个向上的三角形旋转而来呢?理解了这一点,就可以着手完成啦!







Document

#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);
}






作用如下:

你没看错,这便是CSS3的威力!

应战4: 画一个爱心

看起来如同不容易下手,咱们先来分化一下这个心形的结构:

是两个形状相同的部分,对其间一种略微旋转一下:

现在就来结构这个部分:







Document

.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);
}






作用如下:

相同一个div完成了这个作用,是不是十分酷炫呢:)

重视我的头条号,共享更多的技能学习文章,我自己是一名从事了多年开发的web前端老程序员,现在辞去职务在做自己的web前端私家定制课程,今年年初我花了一个月收拾了一份最适合2019年学习的web前端学习干货,各种结构都有收拾,送给每一位前端小伙伴,想要获取的可以重视我的头条号并在后台私信我:前端,即可免费获取。

应战5: 画一个八卦阵

仍是来分化它的结构:

依照之前的思路,估量你也有主意了,这个时分仍然可以用伪类来画出两个小的圆,那么问题来了,像这种色彩不同的同心圆怎么用CSS表达呢?

其实很简略,依据border-radius可以影响padding的形状这一规矩,外面的一圈用border来表达,而中心使用白色的布景色彩将padding填满,宽度和高度都可以设为0。

另一个问题是:大圆的作用怎么完成? 有两种完成思路,一种是用border-left来表明左面的半圆,右边的半圆使用自身的宽度。 第二种计划其实是从《CSS揭秘》取得的创意,可以使用linear-gradient色彩突变的特色来调整。

接下来编码完成:







Document

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;
wi「应战题」8个风趣的CSS3作用应战dth: 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;
}






作用如下:

应战6: 超级棒棒糖

这儿直接摆出作用吧:

其间使用了两个CSS3中十分重要的特色————线性突变和径向突变。 其间圆形部分使用radial-gradient特色,也便是径向突变,棒子的色彩使用linear-gradient,之前现已用过,也便是线性突变。

代码参阅如下:







Document

.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%);
}






应战7:跳动的字节

适当所以一个loading的作用。其实完成起来是十分简略的,这儿直接用animation-delay即可操控五个元素的参差感。直接贴上代码,咱们可以参阅一下:





JS Bin

.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);
}
}












应战8: 涟漪缓动作用

这儿明显可以分化成两个圆,仍然是使用animation-delay来完成参差感。 当一个圆缩小为0的时分,另一圆刚好扩展为最大,顺次规则循环。





Loading

.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;
}
「应战题」8个风趣的CSS3作用应战
@keyframes load「应战题」8个风趣的CSS3作用应战ing{
0%, 100% {
transform: scale(0.0);
}
50% {
transform: scale(1.0);
}

}









经过这些风趣的应战,相信你现已体会到CSS3国际的美妙了,可是可是,有部分特色并不是一切的浏览器都支撑,保存起见,最好在CSS3新特性名之前加上浏览器的前缀,本文偏重作用的完成,兼容这块暂不做处理。

作为前端工程师,平常一般拿CSS做页面布局,乃至有时分会呈现许多不可思议的bugactually,所以许多人不太乐意来写CSS,但实际上更多的时分是因为咱们了解不行,功夫不到家,才会觉得这个东西不友好,感到不喜欢,当你开端脱节外行人的姿势,真实踏进那个广袤的国际,可以对它的各种特色信手拈来,又会情不自禁地爱上这个东西。因而,有时分咱们短少的不是才能,而是一种容纳的心态。

请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP