从品牌网站建设到网络营销策划,从策略到执行的一站式服务
本篇内容介绍了“CSS3怎么绘制一个小雨滴动态效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联专业为企业提供蠡县网站建设、蠡县做网站、蠡县网站设计、蠡县网站制作等企业网站建设、网页设计与制作、蠡县企业网站模板建站服务,十余年蠡县做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
第一步
通过border-radio边框弧度来绘制雨滴的形状
.circle{ width: 30px; height: 30px; background: red; border-radius: 0px 18px 31px 18px; }
第二步
通过transform的旋转rotate属性,使其渲染45°
.circle{ width: 30px; height: 30px; background: red; border-radius: 0px 18px 31px 18px; transform: rotate(45deg); }
第三步
重新配色,通过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); }
第四步
上面的效果是不是没有什么立体感,我们添加一点点阴影效果,增加立体感。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怎么绘制一个小雨滴动态效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
咨询相关问题或预约面谈,可以通过以下方式与我们联系
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图