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 ...
随机推荐
- CenOs7安装oracle图文详细过程（02）
原创作品,转载请在文章头部(显眼位置)注明出处:https://www.cnblogs.com/sunshine5683/p/10011574.html 8.修改用户限制 vim /etc/secur ...
- [LeetCode]Longest Palindromic Substring题解(动态规划)
Longest Palindromic Substring: Given a string s, find the longest palindromic substring in s. You ma ...
- 线程与全局解释器锁（GIL）
一.线程概论 1.何为线程 每个进程有一个地址空间,而且默认就有一个控制线程.如果把一个进程比喻为一个车间的工作过程那么线程就是车间里的一个一个流水线. 进程只是用来把资源集中到一起(进程只是一个资源 ...
- python_tensorflow_Django实现逻辑回归
1.工程概要 2.data文件以及input_data文件准备 链接:https://pan.baidu.com/s/1EBNyNurBXWeJVyhNeVnmnA 提取码:4nnl 3.logiss ...
- Bzoj3197: [Sdoi2013]assassin
题面 传送门 Sol 套路:找出重心,如果有两个就新建一个点 然后把这棵树hash一下 设\(f[i][j]\)表示第一颗树到\(i\)第二棵树到\(j\),子树\(i,j\)同构的付出的最小代价 转 ...
- Spring Data MongoDB 基础查询
有两种方式查询 BasicQuery 和 Query 一.BasicQuery BasicQuery query = new BasicQuery("{ age : { $lt : 26 } ...
- 3.Bootstrap CSS 概述
1.HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 ...
- .net core系列之《将.net core应用部署到Ubuntu》
1.首先准备一个演示项目. 2.然后将这个项目用FileZilla工具上传到Ubuntu中. 3.进入目标文件,接下来有两种方法来部署项目 a.用dotnet run命令 root@hhz-virtu ...
- java笔记--ASCII编码认知和转换
ASCII是基于拉丁字母的一套电脑编码系统,主要用于显示英语字符是当今最通用的单字节编码.包括128个字符. --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs. ...
- CentOS7.x使用yum安装Mysql5.6
先检查是否存在已安装的MySQL # yum list installed | grep mysql 若存在删除: yum remove 软件名称 CentOS 7的yum源中没有正常安装mysql时 ...