正文

炫酷的css形状（值得收藏）(代码片段)

lwming  lwming  2022-12-14  620

关键词：

在今日头条中看到炫酷的 CSS 形状，就记录一下：

1.圆形

技术图片

#circle 
 width: 100px;
 height: 100px;
 background: red;
 border-radius: 50%

2.椭圆形

技术图片

#oval 

width: 200px;

height: 100px;

background: red;

border-radius: 100px / 50px;

3.上三角

技术图片

#triangle-up 
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;

4.星星 (5角)

技术图片

#star-five 

margin: 50px 0;

position: relative;

display: block;

color: red;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

transform: rotate(35deg);



#star-five:before 

border-bottom: 80px solid red;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;

width: 0;

top: -45px;

left: -65px;

display: block;

content: ‘‘;

transform: rotate(-35deg);



#star-five:after 

position: absolute;

display: block;

color: red;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

transform: rotate(-70deg);

content: ‘‘;

5.爱心

技术图片

#heart 

position: relative;

width: 100px;

height: 90px;



#heart:before,

#heart:after 

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

border-radius: 50px 50px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;



#heart:after 

left: 0;

transform: rotate(45deg);

transform-origin: 100% 100%;

6.对话泡泡

技术图片

#talkbubble 
 width: 120px;
 height: 80px;
 background: red;
 position: relative;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

#talkbubble:before 
 content: "";
 position: absolute;
 right: 100%;
 top: 26px;
 width: 0;
 height: 0;
 border-top: 13px solid transparent;
 border-right: 26px solid red;
 border-bottom: 13px solid transparent;

7.徽章丝带

技术图片

#badge-ribbon 
 position: relative;
 background: red;
 height: 100px;
 width: 100px;
 border-radius: 50px;

#badge-ribbon:before,
#badge-ribbon:after 
 content: ‘‘;
 position: absolute;
 border-bottom: 70px solid red;
 border-left: 40px solid transparent;
 border-right: 40px solid transparent;
 top: 70px;
 left: -10px;
 transform: rotate(-140deg);

#badge-ribbon:after 
 left: auto;
 right: -10px;
 transform: rotate(140deg);

8.放大镜

技术图片

#magnifying-glass 
 font-size: 10em;
 display: inline-block;
 width: 0.4em;
 box-sizing: content-box;
 height: 0.4em;
 border: 0.1em solid red;
 position: relative;
 border-radius: 0.35em;

#magnifying-glass:before 
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: red;
 width: 0.35em;
 height: 0.08em;
 transform: rotate(45deg);

9.锁

技术图片

#lock 
 font-size: 8px;
 position: relative;
 width: 18em;
 height: 13em;
 border-radius: 2em;
 top: 10em;
 box-sizing: border-box;
 border: 3.5em solid red;
 border-right-width: 7.5em;
 border-left-width: 7.5em;
 margin: 0 0 6rem 0;

#lock:before 
 content: "";
 box-sizing: border-box;
 position: absolute;
 border: 2.5em solid red;
 width: 14em;
 height: 12em;
 left: 50%;
 margin-left: -7em;
 top: -12em;
 border-top-left-radius: 7em;
 border-top-right-radius: 7em;

#lock:after 
 content: "";
 box-sizing: border-box;
 position: absolute;
 border: 1em solid red;
 width: 5em;
 height: 8em;
 border-radius: 2.5em;
 left: 50%;
 top: -1em;
 margin-left: -2.5em;

更多炫酷的 CSS 形状的原链接：https://www.toutiao.com/i6693373488746463747/

21.炫酷的css数字j时钟(代码片段)

效果(源码网盘地址在最后)关注公众号《大迁世界》，查看更多视频教程！源码index.html<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>DigitalClock</title><linkrel="stylesheet"href="style.css"/&g 查看详情

android自定义view：炫酷的剑气加载效果实现(代码片段)

看到一个非常炫的加载效果，文章中大佬是通过css实现的，今天咱们来用Android的自定义View来实现一下这是理想中的效果这是现实的效果不能说百分百还原吧，只能说精髓开工这个效果仔细看，就是有三个类似月... 查看详情

那些炫酷的css文字效果之诗词《兔》(代码片段)

不知不觉已经迈入2023年，今年是兔年，想到兔子就会联想到玉兔，中秋，胡萝卜，兔子不吃窝边草，这就越扯越远了，今天的主题是用纯CSS来实现各种不错的文字效果，文字则摘录古诗词中有关《兔》相关的诗词，让我们一边... 查看详情

python学习之10行代码制作炫酷的词云图（匹配指定图形形状）(代码片段)

文章目录前言一、需要准备什么？二、代码实现（示例）三、读入数据四、结果展示五、修改词云颜色后的运行结果展示：总结前言想必大家有一个问题：什么是词云呢？词云又叫名字云，是对文本数... 查看详情

值得收藏10个实现炫酷ui前端效果的css生成工具

国内某知名招聘网站发布的一份报告显示，web前端开发工程师已成为中国互联网行业中最紧俏的职位。根据此次报告，今年三季度，互联网在上海全行业中成为人才需求最为紧迫的行业，而在当地互联网各种紧缺... 查看详情

值得收藏10个实现炫酷ui前端效果的css生成工具

「珍藏」老司机为你推荐10个炫酷的开源库，看完的人都收藏了

前言技术群里面经常有人问到一些炫酷的UI效果实现方法，有时候我都是给一个相同或者相似效果的Github链接，有同学私信给我说，大佬，怎么这些效果你都能找到？你是怎么搜索的，或者有其他什么秘方？会利用Google、百度等... 查看详情

纯css实现那些超炫酷的动画效果(代码片段)

...现的，但你知道吗，我们所熟知的css就可以制作炫酷的动画效果，嗯？css?是的，你没有听错，就是css，下面分享的几款动画效果就是用css实现的，一起看看吧。1.仿抖音进入直播间的动画效果上代... 查看详情

炫酷的字体效果(代码片段)

...t;<html><head><metacharset="utf-8"><title>案例：炫酷的字体效果</title></head><styletype="text/css">.padding:0;margin:0;bodywidth:100vh;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#34495e;divfont-size:5em;fon... 查看详情

非常炫酷的网页样式特效(代码片段)

<canvasid="evanyou"width="1920"height="934"></canvas>/*CSS代码:*/<styletype="text/css"> #evanyou position:fixed; width:100%; height:100%; left:0; top:0; </style><script>&nbs... 查看详情

使用coordinatorlayout打造各种炫酷的效果(代码片段)

使用CoordinatorLayout打造各种炫酷的效果自定义Behavior——仿知乎，FloatActionButton隐藏与展示NestedScrolling机制深入解析一步步带你读懂CoordinatorLayout源码自定义Behavior-仿新浪微博发现页的实现ViewPager，ScrollView嵌套ViewPager滑动... 查看详情

让css3中transform属性带你一文实现炫酷的转盘抽奖效果(代码片段)

前端时间有个需求是客户端双端APP内嵌入整个转盘抽奖的web子系统，具体是要在后台能够控制大转盘抽奖的奖项数，和用户免费抽奖的次数，并且免费抽奖使用完，用户可以观看广告进行抽奖或使用积分抽奖。正... 查看详情

canvas-炫酷的3d星空

1.国际惯例，先上效果(⊙o⊙)…效果图看上去效果并不很炫酷啊，直接戳这里看效果吧！2代码部分 html： <canvasid="canvas"width="1920"height="1080"></canvas>css：*{margin:0;padding:0;}/*没啥必须的css*/js：（这个博主也是够... 查看详情

如何使用炫酷的图标(代码片段)

1.下载插件npminstall@jiaminghi/data-view2.全局导入//将自动注册所有组件为全局组件importdataVfrom'@jiaminghi/data-view'Vue.use(dataV)3.就可以使用大屏数据展示页面即数据可视化地址：介绍|DataV4.就简单写一个使用方法 <template... 查看详情

几个炫酷的idea插件(代码片段)

.ignore用来创建Git的.ginore文件,该插件带有大量的模板配置。BashSupport用来支持和执行Bash脚本。Windows下需要安装WSL。Lombok一款提高Java中Setter和Getter编写效率的插件。Java语言，每次写实体类的时候都需要写一大堆的setter，getter，如... 查看详情

linux中一些有用而炫酷的代码(代码片段)

Linux中一些有用而炫酷的代码文章目录Linux中一些有用而炫酷的代码一、cal1、当月的日历2、近三个月的日历3、一年的日历二、yes三、htop四、fortune五、screenfetch六、linux_logo七、linux版本演化八、figlet九、toilet十、lolcat十一、cowsay... 查看详情

linux中一些有用而炫酷的代码(代码片段)

qt系列——炫酷的qtapp+stm32平衡小车(代码片段)

一、Qt设计采用了C++——Qt设计了炫酷的主页面，里面包含了各类仪表widget，其中有个类似钢铁侠的按钮可以触发和控制平衡小车的蜂鸣器。设计的摇杆按钮可以控制前进、后退、左转、右转、蓝牙连接等功能。Qt_C&... 查看详情