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


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

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

<div id="mark"><h1>未见八月</h1>
</div>
<style><!--
*{margin: 0;padding: 0;
}#mark{width: 200px;height: 60px;color: white;text-shadow: 0 2px 1px black,2px 0 1px black;display: block;position: relative;top: 100px;left: 0;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: 0;box-shadow: 0 0 0 rgba(0,0,0,0.5), inset 0 0 0 white;}10% {opacity: 1;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: 1;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: 1;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: 1;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: 1;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: 0;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>

View Code

转载于:https://www.cnblogs.com/jmtm/p/9937537.html

尝试笔记 01 之 CSS 边角上的标签相关推荐

  1. HTML/CSS学习笔记01【概念介绍、基本标签】

    w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

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

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

  3. PCL学习笔记01:在Ubuntu上安装PCL

    文章目录 一.PCL官网 二.在Ubuntu上安装PCL 三.PCL官网教程 四.溜达一圈PCL 五.PCL基本结构 (一)有组织的点云 (二)无组织的点云 六.测试PCL是否安装成功 (一)编写程序 ...

  4. 【原】[webkit移动开发笔记]之如何去除android上a标签产生的边框

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

  5. HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】

    w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

  6. 侯捷C++课程笔记01: 面向对象高级编程(上)

    本笔记根据侯捷老师的课程整理而来:C++面向对象高级编程(上) pdf版本笔记的下载地址: 笔记01_面向对象高级编程(上),排版更美观一点(访问密码:3834) 侯捷C++课程笔记01: 面向对象高 ...

  7. NODEMCU学习笔记-01 esp8266 WIFI杀手 源码上传版

    NODEMCU学习笔记-01 esp8266WIFI杀手 动手前的准备 NODEMCU和ESP8266 ARDUINO IDE GITHUB CSDN 让我们开始吧 连接开发板并安装驱动 安装ardu ...

  8. PHP 学习笔记 01

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

  9. JQuery-学习笔记01【基础——JQuery基础】

    Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...

最新文章

  1. Docker运行PostgreSQL
  2. python 生成时间序列
  3. Win32 C 语言程序编译多个文件和在多个文件中声明外部变量
  4. oracle 基本异常的练习及各个错误码
  5. C语言 | 链表概述
  6. 2018年各大互联网前端面试题五(今日头条)
  7. 鸿蒙关键技术研究,鸿蒙内核源码分析(静态链接篇) | 完整小项目看透静态链接过程 | 百篇博客分析HarmonyOS源码 | v54.02...
  8. Apache Flink新场景——OLAP引擎
  9. vivo NEX 3 5G真机曝光:瀑布屏+升降镜头
  10. 巧用「打印」功能实现PDF单页提取
  11. 用SqlConnectionStringBuilder修改连接超时时间
  12. 资源分享·病毒样本下载资源分享
  13. 实验十七 通信录csv文件管理
  14. 睡个“好”觉,还真是有益身心胖瘦的
  15. OpenCV开发笔记(五十九):红胖子8分钟带你深入了解分水岭算法(图文并茂+浅显易懂+程序源码)
  16. Python matplotlib数据可视化 subplot绘制多个子图
  17. Amazon Glue ETL 作业调度工具选型初探
  18. 2022-2028年中国珠宝电子商务行业市场需求分析及投资方向研究报告
  19. 一次内存泄漏的问题记录
  20. 文明6中文版版下载 整合风云变幻+迭起兴衰全DLC 免steam 修改器

热门文章

  1. html页面锁屏,JavaScript网页锁屏效果源码实例
  2. 别被忽悠了!阿里内部人士:我们正悄悄地拆掉中台,你还在建?
  3. 中小企业如何搭建数据分析平台?
  4. 企业应该如何运用商业智能
  5. 价值5000元的web报表分享
  6. 帆软报表登录背后得逻辑
  7. eclipse java读取文件_在eclipse完成对Java_web项目里面资源文件的读取
  8. 攻击服务器修改数据库,SQL服务器数据库注入式攻击解释
  9. java log4j 相对路径_log4j中配置日志文件相对路径[续集]
  10. android post数据到php服务器,通过post方法将数据上传到服务器Android Studio