尝试笔记 01 之 CSS 边角上的标签
作者: 八月未见 博客: 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>
角标的代码:
未见八月
- 首先制作一个显示为块级元素,宽 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:;
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 边角上的标签的更多相关文章
- Android开发高手课笔记 - 01 崩溃优化(上):关于“崩溃”那点事
Android 的两种崩溃 Java 崩溃就是在 Java 代码中,出现了未捕获的异常,导致程序异常退出 Native 崩溃一般都是因为在 Native 代码中访问非法地址,也可能是地址对齐出了问题, ...
- css笔记01:CSS例子
body { margin:0; padding:0; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font ...
- [webkit移动开发笔记]之如何去除android上a标签产生的边框(转)
转载地址:http://www.cnblogs.com/PeunZhang/archive/2013/02/28/2907708.html 去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段 ...
- [webkit移动开发笔记]之如何去除android上a标签产生的边框
去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段,发现了不少bug,为了不影响回家时间,加班加点也要解决这些问题,这里算是工作回忆,也算是工作的一点小总结. 在ios4+和android2 ...
- 前端笔记之CSS(上)
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
- Css技术入门笔记01
在学习html的时候,html中的标签都具备了特定功能,或者含义,以及相应的样式效果.可是在有些时候我们可能仅仅希望使用 html标签把要显示的数据封装起来,而不需要任何的样式效果.这时就需要单独的标 ...
- css笔记01
CSS样式(Cascading Style Sheets) 表格布局缺陷: 嵌套太多,一旦顺序错乱页面达不到预期效果 表格布局页面不灵活,动一块整个布局全都要变 语法: 在style标签中 ...
- PHP 学习笔记 01
例子: 为什么要学PHP 主观原因: 前段时间在学校处理了毕业的一些事情,回到上海后开始了找工作的旅程.意向工作是WPF开发或者ASP.NET 作为后端的WEB开发. 陆陆续续一直在面试,其中有一家公 ...
- SaToken学习笔记-01
SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...
随机推荐
- select2插件使用小记
插件官网:https://select2.github.io/examples.html 页面引入: // 页面顶部 <link rel="stylesheet" type= ...
- Mybatis 逆向工程学习随笔
一.逆向工程的作用 简单来说,就是替我们生成Java代码. 之前使用Mybatis的Mapper代理方法开发,还需要自己创建实体类,而且属性还得和数据库中的字段对应.这着实是机械化的而且比较麻烦的事, ...
- Flask常用的钩子函数
before_first_request:处理第一次请求之前执行.例如以下代码: @app.before_first_request def first_request(): print 'first ...
- Oracle 扩展表空间大小的几种方式
环境:windows操作系统 增加表空间大小的四种方法Meathod1:给表空间增加数据文件 ALTER TABLESPACE app_data ADD DATAFILE 'D:\ORACLE\PRO ...
- Redis学习系列二之.Net开发环境搭建及基础数据结构String字符串
一.简介 Redis有5种基本数据结构,分别是string.list(列表).hash(字典).set(集合).zset(有序集合),这是必须掌握的5种基本数据结构.注意Redis作为一个键值对缓存系 ...
- JavaScript -- Window-Blur
-----030-Window-Blur.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=& ...
- 【教程向】——基于hexo+github搭建私人博客
前言 1.github pages服务生成的全是静态文件,访问速度快: 2.免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 3.可以随意绑定自己的域名,不仔细看的话根本看 ...
- CentOS 6.5 网络服务器功能的实现①:运用bind搭建基本的DNS服务器
何谓DNS服务?简而言之,DNS服务在互联网中可以实现域名解析(把域名转换成网络可以识别的IP地址). 名词解释①:正向解析:域名解析IP地址:反向解析:IP地址解析域名. DNS服务的正/反向区域解 ...
- mysql delimiter的说明
默认情况下,mysql解释器一遇到分号(;),它就要自动执行. 不会等到用户把这些语句全部输入完之后,再执行整段语句. 而自定义函数和存储过程的SQL语句有好多行,且语句中包含有分号,为了保证整段语句 ...
- 同一台电脑使用多个ssh连接git,出现权限不够的问题
在本地使用多个ssh连接git时出现如下错误: Permission denied (publickey,gssapi-keyex,gssapi-with-mic) 当一台电脑上同时使用多个ssh k ...