CSS制作图形

firim 发布于2019-08-30 15:55 / 1554人阅读

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

气泡三角形


      
        
        利用 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、旋转实现

GPU云服务器云服务器云服务器图形制作 css制作三维图形生成图形

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

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

基于单个 Div 的 CSS 绘图

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

booster 2019-08-01 14:40 评论0 收藏0
svg系列：1.svg基础知识 & 不一样的svg动画世界

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

wwolf 2019-08-02 16:10 评论0 收藏0
svg系列：1.svg基础知识 & 不一样的svg动画世界

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

DirtyMind 2019-08-23 16:30 评论0 收藏0
css3之图形绘制

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

Null 2019-04-23 13:28 评论0 收藏0
使用 GreenSock 来制作 SVG 动画

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

everfly 2019-08-22 10:49 评论0 收藏0