聚光灯的实现

最新推荐文章于 2022-05-09 10:52:44 发布

FakeOccupational

最新推荐文章于 2022-05-09 10:52:44 发布

阅读量222

点赞数

分类专栏：服务化&架构

本文链接：https://blog.csdn.net/ResumeProject/article/details/108592848

版权

服务化&架构专栏收录该内容

103 篇文章 0 订阅

订阅专栏

参考：CodingStartup起码课

<link rel="stylesheet" href="juguangdneg.css">
   <h1 data-spolight="WELCOME">WELCOME</h1>

html{
    font-size: 15px;
}

body{
    background-color: #ffa502;
}





bosy{
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
/*这样就能使文字再页面内上下左右置中*/
}

h1{
    color: #333;
    font-family: Helvetica;
    margin:0;
    padding:0;
    font-size: 8rem;
    letter-spacing: -0.3rem;/*缩小字距*/

    position: relative;
}
/*Pseudo Element(伪类元素)*/
h1::after {
    /*content: 'CODE STRUT';*/
    content: attr(data-spolight);
    /*color:yellow;*/
    color:transparent;/*透明*/
    position: absolute;
    top: 0;
    left: 0;
    /*现在黄色的遮罩就产生了*/
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);/*safari */
    clip-path: ellipse(100px 100px at 0% 50%);
    /*100 的正圆 位置水平的最左 垂直的中间*/

    background-image: url(http://imglf6.nosdn0.126.net/img/MkQrTXB3T3JXVzZ3Wld6Y1FRNms5ZGtTS2F5ZEFHNFJTNy9DMFhWU2xwUmVseEZNUG85b1p3PT0.jpg?imageView&amp;thumbnail=1680x0&amp;quality=96&amp;stripmeta=0&amp;type=jpg);
    background-size: 150%;
    background-position:  center center;
    -webkit-background-clip: text;/*背景裁接属性 重点*/
    background-clip: text;


    animation: feSpotLight 5s infinite;
}
/*animation*/
@keyframes feSpotLight {
    0%{-webkit-clip-path: ellipse(100px 100px at 0% 50%);/*safari */
        clip-path: ellipse(100px 100px at 0% 50%);}
    50%{-webkit-clip-path: ellipse(100px 100px at 100% 50%);/*safari */
        clip-path: ellipse(100px 100px at 100% 50%);}
    100%{-webkit-clip-path: ellipse(100px 100px at 0% 50%);/*safari */
        clip-path: ellipse(100px 100px at 0% 50%);}
}




/*-----------------------------------------------------------------------------------*/

a{ text-decoration:none}

.box {
    margin: 100px auto;
    width: 100%;
    background-color:  #2a9ead;
    
}
.box .box-item {
  border-bottom: 1px solid #FDA7DF;/*边框的色*/
  color: #eee;
}
.box .title {
  margin: 0;
  padding: 10px;
  background-color: #2a9ead;
}
.box-item-content{
    height: 0;
    overflow: hidden;
    background-color: #ff7f50;
    margin: 0;
    padding-left: 20px;
    transition: 0.5s;
}
ul{
    list-style: none;
}
ul li{
    padding-top: 5px;
}
.box:hover .box-item:hover .box-item-content {
    height: 100px;
}