正文

利用css制作图形效果

Kasmine  2022-02-07  142

关键词：

前言

　　关于如何使用CSS来制作图形，比如说圆形，半圆形，三角形等的相关教程还是挺多的，今天我主要想解释一下里面一些demo的实现原理，话不多说，开始吧

以下所有内容只使用一个HTML元素。任何类型的CSS，只要它至少在一个浏览器中支持。

一.　　实现一个心形

#heart { 
            position: relative; 
            width: 100px; 
            height: 90px; 
        } 
        #heart:before{ 
            position: absolute; 
            content: ""; 
            left: 50px; 
            top: 0; 
            width: 50px; 
            height: 80px; 
            background: red; 
            -moz-border-radius: 50px 50px 0 0;
            -webkit-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; 
    position: absolute; 
            content: ""; 
            top: 0; 
            width: 50px; 
            height: 80px; 
            background: red; 
            -moz-border-radius: 50px 50px 0 0;
            -webkit-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: 100% 100%; 
                -moz-transform-origin: 100% 100%; 
                -ms-transform-origin: 100% 100%; 
                -o-transform-origin: 100% 100%; 
                transform-origin :100% 100%; 
            }

效果

原理：这个心形主要是由两部分交叠组成

border-radius: 50px 50px 0 0;
/* 等价于 */
border-top-left-radius: 50px;
border-top-right-radius: 50px;

实现如下效果

再利用transfrom变换得到如下，再进行交叠组成。

tip：合理地利用伪元素以及css border-radius属性以及transform变换属性

二. 饼图

即使是最简单的只有两种颜色的形式，用Web技术创建也并不简单

尽管这个东西并不像它曾经看起来那么难以实现，但是也没有什么直接并且简单的方法。但是，现在已经有很多更好、更易于维护的方式来实现它

.pie{
  width:50px;
  height:50px;
  position:relative;
  background: linear-gradient(90deg,#eee 50%,green 0); 
  border-radius:50%
}

第一步：先画一个圆（饼图特效颜色为 green）

第二步：利用伪元素添加一个蒙版

.pie::before{
  position:absolute;
  content:'';
  width:50%;
  height:100%;
  background: #eee;
/* 当饼图比例大于一半的时候 */
/*  background: green; */
  border-radius:50px 0 0 50px; 
}

第三步：利用transform的变换改变角度，实现自己需要的角度

  transform:rotate(20deg);
  transform-origin:100% 50%;

注：伪元素的旋转变换中心应该设置为圆心

结束语

　　暂时先说明了两个图形，都是采用CSS或者部分采用了CSS3的属性制作出来的，大家还可以点击CSS3- Tricks 提供的《The Shapes of CSS》里面展示了十多种图形的制作方法。由于部分图形效果使用了CSS3的部分属性，所以在ie的效果可能无法显示。使用css制作三角和圆有效果应用还是很多了，特别是用来制作tips效果

css制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

...http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单，方便大家急用时有地方可查。别的不多说了，直接看代码。... 查看详情

利用css3d效果制作简易旋转木马效果

...每根柱子的旋转角度摆放到3d空间的置顶位置即可。然后利用css的animate属性让3d舞台无线旋转，就有了一简易的旋转木马效果。感兴趣的可以看一下，可以把代码中的图片路径改为自己的图片地址就行了。直接可用。代码如下：&... 查看详情

纯css制作冒泡提示框

...：http://www.ido321.com/1214.html前两天翻译了一篇文章，关于利用css的border属性制作基本图形：http://www.ido321.com/1200.html在此基础上。今天分享一篇文章给大家。假设利用CSS制作冒泡提示框。先看2张效果图：CSS：/*对话气泡使用方法：... 查看详情

利用css3制作网页动画

如何在网页中实现动画效果动态图片flashjavascriptcss3变形是一些效果的集合如平移旋转缩放倾斜效果每个效果都可以称为变形（transfrom）它们可以分别操控元素发生平移、旋转、缩放、倾斜等变换语法transform：[transfrom-function]*;变... 查看详情

利用css3制作毛玻璃的效果

忙里偷闲，最近又在看许多比较酷炫的效果。现在基于jquery的插件比较多，但是很多插件的兼容性不是太好，所以原生的才是王道。在日常当中，毛玻璃已经不常见了，那是一个很久远年代的东西了。诺，下面就是毛玻璃：哈哈... 查看详情

利用css3制作网页动画的解析

一.CSS3变形CSS3变形是一些效果的集合如平移、旋转、缩放、倾斜效果每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化二.CSS3位移:translate <styletype="text/css"> lia:hover... 查看详情

利用噪声构建美妙的css图形

在平时，我非常喜欢利用CSS去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个10x10的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：虽然利用了... 查看详情

第九章利用css3制作网页动画

一.CSS3变形 CSS3变形是一些效果的集合如平移、旋转、缩放、倾斜效果每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化 &nb... 查看详情

利用css+原生js制作简易钟表

利用css+原生js制作简单的钟表。效果如下所示实现该效果，分三大块：html、javascript、csshtml部分html部分比较简单，定义一个clock的div，内部有原点、时分秒针、日期以及时间，至于钟表上的刻度、数字等元素，因为量比较多... 查看详情

利用css3制作网页动画

一.CSS3变形 CSS3变形是一些效果的集合如平移、旋转、缩放、倾斜效果 &n 查看详情

利用css3中animation和@key-frames制作以下效果,实现红色div在距离顶部？

参考技术A1.注意：这个CSS的animation和@keyframes一定要在元素设置了有效定位：fixed；absolute；relative时才能起作用！！！查看详情

使用css3制作各种形状

...以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。圆形圆形在设置CSS时要设置宽度和高... 查看详情

利用css3的animation实现点点点loading动画效果

box-shadow实现的打点效果简介box-shadow理论上可以生成任意的图形效果，当然也就可以实现点点点的loading效果了。实现原理html代码，首先需要写如下html代码以及class类名：订单提交中<spanclass="dotting"></span>css代码.dotting{disp... 查看详情

ppt技巧操作：ppt如何制作三维立体图形

...的中心旋转效果，其实这个动画效果操作起来很简单的，利用幻灯片里面的“轮子”动画就可以轻松实现，下面就来给大家简单介绍一下设置过程。第一步：打开幻灯片，然后按住Shift键盘绘制一个圆形。第二步：然后在“动画... 查看详情

图解css3制作圆环形进度条的实例教程

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程首先，当有人说你能不能做一个圆形进度条... 查看详情

css3制作炫酷导航栏效果

今天主要利用hover选择器。鼠标滑过查看效果。一。普通导航栏HomeContentServiceTeamContact 对于这种普通的导航栏，只是鼠标滑过的时候颜色会变，所以思路变得很简单。（1）使用ul标签布局（2）鼠标经过事件<divid="demo1"&g... 查看详情

环形文字+css3制作图形+animation无限正反旋转的一个小demo

少啰嗦，先看效果图：（注意文字和太极图均可旋转，太极图使用css写成的！）css：/*太极图css--*/.Taijimargin:100px; width:192px; height:96px; background-color:#eee; border-color:#333; border-style:solid; border-width:4px4px100px4px; bo 查看详情

css实现各种形状

...以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。圆形要使用CSS来制作一个圆... 查看详情