html 绘制气球,用css3写出气球样式

.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 绘制气球,用css3写出气球样式相关推荐

css3三角形兼容_利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
android:怎样用一天时间，写出“飞机大战”这种游戏！（无框架-SurfaceView绘制）...
序言作为一个android开发人员,时常想开发一个小游戏娱乐一下大家,今天就说说,我是怎么样一天写出一个简单的"飞机大战"的. 体验地址:http://www.wandoujia ...
python turtle画气球-使用python在mac上简单弹出气球消息
如何在mac上制作一个简单的弹出气球消息.我不想使用NSUserNotification. 使用python-2.7和osx10.8.5. 弹出窗口不应该有任何按钮.弹出窗口应该会自动出现,显示消息并 ...
妹纸这套路玩的好深，吹泡泡能吹出气球来
究竟证实有些对象是恋慕不来的,大爷再次走上人生的顶峰这孩子莫非是充话费送的,横竖不像是亲生的. 都立秋了气候仍旧这么热,就带妹子出来泅水,看把她给高兴得... 这是哪个平易近族的习俗啊?真是美意难却 ...
纯html5+css3能写出什么惊人效果?
在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video) 离线存储, 新的表单元素, 新的表单控件地理定 ...
java代码实现打气球游戏_javascript+css3开发打气球小游戏完整代码
效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: {margin:0;padd ...
java代码实现打气球游戏_关于javascript和css3开发打气球小游戏的完整代码
这篇文章主要介绍了关于javascript和css3开发打气球小游戏的完整代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一个简单但是印象深刻的小游戏,打气球小游戏的实现代码, ...
纯html5+css3能写出什么惊人效果
纯html5+css3能写出什么惊人效果? 在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video) 离 ...
气球漂浮css3动画js特效
下载地址https://yy123.ink/frontDetail/4161 气球漂浮css3动画特效 dd:

html 绘制气球,用css3写出气球样式

html 绘制气球,用css3写出气球样式相关推荐

最新文章

热门文章