CSS3简单画出3d图形
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图形的更多相关文章
- css3 content画出各种图形
原链接:http://www.phpjz.cn/web/201311/1700.html 之前看到一些网站用户content这个词,觉得很奇怪,原来是css3新增的一个样式,发现还挺好用的,特别是用移 ...
- python文本挖掘输出权重,词频等信息,画出3d权重图
# -*- coding: utf-8 -*- from pandas import read_csv import numpy as np from sklearn.datasets.base im ...
- opengl画不出直线 线段 坐标轴 却能画出其他图形的坑
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/12054507.html 好多次都是画坐标轴的三条直线画不出来,虽然最后都解决了 但是还是耽误 ...
- Python画各种 3D 图形Matplotlib库
回顾 2D 作图 用赛贝尔曲线作 2d 图.此图是用基于 Matplotlib 的 Path 通过赛贝尔曲线实现的,有对赛贝尔曲线感兴趣的朋友们可以去学习学习,在 matplotlib 中,figur ...
- CSS3实现32种基本图形
CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...
- CSS3实现二十多种基本图形
CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...
- 使用OpenGL ES绘制3D图形
如果应用定义的顶点不在同一个平面上,并且使用三角形把合适的顶点连接起来,就可以绘制出3D图形了. 使用OpenGL ES绘制3D图形的方法与绘制2D图形的步骤大致相同,只是绘制3D图形需要定义更多的 ...
- 用初中代数结合python画出正方形
在屏幕上打印类似下面的图形: 常规画正方形的算法: 这几乎是初学所有计算机语言时都会遇到的问题.算法都大致类似,就是找出打印规律然后用计算机语句表达出来.最常规的算法是:输入数字n就打印n行,首行和尾 ...
- 160419、CSS3实现32种基本图形
CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...
随机推荐
- SSH实现ajax
(1)首先要引入需要pom文件 <!-- https://mvnrepository.com/artifact/org.apache.struts/struts2-json-plugin --& ...
- 「Python」数据清洗常用正则
对爬虫数据进行自然语言清洗时用到的一些正则表达式 标签中的所有属性匹配(排除src,href等指定参数) 参考链接 # \b(?!src|href)\w+=[\'\"].*?[\'\&quo ...
- PowerDesigner大小写转换
在菜单栏找到:Tools-->Execute Commands --> Edit/Run Script 快捷键:Ctrl+Shift+X 输入下边的代码就可以了.(UCase大写 LCas ...
- 最近在写h5的页面,发现有一款框架还不错给大家推荐一下
wui 说一下自己写项目的体会吧,自我感觉wui还不错,能够让自己很快地把页面布局好,而且里面一些js效果也不用自己去手写jQuery代码很方便,下面让我们一起来认识一下wui这个框架吧 1,acco ...
- 关于spark写入文件至文件系统并制定文件名之自定义outputFormat
引言: spark项目中通常我们需要将我们处理之后数据保存到文件中,比如将处理之后的RDD保存到hdfs上指定的目录中,亦或是保存在本地 spark保存文件: 1.rdd.saveAsTextFile ...
- idea 配置git
1.注册https://github.com 2. 3.填入信息完成
- redist命令操作(一)--键key,字符串String
1.Redis 字符串(String) 参考菜鸟教程:http://www.runoob.com/redis/redis-strings.html 设置指定key的值,如果原来有,覆盖 127.0.0 ...
- CF-551-D-树dp/思维
http://codeforces.com/contest/1153/problem/D 给出一颗有根树,叶子节点可以从1开始赋值但不能相同,每个节点有一个属性max/min表示选择所有儿子值中的ma ...
- 收藏的博客 -- Qt/C++学习
Qt Creator环境: 使用Qt Creator作为Linux IDE,代替Vim:实现两台Linux电脑远程部署和调试(一台电脑有桌面系统,一台电脑无桌面系统) 使用Qt Creator作为Li ...
- 世界各国GDP动态排名可视化实现(基于d3.js)
一.说明 之前在抖音上看到GDP等各种排名的可视化,一直想知道是怎么实现的.之前也有研究过一次,但觉得太麻烦放弃了,昨天又心痒难耐研究了一翻. 先是看到这篇文章说是有人基于d3.js实现:https: ...