分类目录Css

2021-12-02

纯Css轮播

作者 chenj 在 Css

<!DOCTYPE html>

<body class="center">
    <div style="flex: 1;height: 300px;z-index: 10;box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.99);" class="border">
        left
    </div>
    <div class="showbox border box-shadow">
        <div class="left border">
            左
        </div>
        <div class="right border">
            右
        </div>
        <div id="imgbox" class="center imgbox">
            <img class="myimg" src="https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg" />
            <img class="myimg" src="https://cdn.pixabay.com/photo/2021/07/29/20/23/mountains-6508015_960_720.jpg" />
            <img class="myimg" src="https://cdn.pixabay.com/photo/2021/07/29/21/03/cereals-6508088__340.jpg" />
            <img class="myimg" src="https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg" />
        </div>
    </div>
    <div  style="flex: 1;height: 300px;z-index: 10;box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.99);" >
        right
    </div>
</body>
<style>
    body {
        width: 100%;
        height: 100%;
        z-index: 0;
        /* background-color: rgba(0, 0, 0, 0.5); */
        box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.1);
    }

    .center {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .showbox {
        width: 300px;
        height: 300px;
        /* background: chocolate; */
        position: relative;
        overflow: visible;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /* z-index: -1; */
        opacity: 1;
    }

    .left {
        position: absolute;
        left: 0;
        top: 50%;
        cursor: pointer;
        background: blue;
        z-index: 100;
    }

    .right {
        position: absolute;
        right: 0;
        top: 50%;
        cursor: pointer;
        background: blue;
        z-index: 100;
    }

    .border {
        border: 1px solid black;
    }

    .centerimg {
        width: 100%;
        height: 100%;
    }

    .myimg {
        width: 300px;
        height: 300px;
        z-index: -1;
        opacity: 1;
        /* filter: alpha(opacity=60); */
    }
    .imgbox {
        position: absolute;
        left: -600px;
        top: 0;
        z-index: -1;
        animation: slideshow 10s both infinite;
    }

    @keyframes slideshow {
        0% {
            left: -900px;
        }
        33% {
            left: -600px;
        }
        66% {
            left: -300px;
        }
        100% {
            left: 0;
        }
    }
</style>

</html>

2021-03-08

纯Css实现下划线跟随滑动

作者 chenj 在 Css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>纯Css实现下划线跟随滑动</title>
  <style type="text/css">
    ul { /*ul定位到页面中间位置*/
      margin: 50px auto;
      width: 500px;
	  list-style:none;
    }
    li { /*设置li位置、字体大小*/
      position: relative;
      font-size: 25px;
      float: left;
      padding: 0 20px 0 20px;
    }
    /*利用:before实现下划线宽度从0-100%*/
    li:before {
      content: "";
      position: absolute;
      top: 0;
      left: 100%; /*下划线从右侧开始显示*/
      width: 0;
      height: 100%;
      border-bottom: 2px solid red;
      transition: 0.2s all linear; /*动画效果*/
    }
    li:hover:before {
      left: 0; /*鼠标滑过时，下划线从右向左移动*/
      width: 100%; /*同时，下划线宽度从0-100%*/
    }
    li:hover ~ li:before { /*~ 选择器：查找指定元素后面的所有兄弟结点*/
      left: 0; /*处于hover后面元素的下划线从左侧开始显示*/
    }
  </style>
</head>
<body>
<ul class="container">
  <li>简介</li>
  <li>详情</li>
  <li>帮助</li>
  <li>我的</li>
</ul>
</body>
</html>

2021-01-04

Css滚动条样式

作者 chenj 在 Css

::-webkit-scrollbar { /滚动条整体样式/
width: 6px; /宽分别对应竖滚动条的尺寸/
height: 2px; /高分别对应横滚动条的尺寸/
}
::-webkit-scrollbar-track { /滚动条里面轨道/
background-color: rgba(225, 225, 225, 0.58)
}
::-webkit-scrollbar-thumb { /滚动条里面小方块/
background-color: rgba(145, 145, 145, 0.65)
}

2020-09-27

Css流动边框效果

作者 chenj 在 Css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div></div>
	</body>
	<style>
		div{
  width: 190px;
  height: 190px;
  background: #00ff00;
  position: relative;
background-image: linear-gradient(to right, transparent, rgba(31, 149, 151, 0.43), transparent);
}
 
div:before,
div:after{
  position: absolute;
  content: "";
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  border: 5px solid #FF33FF;
}
div:before{
  animation: move 5s linear infinite;
}
div:after{
  border-color: #FF33FF;
  animation: move 5s linear infinite normal -2.5s;
}
 
@keyframes move{
  0%,100%{
    clip: rect(0,200px,5px,0);
  }
  25%{
    clip: rect(0,200px,200px,195px);
  }
  50%{
    border-color: #00ff0088;
    clip: rect(195px,200px,200px,0);
  }
  75%{
    clip: rect(0,5px,200px,0px);
  }
}
	</style>
</html>

2020-09-18

Css点闪烁

作者 chenj 在 Css

.point,.point::before,.point::after{position: absolute;width: 12px; height: 12px; border-radius: 50%;content: ''; }
        .point::before{animation: scale 2s infinite; }
        .point::after{animation: scale2 2s infinite; }
        @keyframes scale{0%{ transform: scale(1); opacity:.9}100%{ transform: scale(6); opacity: 0;}}
        @keyframes scale2{0%{ transform: scale(1);opacity:.9;}100%{ transform: scale(12);opacity:0;}}
        

        .point,.point::before,.point::after{
        /* 设置颜色 */
        background-color: rgba(241, 34, 30, .9);}