1、气球

2、泳圈

1、2两图实现代码分别如下：

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>气球特效</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

    *{margin:0;padding: 0;}

    body{position: relative; overflow: hidden; background: #ccc;}

    .balloon{

        display: inline-block;

        position: absolute;

        width: 160px;

        height: 160px;

        background: #faf9f9;

        border-radius: 160px 160px 64px 160px;

        transform:rotate(45deg);

        /*        盒子阴影  纵向移动 横向移动 羽化 半径  颜色  内外切换*/

        box-shadow:8px 8px 80px 8px #873940 inset;

    }

    .balloon::after{

        position: absolute;

        bottom: 0;

        right: 0;

        content:'';

        width: 0;

        height: 0;

        border:8px solid transparent;

        border-right-color:#873940;

        transform: rotate(45deg);

        border-radius: 16px;

    }

</style>

</head>

<body>

    <div class="balloon"></div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>游泳圈静态</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

    *{margin:0;padding: 0;}

    body{position: relative; overflow: hidden; background: #ccc;}

    .youyongquan{

        position: relative;

        width: 200px;

        height: 160px;

        padding: 50px 50px 50px 50px;

        margin:0 auto;

        background: #faf9f9;

        border-radius: 50% 50% 50% 50%;

        box-shadow:8px 8px 80px 8px #873940 inset;

    }

    .quan2{

        width: 160px;

        height: 120px;

        margin:0 auto;

        background: #faf9f9;

        border-radius: 50% 50% 50% 50%;

        box-shadow:8px 8px 80px 8px #873940;

    }

</style>

</head>

<body>

    <div class="youyongquan">

        <div class="quan2"></div>

    </div>

</body>

</html>

CSS3简单画出3d图形的更多相关文章

  1. css3 content画出各种图形

    原链接:http://www.phpjz.cn/web/201311/1700.html 之前看到一些网站用户content这个词,觉得很奇怪,原来是css3新增的一个样式,发现还挺好用的,特别是用移 ...

  2. python文本挖掘输出权重，词频等信息，画出3d权重图

    # -*- coding: utf-8 -*- from pandas import read_csv import numpy as np from sklearn.datasets.base im ...

  3. opengl画不出直线 线段 坐标轴 却能画出其他图形的坑

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/12054507.html 好多次都是画坐标轴的三条直线画不出来,虽然最后都解决了  但是还是耽误 ...

  4. Python画各种 3D 图形Matplotlib库

    回顾 2D 作图 用赛贝尔曲线作 2d 图.此图是用基于 Matplotlib 的 Path 通过赛贝尔曲线实现的,有对赛贝尔曲线感兴趣的朋友们可以去学习学习,在 matplotlib 中,figur ...

  5. CSS3实现32种基本图形

    CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...

  6. CSS3实现二十多种基本图形

    CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...

  7. 使用OpenGL ES绘制3D图形

    如果应用定义的顶点不在同一个平面上,并且使用三角形把合适的顶点连接起来,就可以绘制出3D图形了. 使用OpenGL  ES绘制3D图形的方法与绘制2D图形的步骤大致相同,只是绘制3D图形需要定义更多的 ...

  8. 用初中代数结合python画出正方形

    在屏幕上打印类似下面的图形: 常规画正方形的算法: 这几乎是初学所有计算机语言时都会遇到的问题.算法都大致类似,就是找出打印规律然后用计算机语句表达出来.最常规的算法是:输入数字n就打印n行,首行和尾 ...

  9. 160419、CSS3实现32种基本图形

    CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...

随机推荐

  1. 洛谷 P1027 【Car的旅行路线】

    题目描述 又到暑假了,住在城市A的Car想和朋友一起去城市B旅游.她知道每个城市都有四个飞机场,分别位于一个矩形的四个顶点上,同一个城市中两个机场之间有一条笔直的高速铁路,第i个城市中高速铁路的单位里 ...

  2. 网络流(dinic算法)

    网络最大流(dinic) 模型 在一张图中,给定一个源点s,给定汇点t,点之间有一些水管,每条水管有一个容量,经过此水管的水流最大不超过容量,问最大能有多少水从s流到t(s有无限多的水). 解法 di ...

  3. ssh连接所生成的known_hosts出现的问题

    问题现场及解析 用OpenSSH的人都知ssh会把你每个你访问过计算机的公钥(public key)都记录在~/.ssh/known_hosts.当下次访问相同计算机时,OpenSSH会核对公钥.如果 ...

  4. P2170 选学霸

    传送门 思路: ① 可以把每个学生都看作点,而那些实力相同的学生就处在同一个连通块内,因为连通块内的同学要么都取,要么不取,所以可以将连通块缩成一个点.只需用并查集维护每个连通块的大小. ② 接着采取 ...

  5. clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素. offsetHeight:包括pa ...

  6. (8)socketserver并发

    (1)client客户端: import socket sk = socket.socket() sk.connect( ("127.0.0.1",9000)) while Tru ...

  7. Hadoop InputFormat 输入文件分片

    1. Mapper 与 Reducer 数量 对于一个默认的MapReduce Job 来说,map任务的数量等于输入文件被划分成的分块数,这个取决于输入文件的大小以及文件块的大小(如果此文件在 HD ...

  8. 运维案例 | Exchange2010数据库损坏的紧急修复思路

    ​​关注嘉为科技,获取运维新知 Exchange后端数据库故障,一般都会是比较严重的紧急故障,因为这会直接影响到大面积用户的正常使用,而且涉及到用户数据.一旦遇到这种级别的故障,管理员往往都是在非常紧 ...

  9. (详细)华为V9 DUK-AL20的usb调试模式在哪里打开的方法

    当我们使用PC通过数据线链接到安卓手机的时候,如果手机没有开启USB开发者调试模式,PC则没办法成功识别我们的手机,有时我们使用的一些功能较好的软件好比以前我们使用的一个软件引号精灵,老版本就需要打开 ...

  10. 现代 PHP 新特性 —— 生成器入门（转）

    原文链接:blog.phpzendo.com PHP 在 5.5 版本中引入了「生成器(Generator)」特性,不过这个特性并没有引起人们的注意.在官方的 从 PHP 5.4.x 迁移到 PHP ...