Css3 实现丝带效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0; padding:0;}
body,html{
font-size:14px;
}
.box{
margin:50px auto;
width:300px;
height:300px;
background-color: #ffffff;
position: relative;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 0 5px #999999;
-moz-box-shadow: 0 0 5px #999999;
box-shadow: 0 0 5px #999999;
}
.ribbon{
position: absolute;
top:0;
right:0;
}
.banner{
position: relative;
float: right;
display: block;
width:100px;
color: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top:22px;
right:-14px;
}
.banner:before,.banner:after{
content: '';
position: absolute;
width:30px;
height: 12px;
display: block;
background-color: #ff321c;
}
.banner:before{
left: -45px;
-webkit-transform: skewY(-45deg) translate(50%, 15px);
-moz-transform: skewY(-45deg) translate(50%, 15px);
-ms-transform: skewY(-45deg) translate(50%, 15px);
-o-transform: skewY(-45deg) translate(50%, 15px);
transform: skewY(-45deg) translate(50%, 15px);
-webkit-transform-origin:100% center;
-moz-transform-origin:100% center;
-ms-transform-origin:100% center;
-o-transform-origin:100% center;
transform-origin:100% center;
}
.banner:after{
right: -17px;
-webkit-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
-moz-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
-ms-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
-o-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
-webkit-transform-origin:0 center;
-moz-transform-origin:0 center;
-ms-transform-origin:0 center;
-o-transform-origin:0 center;
transform-origin:0 center;
}
.text{
position: relative;
padding:6px 0;
z-index: 2;
min-height:18px;
line-height:18px;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
text-align: center;
text-transform: capitalize;
}
.text:before,.text:after{
content: '';
display: block;
height: 30px;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
background-color: #ff604f;
}
.text:before{
-webkit-transform: translateX(-15%) skewX(-45deg);
-moz-transform: translateX(-15%) skewX(-45deg);
-ms-transform: translateX(-15%) skewX(-45deg);
-o-transform: translateX(-15%) skewX(-45deg);
transform: translateX(-15%) skewX(-45deg);
}
.text:after{
-webkit-transform: translateX(15%) skewX(45deg);
-moz-transform: translateX(15%) skewX(45deg);
-ms-transform: translateX(15%) skewX(45deg);
-o-transform: translateX(15%) skewX(45deg);
transform: translateX(15%) skewX(45deg);
}
</style>
</head>
<body>
<div class="box">
<div class="ribbon">
<div class="banner">
<div class="text">
happy new year
</div>
</div>
</div>
</div>
</body>
</html>
注:
text-transform: capitalize; //首字母大写
text-transform: uppercase; //字母全部大写
text-transform: lowercase; //字母全部小写
效果如下：
Css3 实现丝带效果的更多相关文章
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
- 第八十节，CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...
- html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
- Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
- css图片上悬浮文字（丝带效果）实现
首先看效果 思路:1.去掉“丝带“菱角使用的是overflow: hidden; 2.通过z-index降低图片的优先级或者调高“丝带”优先级来实现覆盖效果(z-index需要写在有position的 ...
- 测试css3的动画效果在display:none的时候不耗费性能
也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...
- css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...
随机推荐
- 关系型数据库之MySQL基础总结_part1
一:数据库的操作语言的种类 MySQL 是我们最常使用的关系型数据库,对于MySQL的操作的语言种类又可以分为:DDL,DML,DCL,DQL DDL:是数据库的定义语言:主要对于数据库信息的一些定义 ...
- 五、curator recipes之选举主节点Leader Latch
简介 在分布式计算中,主节点选举是为了把某个进程作为主节点来控制其它节点的过程.在选举结束之前,我们不知道哪个节点会成为主节点.curator对于主节点选举有两种实现方式,本文示例演示Latch的实现 ...
- 使用gunzip、tar、rar、（zip压缩和unzip解压缩）
---------------------20171119------------------------------ 解压gz后缀 使用gunzip filename.gz ------------ ...
- 撩课-Java每天5道面试题第16天
111.什么是乐观锁(Optimistic Locking)? 悲观锁,正如其名, 它指的是对数据被外界 包括本系统当前的其他事务, 以及来自外部系统的事务处理 修改持保守态度, 因此,在整个数据处理 ...
- 05-Servlet与内部加载机制(part1)
一.什么是Servlet Servlet 运行在服务端的Java小程序, 是sun公司提供一套规范(接口) 主要功能: 用来处理客户端请求 响应给浏览器的动态资源 servlet的实质就是j ...
- 【SSH网上商城项目实战01】整合Struts2、Hibernate4.3和Spring4.2
转自:https://blog.csdn.net/eson_15/article/details/51277324 今天开始做一个网上商城的项目,首先从搭建环境开始,一步步整合S2SH.这篇博文主要总 ...
- Spring入门（二）— IOC注解、Spring测试、AOP入门
一.Spring整合Servlet背后的细节 1. 为什么要在web.xml中配置listener <listener> <listener-class>org.springf ...
- Github+hexo+next搭建教程
今天参考的是大神的教程,学了一个新东西,但是可能由于原教程中运用的npm包与我当前使用的npm包版本不同的原因,有出过多处运行错误,但都在此教程中解决了; 总结了下命令: npm install he ...
- C# 读取config
控制台应用程序 App.config: AppSettings.config: Program.cs: string a = ConfigurationManager.AppSettings[&quo ...
- 国内外有名的java论坛
国内: www.chinajavaworld.com-论坛人很多,高手也多,不过好像都在潜水 www.cn-java.com -也很不错,文章很好,但是就是商业性浓了点. www ...