资讯专栏INFORMATION COLUMN

CSS制作图形

XiNGRZ / 679人阅读

摘要:气泡三角形利用的特性实现梯形梯形利用伪类加旋转透视实现爱心太极图折角

气泡三角形

利用 border 的 transparent 特性实现

.bubbly

梯形

梯形

利用伪类加旋转透视实现

.trapezoid

爱心

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
太极图

#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}

#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}
折角

利用切角、伪类、渐变、旋转实现

.corner

混合模式背景图

利用渐变实现

.colorful-stripe

多云

利用线性渐变、阴影、缩放实现

.cloudy

阴影实现多云天气图案

多云(cloudy2)(单标签实现) 利用线性渐变、阴影、缩放实现

.cloudy2

阴影实现雨天天气图案

雨(rainy) 利用线性渐变、阴影、缩放实现

.rainy

彩虹天气图案

彩虹(rainbow) 利用border、box-shadow 实现

.rainbow

chrome 浏览器图标

Chrome(单标签实现) 利用渐变实现

IE 浏览器图标

IE(单标签实现) 利用渐变、多重阴影实现

safari 浏览器图标

safari(单标签实现) 利用渐变、border、旋转实现

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53559.html

相关文章

  • 基于单个 Div 的 CSS 绘图

    摘要:原文译文基于单个的绘图译者前端外刊评论译注通读本文,强烈地感受到了技术与艺术的结合赞作者的这句话限制你的可选项,会让你重新评估手头上已有的工具。不过若能有效地使用,我们的绘图可以包含很多令人惊叹的细节。 原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 绘图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺...

    booster 评论0 收藏0
  • svg系列:1.svg基础知识 & 不一样的svg动画世界

    摘要:知识扫盲简介,可缩放矢量图形,具有放大缩小不失真的特性,可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画,而不是其他技术,那可以告诉你以下几点本质上是一种图形绘制技术,广泛用于矢量图绘制,适用于多数商业,卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics),可缩放矢量图形,具有放大缩小不失真的特性,可以用来...

    wwolf 评论0 收藏0
  • svg系列:1.svg基础知识 & 不一样的svg动画世界

    摘要:知识扫盲简介,可缩放矢量图形,具有放大缩小不失真的特性,可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画,而不是其他技术,那可以告诉你以下几点本质上是一种图形绘制技术,广泛用于矢量图绘制,适用于多数商业,卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics),可缩放矢量图形,具有放大缩小不失真的特性,可以用来...

    DirtyMind 评论0 收藏0
  • css3之图形绘制

    摘要:由于近期的项目中出现了不规则的边框和图形,所以重新温习一下的图形绘制。。。样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣以下几个例子主要是运用了中伪元素等属性来完成的,我们先了解下它们的基本原理。由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制。。。样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中b...

    Null 评论0 收藏0
  • 使用 GreenSock 来制作 SVG 动画

    摘要:在制作动画方面也非常强悍,并且还专门提供了用于加强动画制作的相关插件,比如。一个有趣的的动画效果就完成了,代码地址使用配合来制作动画效果如此简单。原文地址,根据自己理解整理了下这个教程,主要是来学习下使用来制作动画效果的思路和方法。 这是我的一个关于SVG的应用的技术分享网站svgtrick.com,会同步一些文章到这里来,更多关于SVG技术应用可以去网站看看。 最近从Dribbble...

    everfly 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<