刚刚发现伪元素强大之处，可以实现的功能非常多，仅仅是拿来清除浮动的话就暴殄天物了，look！
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="前端开发,CSS,HTML,XHTML,JS"/>
<meta name="description" content="专注前端技术博客"/>
<title>WEB前端开发 | 闪亮于WEB前端的彩虹</title>
<title>测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.wrap {
position: absolute;
}
.arrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid #000;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
.arrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid #000;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #99CC33;
position: relative;
}
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #99CC33;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
.star-five {
margin: 50px 0;
position: relative;
display: block;
color: #0066CC;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #0066CC;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star-five:before {
border-bottom: 80px solid #0066CC;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.star-five:after {
position: absolute;
display: block;
color: #0066CC;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #0066CC;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before, .heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.infinity {
position: relative;
width: 212px;
height: 100px;
}
.infinity:before, .infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid #FF33CC;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid #FFCC00;
border-left: 60px solid #FFCC00;
border-bottom: 60px solid #FFCC00;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
.yin-yang {
width: 96px;
height: 48px;
background: #fff;
border-color: #000;
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: #fff;
border: 18px solid #000;
border-radius: 100%;
width: 12px;
height: 12px;
}
.yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #000;
border: 18px solid #fff;
border-radius: 100%;
width: 12px;
height: 12px;
}
</style>
</head>
<body>
<div class="wrap" style="top:30px; left:40px;">
<div class="arrow"></div>
</div>
<div class="wrap" style="top:20px; left:100px;">
<div class="star-six"></div>
</div>
<div class="wrap" style="top:20px; left:200px;">
<div class="star-five"></div>
</div>
<div class="wrap" style="top:20px; left:400px;">
<div class="heart"></div>
</div>
<div class="wrap" style="top:220px; left:100px;">
<div class="infinity"></div>
</div>
<div class="wrap" style="top:220px; left:400px;">
<div class="pacman"></div>
</div>
<div class="wrap" style="top:340px; left:200px;">
<div class="yin-yang"></div>
</div>
</body>
</html>
。
相关推荐
总结起来，“C伪类实现MVC电话本”项目旨在展示如何在C语言中利用结构体、函数指针等特性来模拟面向对象的MVC模式，实现一个功能完善的电话本应用。虽然C语言不具备原生的面向对象支持，但通过巧妙的设计和编码，...
本教程将详细讲解如何使用CSS3实现一个立体按钮的效果，这个效果通常会涉及到伪对象、渐变、阴影以及边框等特性。 首先，我们来理解一下伪对象的概念。在CSS3中，伪对象允许我们对HTML元素的特定状态进行样式化，...
下面将详细讲解JSP如何实现伪静态。 1. **URL重写**：在实现伪静态时，通常会用到URL重写技术。Apache的mod_rewrite模块或Tomcat的URLRewriteFilter是常用的URL重写工具。它们可以通过定义规则，将用户请求的静态...
本小例子展示了如何在C#环境下，通过HttpModule来实现简单的伪静态功能，无需对IIS进行额外配置。 首先，我们需要理解HttpModule的工作原理。HttpModule是ASP.NET中的一个组件，它在HTTP请求生命周期的早期阶段介入...
每个对象都有其特定的行为和功能，通过对象可以实现复杂的程序逻辑。 VB伪指令（如Option Explicit、Dim、Public等）是VB语法的一部分，它们在编译阶段起作用，帮助定义变量、模块或类的行为，确保代码的正确性和...
下面我们将详细探讨如何使用Android的Gallery控件来实现这种伪3D效果。 Gallery控件是Android SDK提供的一种水平滚动视图，它可以容纳多个子视图，并允许用户左右滑动来浏览这些子视图。在早期的Android版本中，...
在本文中，我们将深入探讨如何使用Windows Presentation Foundation（WPF）框架来实现一种伪3D效果的图片浏览体验。WPF是.NET Framework的一部分，它提供了一套强大的UI工具集，用于构建具有丰富图形、多媒体和数据...
通过上述步骤，我们已经成功实现了MVC3中的自定义路由以及伪静态URL的功能。这种方法不仅提高了URL的可读性和友好性，还增强了网站的专业形象。对于那些希望对URL结构有更多控制的应用程序来说，这是一个非常实用的...
【标题】"js写的象棋（面向对象）" 指的是使用JavaScript编程语言实现的中国象棋游戏，它基于面向对象的编程思想进行设计。面向对象编程（Object-Oriented Programming, OOP）是一种软件开发方法，它将数据和操作...
对于Oracle等不支持LIMIT和OFFSET的数据库，可以使用ROWNUM伪列结合子查询来实现类似效果。 4. **框架集成**：在实际开发中，我们通常会使用ORM框架如MyBatis或JPA。在MyBatis中，可以通过动态SQL来实现分页： ``...
- 可以在不影响其他对象的情况下，对对象进行功能扩展。 缺点： - 问题与原型式继承相同，所有新对象共享相同属性。 6. 寄生组合式继承 寄生组合式继承是目前最理想的继承方式，它避免了组合继承中调用两次构造...
LUT是一个将灰度值映射到颜色的数组，根据图像的灰度级，将每个像素映射到LUT中对应的颜色，从而实现伪彩显示。 在LabVIEW中实现这一功能，开发者通常会用到以下VI（Virtual Instruments）和函数： - **图像读取和...
平移（Translation）是实现伪3D的重要一环，它允许我们在屏幕上移动对象，模拟物体在三维空间中的移动。在WPF中，我们可以使用TranslateTransform类来改变元素的位置。例如，通过改变X和Y坐标，可以实现沿水平或垂直...
它具有动态类型、原型式继承和函数作为一等公民等特性，使得它在实现复杂功能时具有很高的灵活性。本压缩包文件“javascript-master”似乎是一个关于JavaScript学习资源的集合，可能包含了基础语法、面向对象编程...
在本项目中，"OO设计和伪状态模式实现的控制台五子棋游戏"是一个用C#编程语言实现的控制台应用程序，旨在教授面向对象编程（Object-Oriented Programming, OOP）和设计模式，特别是状态模式的应用。下面将详细阐述...
在计算机科学领域，尤其是图像处理和计算机视觉中，OpenCV是一个强大的开源库，它提供了许多功能，用于处理图像和视频。MFC（Microsoft Foundation Classes）是微软提供的一个C++类库，用于构建Windows应用程序。本...
综上所述，Oracle伪列如ROWID和ROWNUM在实际应用中发挥着重要作用，不仅可以帮助优化查询性能，还能轻松实现复杂的分页功能。同时，通过Java JDBC编程，可以进一步提升应用程序与Oracle数据库的集成度和灵活性。
5. Matlab接口：为了在C#中调用Matlab功能，需要使用Matlab Compiler SDK生成.NET组件，使得C#代码可以直接调用Matlab算法，实现两者的无缝集成。 6. GPS测速：除了定位，GPS还可以计算运动物体的速度。通过连续两...
最后，考虑到本示例没有提供具体的JSON数据和完整代码，你可以参考以下伪代码进行实现： ```javascript var jsonData = JSON.parse(jsonText); var $table = $("<table></table>"); // 构建表格结构 ...