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. Microsoft.AspNet.Web.Optimization.Bundle的完美替换方案

    Web应用程序中包含大量的样式(css)和脚本(js)文件,这些文件的引用.管理和发布有很多解决方案.在Asp.Net MVC应用程序中,大家最熟悉的解决方案应属Microsoft.AspNet.We ...

  2. php rsa

    <?php $res=openssl_pkey_new(); // Get private key $ok = openssl_pkey_export($res, $privkey); // G ...

  3. WebPack命令执行的时候，其内部处理逻辑是什么

    1.首先webpack发现并没有通过命令的形式,给它指定入口和出口 2.向根目录查找“webpack.config.js”配置文件 3.解析这个配置文件,并得到配置文件中导出的配置对象 4.当拿到配置 ...

  4. hadoop配置项笔记 - streaming

    stream.map.input.ignoreKey 作用:是否忽略key,只传递值. 默认值:false 我的设置:按需要更改 stream.map.input.field.separator st ...

  5. mitmproxy（中间人攻击工具）安装及使用

    一.安装 执行命令,报错 pip install mitmproxy 根据提示安装vc++14后重新执行正常安装. 查看版本号: mitmproxy --version Error: mitmprox ...

  6. OO随笔

    第一次作业——多项式计算 1.自我程序分析 第一次作业是多项式计算,只使用了一个多项式类.第一次接触面向对象的程序,还比较生疏,不是很能理解面向对象的思想.将读入,处理,计算,都放到了main函数中, ...

  7. GC知识记录

    2.关于Minor GC,Major GC与Full GC 1)  Minor GC:即新生代的GC,指发生在新生代的垃圾收集动作.当新生代的Eden区内存不足时,就会触发Minor GC.由于对象创 ...

  8. 第 10 章 容器监控 - 081 - Weave Scope 多主机监控

    除了监控容器,Weave Scope 还可以监控 Docker Host 点击顶部 HOSTS 菜单项,地图将显示当前 host. 与容器类似,点击该 host 图标将显示详细信息 host 当前的资 ...

  9. 移动vue项目，启动错误：Module build failed: Error: No PostCSS Config found in:

    解决办法:在根目录新建postcss.config.js module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 versio ...

  10. java,优先队列的用法

    像C++语言一样,java中,也有包装好的优先队列类PriorityQueue. 用法如下(模板代码): 工作安排问题: 问题描述:设有n件工作分配给n个人,将工作i分配给第j个人所需的费用为cij. ...