尝试笔记 01 之 CSS 边角上的标签
程序员文章站
2022-05-07 22:02:07
作者： 八月未见 博客： https://www.cnblogs.com/jmtm/ 以下内容我仅尝试了Firefox浏览器，其他浏览器效果未知。 尝试做一个 CSS 写的角标，因为不能把它移到角落去，所以只能用伪类把两边挡住，假装是一个梯形的角标。
角标的代码：
view code
未见八月 ......
作者： 八月未见 博客：
以下内容我仅尝试了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>