您现在的位置是：网站首页> 编程资料编程资料

用css3写出气球样式的示例代码css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-04 972人已围观

简介本篇文章主要介绍了用css3写出气球样式的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了用css3写出气球样式的示例代码，分享给大家，具体如下：

气球效果图：

html:

css:

 .balloon{ width: 160px; height: 160px; background: #faf9f9; /*css3 圆角属性*/ border-radius: 50% 50% 25% 50%; /*顺时针旋转45度*/ transform: rotate(45deg); /*盒子阴影 x位移 y位移 羽化 半径 颜色 */ box-shadow: -8px -8px 80px -8px #873940 inset; } /*after before 伪元素*/ .balloon::after{ position: absolute; bottom: 5px; right: 5px; content:""; display: block; /*width: 18px; height: 18px;*/ /*background: #873940;*/ /*transform: rotate(45deg);*/ border: 8px solid transparent; border-right-color: #873940; transform: rotate(45deg); border-radius: 50%; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：利用纯css实现table固定列与表头中间横向滚动的思路和实例表格的头部固定效果通过css及jquery分别实现css固定table表头的实现代码可同时看到表头和表格底部CSS实现表格首行首列固定和自适应窗口的实例代码

下一篇：详解css清除浮动float的七种常用方法总结和兼容性处理CSS清除浮动float的三种方法小结CSS的position定位和float浮动详解CSS使用float属性设置浮动元素的实例教程理解CSS浮动float、定位positioncss浮动(float/clear)使用讲解css浮动(float,clear)通俗讲解经验分享html/css中float浮动的用法实例详解

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢