用css3写出气球样式的示例代码


Posted in HTML / CSS onSeptember 11, 2017

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

气球效果图:

用css3写出气球样式的示例代码

html:

<div class="ballon"></div>

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%;

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 #HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 #HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 #HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 #HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 #HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 #HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 #HTML / CSS
You might like
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Django缓存系统实现过程解析
2019/08/02 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
python opencv实现简易画图板
2020/08/27 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
JPA面试常见问题
2016/11/14 面试题
装饰资料员岗位职责
2013/12/30 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书