尝试笔记 01 之 CSS 边角上的标签

时间:2021-12-11 22:17:30

作者: 八月未见 博客: https://www.cnblogs.com/jmtm/


以下内容我仅尝试了Firefox浏览器,其他浏览器效果未知。

尝试做一个 CSS 写的角标,因为不能把它移到角落去,所以只能用伪类把两边挡住,假装是一个梯形的角标。

<div id="mark">
<h1>未见八月</h1>
</div>
<style><!--
*{
margin:;
padding:;
} #mark{
width: 200px;
height: 60px;
color: white;
text-shadow: 0 2px 1px black,2px 0 1px black;
display: block;
position: relative;
top: 100px;
left:;
box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px white;
text-align: center;
transform: rotate(-45deg);
margin-bottom: 250px;
} #mark::before {
content: "";
position: absolute;
display: block;
width: 140px;
height: 140px;
border: 50px solid rgb(185, 183, 289);
border-right-color: rgba(185, 183, 289, 0);
border-bottom-color: rgba(185, 183, 289, 0);
transform: translate(-20px,-59px) rotate(45deg);
} #mark h1{
font: 20px "微软雅黑";
line-height: 60px; }
--></style>

角标的代码:

未见八月

  1. 首先制作一个显示为块级元素,宽 200px 高 60px ,相对定位的 div 元素,并为其添加阴影。
  2. 为 div > a 元素的文字设置大小和字体并居中显示(垂直居中可以将 line-height 设为 div 高度相同)。
  3. 为文字添加阴影,将整个 div 旋转 -45 度。

做一个纯CSS写的动画,试试看能不能放 CSS3 动画:

未见八月

放一下动画的代码:

<div id="cover">
<div id="animation_play">
<h1>未见八月</h1>
</div>
</div> <style><!--
#animation_play h1{
display: block;
position: relative;
width: 250px;
height: 60px;
text-align: center;
line-height: 0px;
z-index: -1;
animation: animation_mark 10s infinite;
} @keyframes animation_mark {
0% {
opacity:;
box-shadow: 0 0 0 rgba(0,0,0,0.5), inset 0 0 0 white;
}
10% {
opacity:;
color: black;
line-height: 60px;
text-shadow: 0 0 1px black, 0 0 1px black;
box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 10px white;
}
20% {
color: white;
opacity:;
line-height: 60px;
text-shadow: 0 5px 5px black, 0 5px 5px black;
box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px white;
}
30% {
color: white;
opacity:;
line-height: 60px;
text-shadow: 0 2px 1px black,2px 0 1px black;
box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px white;
transform: rotate(0deg) translate(0,0);
}
40% {
color: white;
opacity:;
line-height: 60px;
text-shadow: 0 2px 1px black,2px 0 1px black;
box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px white;
transform: rotate(-45deg) translate(-61px,-27px);
}
90%{
color: white;
opacity:;
line-height: 60px;
text-shadow: 0 2px 1px black,2px 0 1px black;
box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px white;
transform: rotate(-45deg) translate(-61px,-27px);
}
100%{
opacity:;
box-shadow: 0 0 0 rgba(0,0,0,0.5), inset 0 0 0 white;
}
} #cover{
position: relative;
display: block;
width: 250px;
height: 250px;
border: 50px solid rgb(185, 183, 289);
border-right-color: rgba(185, 183, 289, 0);
border-bottom-color: rgba(185, 183, 289, 0);
}
--></style>

尝试笔记 01 之 CSS 边角上的标签的更多相关文章

  1. Android开发高手课笔记 - 01 崩溃优化(上):关于&OpenCurlyDoubleQuote;崩溃”那点事

    Android 的两种崩溃 Java 崩溃就是在 Java 代码中,出现了未捕获的异常,导致程序异常退出 Native 崩溃一般都是因为在 Native 代码中访问非法地址,也可能是地址对齐出了问题, ...

  2. css笔记01:CSS例子

    body { margin:0; padding:0; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font ...

  3. &lbrack;webkit移动开发笔记&rsqb;之如何去除android上a标签产生的边框(转)

    转载地址:http://www.cnblogs.com/PeunZhang/archive/2013/02/28/2907708.html 去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段 ...

  4. &lbrack;webkit移动开发笔记&rsqb;之如何去除android上a标签产生的边框

    去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段,发现了不少bug,为了不影响回家时间,加班加点也要解决这些问题,这里算是工作回忆,也算是工作的一点小总结. 在ios4+和android2 ...

  5. 前端笔记之CSS(上)

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...

  6. Css技术入门笔记01

    在学习html的时候,html中的标签都具备了特定功能,或者含义,以及相应的样式效果.可是在有些时候我们可能仅仅希望使用 html标签把要显示的数据封装起来,而不需要任何的样式效果.这时就需要单独的标 ...

  7. css笔记01

    CSS样式(Cascading Style Sheets) 表格布局缺陷: ​ 嵌套太多,一旦顺序错乱页面达不到预期效果 ​ 表格布局页面不灵活,动一块整个布局全都要变 语法: ​ 在style标签中 ...

  8. PHP 学习笔记 01

    例子: 为什么要学PHP 主观原因: 前段时间在学校处理了毕业的一些事情,回到上海后开始了找工作的旅程.意向工作是WPF开发或者ASP.NET 作为后端的WEB开发. 陆陆续续一直在面试,其中有一家公 ...

  9. SaToken学习笔记-01

    SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> &lt ...

随机推荐

  1. P1774 最接近神的人&lowbar;NOI导刊2010&lbrack;树状数组 逆序对 离散化&rsqb;

    题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门上方用古代文写着“神的殿堂”.小FF猜想里面应该就有王室的 ...

  2. ExecutorService线程池应用

    //线程数量 int threadNum = lists.size(); //创建一个线程池 ExecutorService pool = Executors.newFixedThreadPool(t ...

  3. 使用 AngularJS 和 Electron 构建桌面应用

    GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是io.js 运行时的衍生,专注于桌面应用而 ...

  4. IIS 部署 node&period;js ---- 基础安装部署

    一些可能有用的相关文章: https://blogs.msdn.microsoft.com/scott_hanselman/2011/11/28/window-iisnode-js/ http://b ...

  5. Java提高篇---Map总结

    一.Map概述 首先先看Map的结构示意图 Map:"键值"对映射的抽象接口.该映射不包括重复的键,一个键对应一个值. SortedMap:有序的键值对接口,继承Map接口. Na ...

  6. dojo新建widget步骤----主要针对widget路径

    一,新建目录 二,新建文件 三,写urtil widget代码 四,写RedTextDialog代码 五,写HTML代码 =====================如有不懂,结合http://blog ...

  7. 管理和维护RHCS集群

    导读 管理和维护RHCS集群是一个非常复杂和繁琐的工作,要维护好一个RHCS集群,必须熟悉RHCS的基本运行原理,在集群管理方面,RHCS提供了两种方式:即Luci图形界面方式和命令行方式,这儿重点讲 ...

  8. 第二百四十二天 how can I 坚持

    今天... 貌似没啥啊. 第一天带帽子上班. 还有回来买了两个柚子吃了,有点上火啊. 还有今天雾霾爆表啊,pm2.5  600多啊. 还有看了部电影<蚁人>,挺好看.希望不会出二.三.四. ...

  9. PHP&lpar;Math的调用&rpar;

    <script> //数学函数(用Math来调用)://round=四舍五入最接近的整数// var l = 1.1;// var y1 = Math.round(l);// docume ...

  10. functools模块中partial的使用

    一.简介 functools.partial(func,* args,**关键字) 返回一个新的部分对象,当被调用时,其行为类似于使用位置参数args 和关键字参数关键字调用的func.如果为调用提供 ...