*、以下纯属自娱自乐，O(∩_∩)O哈哈~
<!DOCTYPE html>
<html>
<head>
<title>Css小娱乐</title>
<style>
.div_egg {
width: 100px;
height: 50px;
background-color: yellow;
border-radius:38% 62% 62% 38%/ 50% 50% 50% 50%;
}
.div_triangle {
width: 0px;
height: 0px;
border-left: 50px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.div_other_triangle {
width: 200px;
height: 0px;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
#hexagon {
width: 100px;
height: 55px;
background: #fc5e5e;
position: relative;
margin: 100px auto;
}
#hexagon:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid yellow;
}
#hexagon:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid aqua;
}
/*
#sixangle {
width: 0;
height: 0;
display: block;
position: absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid yellow;
margin: 10px auto;
}
#sixangle:after {
content: "";
//content插入内容
width: 0;
height: 0;
position: absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 200px solid yellow;
margin: 60px 0 0 -100px;
}*/
#star{
width: 0px;
height: 0px;
margin: 50px 0;
color: red;
position: relative;
display: block;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
-webkit-transform: rotate(35deg);
}
#star:before{
content: '';
width: 0px;
height: 0px;
margin: 50px 0;
color: yellow;
position: relative;
display: block;
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
-webkit-transform: rotate(-35deg);
top: -45px;
left: -65px;
}
#star:after{
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #fc2e5a;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
* {
margin: 0px;
padding: 0px;
}
div {
margin: 100px;
}
#comment_bubble {
width: 300px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#comment_bubble:before {
content: "";
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body style="background:black;">
<table border="1">
<tr><td style="color:green;">我像鸡蛋吗？</td><td><div class="div_egg"></div></td></tr>
<tr><td style="color:green;">我是三角形哦！</td><td><div class="div_triangle"></div></td></tr>
<tr><td style="color:green;">还是三角</td><td><div class="div_other_triangle"></div></td></tr>
<tr><td style="color:green;">多边形</td><td><div id="hexagon"></div></td></tr>
<tr><td style="color:green;">六角星</td><td>被雪藏了<div id="sixangle"></div></td></tr>
<tr><td style="color:green;">小星星</td><td><div id="star"></div></td></tr>
<tr><td style="color:green;">提示框</td><td><div id="comment_bubble"></div></td></tr>
</body>
</html>
啊哈~
相关推荐
本项目为一个纯JavaScript实现的五子棋游戏，适用于自娱自乐，不包含人机对战功能。 在JavaScript中开发五子棋游戏，主要涉及以下几个技术知识点： 1. **HTML5 Canvas**: 游戏界面通常使用Canvas进行绘制，这是一...
前端开发：HTML、CSS、JavaScript等用于构建网页和Web应用程序的技术。 后端开发：涉及服务器端编程、API开发、数据库集成等技术。 移动应用开发：包括iOS开发（使用Swift或Objective-C）和Android开发（使用Java或...
兼容性还行， 除了IE不支持，其他浏览器基本上都绿油油，目前自娱自乐，内网项目什么的都是可以用用的。 二、all是干嘛用的 all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样，但是，不包括unicode...
...在这个游戏中，所有的角色、场景和动画效果都是通过Canvas API绘制的。开发者通过控制画布上的对象位置、大小、颜色等属性，实现了游戏中的物体...无论是自娱自乐还是专业学习，这个开源项目都值得你去探索和尝试。
微信小游戏是腾讯微信平台推出的一种轻量级的互动娱乐应用，它们基于JavaScript、HTML和CSS技术构建，用户可以直接在微信内置浏览器中打开游玩，...无论是自娱自乐还是职业发展，这个压缩包都提供了丰富的学习素材。
抖音 超火的 便携小空调 网站html源码下载，抖音超火的便携小空调源码，本源码只是自娱自乐的玩乐工具，并非真正的空调，源码无需数据库，支持HTML即可使用。 演示：http://c.aq060ly.cn/top3
标题中的“摸头GIF动态在线生成源码.rar”表明这是一个关于创建动态GIF表情包的源代码包，主要用于...同时，对于非开发人员，它也提供了一个自娱自乐的工具，可以轻松创建个性化的GIF表情包，用于社交媒体或私人通讯。
他讨厌浏览器的 Bug，不同的浏览器有不同的 Bug，说他用 JavaScript 和 CSS 选择引擎，之后还做了动画引擎，都是自娱自乐。但与此同时，他发现自己不能将制作的一些应用放到浏览器里。于是，他开始制作相关的 API，...
网页模板——纯js模仿微信打飞机游戏代码是一个充满趣味性的编程项目，旨在通过JavaScript语言实现一个类似微信小程序中流行的“打飞机”小游戏。...无论是自娱自乐还是提升技术，这个项目都是一个很好的选择。
总的来说，MyKTV系统是结合了现代技术与KTV娱乐理念的产物，旨在为用户提供一个集点歌、唱歌、管理于一体的自娱自乐平台。无论是从用户的角度还是从技术的角度，这款系统都展现了丰富的设计和实现细节，是家庭KTV...
【捕鱼小游戏.zip】是一款基于JavaScript（js）和HTML技术开发的前端小游戏，名为"捕鱼达人"，旨在为玩家提供一种自娱自乐的娱乐方式。这款游戏的实现充分展示了JavaScript和HTML在网页交互与动态效果方面的强大功能...
这个项目可能是为了学习、实践或自娱自乐，作者提醒用户不要过于苛责，对于感兴趣的人，他鼓励下载并给予支持。 【描述】"4cn php 源码 仿站 mysql数据库"说明这个项目是用PHP语言编写的，并且它复刻了4.cn网站的...
尽管这是一个自娱自乐的项目，但其开发过程涵盖了多个关键的IT知识点，包括网络编程、即时通讯协议解析、用户界面设计、安全性和性能优化等，对于提升开发者的技术能力和实践经验有着积极的作用。
【描述】提到，该项目完全基于HTML和CSS，这意味着它没有使用JavaScript或其他编程语言来增加动态元素或...总的来说，无论是教学还是自娱自乐，"简单的Google主页项目"都提供了一个学习和实践Web开发基础的好平台。
"Botonera-TKB"是一个小型的鼓包工具包库，设计用于娱乐目的，让你能够通过简单的键盘操作体验打击乐的乐趣。... ...用户只需在键盘上敲击指定的键，就...无论是自娱自乐还是作为学习实践，这个小型鼓包工具包库都值得探索。
网站的名称表明它并非响应任何特定需求，而是作者自娱自乐或分享个人兴趣的平台。描述中的“没有人要求”可能是作者幽默的表达，意味着这个网站是出于个人爱好而建立的，而非商业或客户需求。 标签 "HTML" 提示我们...
这种文化现象体现了互联网的创意和自娱自乐精神，同时也展示了技术如何与社会文化相融合，创造出新颖的互动形式。 总的来说，"Disappointed Queen-crx"插件虽然看似简单，却生动地展现了扩展程序技术的潜力和趣味性...
用户不仅可以自娱自乐，还能将这些“电影”分享给他人，促进信息的传播和交流。 GeoAnim的核心技术可能包括以下几个方面： 1. **地图API集成**：GeoAnim可能集成了如Google Maps API或OpenStreetMap等第三方地图...