刚刚发现伪元素强大之处,可以实现的功能非常多,仅仅是拿来清除浮动的话就暴殄天物了,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>"); // 构建表格结构 ...