趣味CSS

最新推荐文章于 2022-08-15 17:52:42 发布
最新推荐文章于 2022-08-15 17:52:42 发布
阅读量493 收藏
点赞数
文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_zm7635/article/details/110235758
版权

趣味CSS


使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧

1、圆

在这里插入图片描述

div{
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%

}

2、椭圆

在这里插入图片描述

div {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 50%;
}

3、上三角

在这里插入图片描述

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

4、右三角

右三角

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

5、下三角

在这里插入图片描述

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

6、左三角

在这里插入图片描述

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

7、左三角

在这里插入图片描述

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

8、右三角

在这里插入图片描述

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

9、小箭头

在这里插入图片描述

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}

10、梯形

在这里插入图片描述

#trapezoid {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}

11、平行四边形

在这里插入图片描述

#trapezoid {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}

12、五角星

在这里插入图片描述

#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: '';
}

13、六角星

在这里插入图片描述

#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}

14、对话

在这里插入图片描述

#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;
}

15、爱心

在这里插入图片描述


#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%;
}

16、太极图

在这里插入图片描述

#yin-yang {
  width: 96px;
  box-sizing: content-box;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}
#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid red;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;
}
#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;
}

17、Facebook图标

在这里插入图片描述


#facebook-icon {
  background: red;
  text-indent: -999em;
  width: 100px;
  height: 110px;
  box-sizing: content-box;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 15px solid red;
  border-bottom: 0;
}
#facebook-icon:before {
  content: "/20";
  position: absolute;
  background: red;
  width: 40px;
  height: 90px;
  bottom: -30px;
  right: -37px;
  border: 20px solid #eee;
  border-radius: 25px;
  box-sizing: content-box;
}
#facebook-icon:after {
  content: "/20";
  position: absolute;
  width: 55px;
  top: 50px;
  height: 20px;
  background: #eee;
  right: 5px;
  box-sizing: content-box;
}

18、月亮

在这里插入图片描述


#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

19、徽章丝带

在这里插入图片描述

#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);
}

20、怪物

在这里插入图片描述


#space-invader {
  box-shadow: 0 0 0 1em red,
  0 1em 0 1em red,
  -2.5em 1.5em 0 .5em red,
  2.5em 1.5em 0 .5em red,
  -3em -3em 0 0 red,
  3em -3em 0 0 red,
  -2em -2em 0 0 red,
  2em -2em 0 0 red,
  -3em -1em 0 0 red,
  -2em -1em 0 0 red,
  2em -1em 0 0 red,
  3em -1em 0 0 red,
  -4em 0 0 0 red,
  -3em 0 0 0 red,
  3em 0 0 0 red,
  4em 0 0 0 red,
  -5em 1em 0 0 red,
  -4em 1em 0 0 red,
  4em 1em 0 0 red,
  5em 1em 0 0 red,
  -5em 2em 0 0 red,
  5em 2em 0 0 red,
  -5em 3em 0 0 red,
  -3em 3em 0 0 red,
  3em 3em 0 0 red,
  5em 3em 0 0 red,
  -2em 4em 0 0 red,
  -1em 4em 0 0 red,
  1em 4em 0 0 red,
  2em 4em 0 0 red;
  background: red;
  width: 1em;
  height: 1em;
  overflow: hidden;
  margin: 50px 0 70px 65px;
}
指尖蝼蚁
关注
好玩的CSS3（超全笔记奉上）
qq_46071321的博客
07-14 1277
CSS3属性选择器
三角形旋转css_好玩儿的css
weixin_33469623的博客
01-02 529
引言其实很早就想写一篇关于 css 的文章了。(拖延症，一直没写。。。)css 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天带大家看几个用css(部分会用到canvas和js)实现的好玩儿的效果(不好好琢磨下，还真写不出来)本篇文章有参考一些css大佬的杰作，具体参考链接在文末有提及超能陆战队-大白超能陆战队中的大白，相信你一定不陌...
一些好玩的css
阿臻的博客
02-22 674
好玩的css前言1.background-repeat2.prefers-color-scheme3.伪元素 ::selection 和 ::first-letter4.text gradient 文字渐变5.filter:grayscale(100%)6.pointer-event7.blend modes 混合模式新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个
好玩的CSS[你也试试]
weixin_30852367的博客
05-31 90
呵呵，大家也在博客园的的管理界面选项里面加入自己的CSS <styletype="text/css"><!--body{filter:FlipH()FlipV();}--></style> 呵呵，然后保存出来自己的首页看看效果：）如果不明显，就多刷新几次。 转载于:https://www.cnblogs.com/luoboqingcai/archi...
好玩的CSS样式
fengxiandada的博客
10-29 357
好玩的CSS样式 1. EyeAnimation 1.1 样式展示 样式是油管：https://www.youtube.com/watch?v=IFNUXlqtROc 上看的，原视频作者：Online Tutorials 2.2 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Eye Ball Move on Mousemove&
CSS3趣味万圣节动画场景特效
06-11
【CSS3趣味万圣节动画场景特效】是一个利用CSS3技术构建的互动式网页特效，旨在为用户带来独特的万圣节氛围。这个特效包含了多个万圣节标志性元素，如南瓜、幽灵、城堡和枯树，通过动态效果使得这些元素栩栩如生，...
纯CSS3多功能录音机特效
07-24
在IT领域，CSS3是一种强大的样式表语言，用于呈现HTML或XML（包括SVG、MathML等）文档。...对于前端开发者来说，这样的项目不仅锻炼了CSS3技能，还激发了创新思维，同时也能为网站或应用增添趣味性和吸引力。
CSS3彩色气泡上浮特效
04-25
这种特效能够为网页增添生动性和趣味性，常用于网站背景、儿童主题或者任何需要轻快氛围的设计中。下面将详细介绍如何实现这样的特效，以及涉及到的关键技术和代码要素。 首先，CSS3是CSS（层叠样式表）的第三个...
纯CSS3创意气泡动画特效
07-24
这种特效能够为网站添加动态和互动性，提升用户体验，特别适用于儿童网站、社交媒体应用或者任何希望呈现轻松、趣味氛围的界面设计。 首先，我们要理解CSS3中的关键帧动画。关键帧动画是通过定义动画在不同时间点的...
纯CSS3复古胶片播放器特效
07-24
【纯CSS3复古胶片播放器特效】是一种利用现代CSS3技术实现的创新设计，它为用户带来了一种复古的...在实际项目中，这样的特效可以用于音乐网站、复古风格的UI设计或是个人作品展示页面，增加用户体验的独特性和趣味性。
好玩的css3动画效果
08-22
只适合菜鸟
趣味CSS3效果挑战小汇总
weixin_30897079的博客
07-25 264
众所周知，在CSS3中产生了诸多优秀的特性，现在就来分享一下我这段时间对于这些特性的效果实践，希望对大家有所启发。 挑战1: 画一个对话框 要画一个对话框，首先来学习做一个三角形。其实非常的简单。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
好玩的 CSS - 40 个有趣的 CSS 网站
vip66611的博客
08-15 980
好看的css样式库
css 样式 好玩的
呵呵的牛
05-11 160
/*! css-sans.css v1.0.0 © 2015 Yusuke Sugomori MIT License | http://yusugomori.com/license/mit */ .A { position: relative; left: 30px; width: 60px; height: 91px; border-bottom: solid 14px #000000; } .A:before { -webkit-transform: skew(-19deg, 0); -moz-tr
有趣且重要的css知识合集（3）高难度的css样式
qq_39404437的博客
02-08 336
用css画出三角形，多边形等有趣的样式
一个有趣的前端css文件
shengzhu1的博客
02-17 532
今天无意中发现了一个有趣的图标字体库和css框架网站，叫做Font Awesome，此网站有数百个图标可以挑选，只需要调用相应的资源就可以实现，例如qq，微博，微信等等，而且这些图标还不是图片，所以体积比较小。 这些图标可以根据需求来调整大小、宽度等，还可以进行旋转 Font Awesome官网 我的网站首页就是用的这个网站提供的各种各样的图标我的个人网站
好玩的CSS3（4）--动画实现时钟+附加JS操作
weixin_41105030的博客
03-29 1271
了解animation 所有动画属性的简写属性，除了animation-play-state @keyframes 规定动画 属性 animation-name:规定动画的名称（none | custom-ident | string;） animation-duration:属性指定一个动画周期的时长，单位为s或ms；默认值为0s，表示无动画。 animation-timing-functio...
好玩的CSS3(1)-跳动的心和盛开的花助你表白
weixin_41105030的博客
03-28 797
css CSS3线性渐变（Gradients） 渐变入门文档 background: linear-gradient(angle, color-stop1, color-stop2); CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。了解的应该知道，可以直接理解为我们的背景图片 CSS3动画 animation:动画名称 动画时间 运动曲线 何时开始 播...
纯css好玩的动画效果
m0_65878076的博客
03-15 638
纯css设置实现动画效果
CSS动画技巧：利用nth-child、@keyframes制作趣味动态效果
"这篇教程介绍了如何使用CSS制作有趣且简单的动态效果，主要涉及nth-child、@keyframes和animation这三个关键概念。" 在Web开发中，CSS（层叠样式表）被广泛用来添加样式和交互性到网页设计。本文将探讨如何利用CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值