用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 相关文章推荐
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
分分钟入门python语言
2018/03/20 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
班级聚会策划书
2014/01/16 职场文书
大学老师推荐信
2014/02/25 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
朋友聚会开场白
2015/06/01 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL