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

互联网   发布时间:2017-09-11 16:28:15   作者:花花0825   我要评论

本篇文章主要介绍了用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%;

}

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

相关文章

  • CSS3截取字符串实例代码【推荐】

    截取字符串一般是用js或者后台语言来实现,其实使用CSS也是可以实现此效果的。下面通过一段实例代码给大家介绍CSS3截取字符串的方法,需要的朋友参考下吧
    2018-06-07
  • CSS3 清除浮动的方法示例

    这篇文章主要介绍了CSS3 清除浮动的方法示例的相关资料,通过本文,让大家可以明白清除浮动的原理和几种方法,最后得出一种本文认为最好用的方法,感兴趣的小伙伴们可以参考
    2018-06-01
  • CSS3之transition实现下划线的示例代码

    这篇文章主要介绍了CSS3之transition实现下划线的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-30
  • CSS3实现可翻转的hover效果

    本文给大家分享基于css3实现可翻转的hover效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-23
  • 详解如何在css中引入自定义字体(font-face)

    本篇文章主要介绍了详解如何在css中引入自定义字体(font-face),能将自定义的字体添加到网页中,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看
    2018-05-17
  • CSS3实现多样的边框效果

    本文通过实例代码给大家介绍了基于csss3实现多样的边框效果,有半透明边框,多重边框,边框内圆角,具体效果图和实现代码大家参考下本文
    2018-05-04
  • 纯css3制作煽动翅膀的蝴蝶的示例

    这篇文章主要介绍了纯css3制作煽动翅膀的蝴蝶的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-23
  • CSS3使用transition属性实现过渡效果

    CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的动画。下面通过本文给大家介绍CSS3使用transition属性实现过渡效果,需要的朋友参考下本文
    2018-04-18
  • CSS3 二级导航菜单的制作的示例

    这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-02
  • CSS3实现全景图特效示例代码

    这篇文章主要介绍了CSS3实现全景图特效示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-26

最新评论