尝试笔记 01 之 CSS 边角上的标签
作者: 八月未见 博客: 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>
角标的代码:
未见八月
- 首先制作一个显示为块级元素,宽 200px 高 60px ,相对定位的 div 元素,并为其添加阴影。
- 为 div > a 元素的文字设置大小和字体并居中显示(垂直居中可以将 line-height 设为 div 高度相同)。
- 为文字添加阴影,将整个 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 边角上的标签相关推荐
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- Android开发高手课笔记 - 01 崩溃优化(上):关于“崩溃”那点事
Android 的两种崩溃 Java 崩溃就是在 Java 代码中,出现了未捕获的异常,导致程序异常退出 Native 崩溃一般都是因为在 Native 代码中访问非法地址,也可能是地址对齐出了问题, ...
- PCL学习笔记01:在Ubuntu上安装PCL
文章目录 一.PCL官网 二.在Ubuntu上安装PCL 三.PCL官网教程 四.溜达一圈PCL 五.PCL基本结构 (一)有组织的点云 (二)无组织的点云 六.测试PCL是否安装成功 (一)编写程序 ...
- 【原】[webkit移动开发笔记]之如何去除android上a标签产生的边框
去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段,发现了不少bug,为了不影响回家时间,加班加点也要解决这些问题,这里算是工作回忆,也算是工作的一点小总结. 在ios4+和android2 ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- 侯捷C++课程笔记01: 面向对象高级编程(上)
本笔记根据侯捷老师的课程整理而来:C++面向对象高级编程(上) pdf版本笔记的下载地址: 笔记01_面向对象高级编程(上),排版更美观一点(访问密码:3834) 侯捷C++课程笔记01: 面向对象高 ...
- NODEMCU学习笔记-01 esp8266 WIFI杀手 源码上传版
NODEMCU学习笔记-01 esp8266WIFI杀手 动手前的准备 NODEMCU和ESP8266 ARDUINO IDE GITHUB CSDN 让我们开始吧 连接开发板并安装驱动 安装ardu ...
- PHP 学习笔记 01
例子: 为什么要学PHP 主观原因: 前段时间在学校处理了毕业的一些事情,回到上海后开始了找工作的旅程.意向工作是WPF开发或者ASP.NET 作为后端的WEB开发. 陆陆续续一直在面试,其中有一家公 ...
- JQuery-学习笔记01【基础——JQuery基础】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
最新文章
- Docker运行PostgreSQL
- python 生成时间序列
- Win32 C 语言程序编译多个文件和在多个文件中声明外部变量
- oracle 基本异常的练习及各个错误码
- C语言 | 链表概述
- 2018年各大互联网前端面试题五(今日头条)
- 鸿蒙关键技术研究,鸿蒙内核源码分析(静态链接篇) | 完整小项目看透静态链接过程 | 百篇博客分析HarmonyOS源码 | v54.02...
- Apache Flink新场景——OLAP引擎
- vivo NEX 3 5G真机曝光:瀑布屏+升降镜头
- 巧用「打印」功能实现PDF单页提取
- 用SqlConnectionStringBuilder修改连接超时时间
- 资源分享·病毒样本下载资源分享
- 实验十七 通信录csv文件管理
- 睡个“好”觉,还真是有益身心胖瘦的
- OpenCV开发笔记(五十九):红胖子8分钟带你深入了解分水岭算法(图文并茂+浅显易懂+程序源码)
- Python matplotlib数据可视化 subplot绘制多个子图
- Amazon Glue ETL 作业调度工具选型初探
- 2022-2028年中国珠宝电子商务行业市场需求分析及投资方向研究报告
- 一次内存泄漏的问题记录
- 文明6中文版版下载 整合风云变幻+迭起兴衰全DLC 免steam 修改器
热门文章
- html页面锁屏,JavaScript网页锁屏效果源码实例
- 别被忽悠了!阿里内部人士:我们正悄悄地拆掉中台,你还在建?
- 中小企业如何搭建数据分析平台?
- 企业应该如何运用商业智能
- 价值5000元的web报表分享
- 帆软报表登录背后得逻辑
- eclipse java读取文件_在eclipse完成对Java_web项目里面资源文件的读取
- 攻击服务器修改数据库,SQL服务器数据库注入式攻击解释
- java log4j 相对路径_log4j中配置日志文件相对路径[续集]
- android post数据到php服务器,通过post方法将数据上传到服务器Android Studio