欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

CSS3绘制一个小雨滴,见证它的成长之路

 

前言

先来简单看看效果图,是不是可以不看下面的,自己也可以制作了?

CSS3绘制一个小雨滴,见证它的成长之路

CSS3绘制一个小雨滴,见证它的成长之路

 

第一步

通过border-radio边框弧度来绘制雨滴的形状

.circle{
width: 30px;
height: 30px;
background: red;
border-radius: 0px 18px 31px 18px;
}
CSS3绘制一个小雨滴,见证它的成长之路

CSS3绘制一个小雨滴,见证它的成长之路

 

第二步

通过transform的旋转rotate属性,使其渲染45°

.circle{
width: 30px;
height: 30px;
background: red;
border-radius: 0px 18px 31px 18px;
transform: rotate(45deg);
}
CSS3绘制一个小雨滴,见证它的成长之路

CSS3绘制一个小雨滴,见证它的成长之路

 

第三步

重新配色,通过background渐变属性radial-gradient,添加渐变,具有高光效果

.circle{
width: 30px;
height: 30px;
background: red;
border-radius: 0px 18px 31px 18px;
transform: rotate(45deg);
background: radial-gradient(#f3eeee,#86cbffb5,#86cbff);
}
CSS3绘制一个小雨滴,见证它的成长之路

CSS3绘制一个小雨滴,见证它的成长之路

 

第四步

上面的效果是不是没有什么立体感,我们添加一点点阴影效果,增加立体感。box-shadow添加阴影。

.circle{
width: 30px;
height: 30px;
background: red;
border-radius: 0px 18px 31px 18px;
transform: rotate(45deg);
background: radial-gradient(#f3eeee,#86cbffb5,#86cbff);
-webkit-box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;
}
CSS3绘制一个小雨滴,见证它的成长之路

CSS3绘制一个小雨滴,见证它的成长之路

 

总结

以上就是一个小雨滴成长之路,是不是很简单了,只有动手,什么困难都不再是困难,加油,相信自己可以的。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c50888.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-09-25 22:35 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。