欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-23 20:23:17
作者： 八月未见 博客： https://www.cnblogs.com/jmtm/ 以下内容我仅尝试了Firefox浏览器，其他浏览器效果未知。 尝试做一个 CSS 写的角标，因为不能把它移到角落去，所以只能用伪类把两边挡住，假装是一个梯形的角标。

未见八月 ......

作者： 八月未见 博客：

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

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

尝试笔记 01 之 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 动画：

未见八月

放一下动画的代码：

尝试笔记 01 之 CSS 边角上的标签
<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

 

上一篇： 首个无人智能化”手机回收机器人”上市!

下一篇： 江淮iEVA60正式发布 计划明年二季度上市

推荐阅读