zoukankan html css js c++ java

CSS记录篇

本文转自 CSS记录篇，如有侵权，请联系删除。

一、提高开发效率、提高用户体验

css3

二、常用的css动画

2.1 音乐跳动动画

Loading Images

<div className='m-preloading'>
  <div className='m-preloading-line m-preloading-lineone' />
  <div className='m-preloading-line m-preloading-linetwo' />
  <div className='m-preloading-line m-preloading-linethree' />
</div>

.m-preloading {
  display: flex;
  position: absolute;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@keyframes anim-scY{
  0%, 100%{ transform:scaleY(0); }
  50%{  transform:scaleY(1); }
}
.m-preloading-line {
   20px;
  height: 80px;
  margin: 0 5px;
  transform: scaleY(0);
  transform-origin: bottom;
  animation: anim-scY 0.5s linear infinite;
}
.m-preloading-lineone {
  background: #2274e7;
}
.m-preloading-linetwo {
  animation-delay:.1s;
  background: #22e795;
}
.m-preloading-linethree {
  animation-delay: .3s;
  background: #e79522;
}

2.2 横向旋转动画1

横向旋转动画1

<div class="m-loader">
  <h1 class="m-loader-title">LOADING</h1>
  <span class="m-loader-sc m-loader-sc1"></span>
  <span class="m-loader-sc m-loader-sc2"></span>
  <span class="m-loader-sc m-loader-sc3"></span>
</div>

.m-loader-title{
	text-align:center;
	color:#333;
	font-size:16px;
	letter-spacing:1px;
	font-weight:500;
}

.m-loader .m-loader-sc {
	position:absolute;
	left:50%;
	display:inline-block;
	margin-left:-10px;
	16px;
	height:16px;
	border-radius:50%;
	animation:3s infinite linear;
}
.m-loader .m-loader-sc1 {
	background:#E84C3D;
	animation:kiri 1.2s infinite linear;
}
.m-loader .m-loader-sc2 {
	background:#F1C40F;
	z-index:100;
}
.m-loader .m-loader-sc3 {
	background:#2FCC71;
	animation:kanan 1.2s infinite linear;
}

@keyframes kanan {
  0% {
    transform:translateX(20px);
  }
	50% {
    transform:translateX(-20px);
	}
	100% {
    transform:translateX(20px);
	  z-index:200;
	}
}
@keyframes kiri {
  0% {
    transform:translateX(-20px);
	  z-index:200;
  }
	50% {
    transform:translateX(20px);
	}
	100% {
    transform:translateX(-20px);
	}
}

2.3 四圆点旋转动画

圆形旋转动画

<div class="m-loading">
  <div class="m-loading-box">
    <div class="m-loading-box-c m-loading-box-c1"></div>
    <div class="m-loading-box-c m-loading-box-c2"></div>
    <div class="m-loading-box-c m-loading-box-c3"></div>
    <div class="m-loading-box-c m-loading-box-c4"></div>
  </div>
  <span class="m-loading-title">loading</span>
</div>

.m-loading {
  position: fixed;
   100%;
  height: 100%;
  background: #16171d;
  opacity: 0.9;
}
.m-loading .m-loading-title {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: 30px;
  text-align: center;
   100px;
  height: 30px;
  color: #ff8c00;
  font-size: 12px;
}
.m-loading .m-loading-box {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -30px;
  margin-top: -30px;
   60px;
  height: 60px;
}

.m-loading .m-loading-box .m-loading-box-c {
  position: absolute;
  top: 10px;
  left: 10px;
  transform-origin: 20px 20px;
  content: '';
   16px;
  height: 16px;
  background: #ff8c00;
  border-radius: 8px;
  animation: spin-a 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.m-loading .m-loading-box .m-loading-box-c2 {
  top: 10px;
  left: auto;
  right: 10px;
  transform-origin: -4px 20px;
  animation: spin-b 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.m-loading .m-loading-box .m-loading-box-c3 {
  top: auto;
  left: auto;
  right: 10px;
  bottom: 10px;
  transform-origin: -4px -4px;
  animation: spin-c 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.m-loading .m-loading-box .m-loading-box-c4 {
  top: auto;
  bottom: 10px;
  transform-origin: 20px -4px;
  animation: spin-d 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}

@keyframes spin-a {
  0% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-b {
  0% { transform: rotate(90deg); }
  25% { transform: rotate(90deg); }
  25% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-c {
  0% { transform: rotate(90deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  50% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-d {
  0%   { transform: rotate(90deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  75% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

2.4 条形旋转动画变颜色

条形旋转动画变颜色

<svg class="m-loading" width="65px" height="65px" viewBox="0 0 66 66">
   <circle class="m-loading-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

.m-loading {
  animation: rotator 1.4s linear infinite;
}
.m-loading .m-loading-path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
    dash 1.4s ease-in-out infinite, 
    colors 5.6s ease-in-out infinite;
}
@keyframes rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes colors {
	0% { stroke: #4285F4; }
	25% { stroke: #DE3E35; }
	50% { stroke: #F7C223; }
	75% { stroke: #1B9A59; }
  100% { stroke: #4285F4; }
}
@keyframes dash {
  0% { stroke-dashoffset: 187; }
  50% {
    stroke-dashoffset: 47;
    transform:rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform:rotate(450deg);
  }
}

2.5 跳动弹性的盒子

跳动弹性的盒子

<div class="boxLoading" />

.boxLoading {  
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
   50px;
  height: 50px;
}
.boxLoading:before {
  position: absolute;
  top: 59px;
  left: 0;
  content: '';
   50px;
  height: 5px;
  background: #000;
  opacity: 0.1;
  border-radius: 50%;
  animation: shadow .5s linear infinite;
}
.boxLoading:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
   50px;
  height: 50px;
  background: #1A6844;
  animation: animate .5s linear infinite;
  border-radius: 3px;
}

@keyframes animate {
  17% { border-bottom-right-radius: 3px; }
  25% { transform: translateY(9px) rotate(22.5deg); }
  50% {
    transform: translateY(18px) scale(1, .9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% { transform: translateY(9px) rotate(67.5deg); }
  100% { transform: translateY(0) rotate(90deg); }
}
@keyframes shadow {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.2, 1); }
}

2.6 闪烁的点

闪烁跳动的点

<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>

.spinner {
   40px;
  height: 40px;
  position: relative;
  margin: 100px auto;
}
.double-bounce1, .double-bounce2 {
   100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

2.7 三个球逐渐显现

三个球逐渐显现

<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

.spinner {
  margin: 100px auto 0;
   70px;
  text-align: center;
}
.spinner > div {
   18px;
  height: 18px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

2.8 折叠积木

折叠积木

<div class="sk-folding-cube">
  <div class="sk-cube1 sk-cube"></div>
  <div class="sk-cube2 sk-cube"></div>
  <div class="sk-cube4 sk-cube"></div>
  <div class="sk-cube3 sk-cube"></div>
</div>

.sk-folding-cube {
  margin: 20px auto;
   40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
.sk-folding-cube .sk-cube {
  float: left;
   50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
   100%;
  height: 100%;
  background-color: #333;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}
@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}

2.9 伸拉的输入框

伸拉的输入框

<input class="search" type="text" placeholder="搜索...">

.search{
    80px;
    height:40px;
    border-radius:40px;
    border:2px solid lightblue;
    position: absolute;
    right:200px;
    outline:none;
    text-indent:12px;
    color:#666;
    font-size:16px;
    padding:0;
    -webkit-transition:width 0.5s;
}
.search:focus{
    200px;
}

2.10 手浮右侧切入动画

手浮右侧切入动画

<div class="banner1">
    <a href="javascript:;">博</a>
    <span>这是我的个人博客</span>
</div>

.banner1{
    234px;
    height:34px;
    border-radius:40px;
    position:absolute;
    top:400px;
    left:600px;
}
.banner1 a{
    display:inline-block;
    30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    border:2px solid lightblue;
    position:absolute;
    left:0px;top:0px;
    background:lightgreen;
    color:#fff;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    z-index:2;
}
.banner1 a:hover + span{
    -webkit-transform:translateX(40px);
    opacity:1;
}
.banner1 span{
    display:inline-block;
    auto;
    padding:0 20px;
    height:30px;line-height:30px;
    background:lightblue;
    border-radius:30px;
    text-align: center;
    color:#fff;
    position:absolute;
    top:2px;
    opacity:0;
    -webkit-transition:all 1s;
    -webkit-transform:translateX(80px);
}

2.11 骨架屏动画

@keyframes loading {
  to {
    background-position-x: -20%;
  }
}
div {
  background-color: #ededed;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, .5) 50%,
    rgba(255, 255, 255, 0) 60%
  ) #ededed;
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
}

2.12 蚂蚁行军图

蚂蚁行军图

<div class="ants-border">
   Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium, debitis vel quam tempora ut nisi voluptatibus rem ab. Quas, cum. Itaque, dignissimos! Quos, eos placeat eveniet quasi amet eius officiis!
</div>

.ants-border{
   width: 500px;
   padding: 1em;
   border: 1px solid transparent;
   background-image: linear-gradient(white, white), 
                     repeating-linear-gradient(
                        -45deg,
                        #000 0%, #000 25%,
                        #fff 0%, #fff 50%
                     );
  background-size: 10px 10px;
  background-clip: padding-box, border-box;
  animation: ants 10s linear infinite;
}
@keyframes ants {
  to {
     background-position: 100%;
  }
}

2.13 裁切路径

裁切棱形
裁切椭圆

<img class="pic" src="images/pic.jpg">

.pic{
   clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}

.pic{
   clip-path: circle(50%);
}

2.100 动画参考列表

动画参考列表loader

三、常用的css样式 `box-shadow` `hover`

3.1 box-shoadow

用法

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

示例

.u-box-shadow1 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.u-box-shadow2 {
  box-shadow: 
    inset 0 -3em 3em rgba(0,0,0,0.1), 
          0 0  0 2px rgb(255,255,255),
          0.3em 0.3em 1em rgba(0,0,0,0.3);
}

.u-box-shadow3 {
  box-shadow: 0 30px 40px -15px rgba(0,0,0,0.35);
}

.u-box-shadow4 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.u-box-shadow5 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.u-box-shadow6 {
  box-shadow: 0 0 50px rgba(0,0,0,0.75);
}

.u-box-shadow7 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 
              0 2px 2px rgba(0,0,0,0.15), 
              0 4px 4px rgba(0,0,0,0.15), 
              0 8px 8px rgba(0,0,0,0.15);
}

.u-box-shadow8 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.11), 
              0 4px 4px rgba(0,0,0,0.11), 
              0 8px 8px rgba(0,0,0,0.11), 
              0 16px 16px rgba(0,0,0,0.11), 
              0 32px 32px rgba(0,0,0,0.11);
}

.u-box-shadow9 {
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

3.2 `Hover`

霓虹效果

<div id="neon-btn">
  <button class="btn one">Hover me</button>
  <button  class="btn two">Hover me</button>
  <button  class="btn three">Hover me</button>
</div>

#neon-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
  background: #031628; 
}
.btn {
  border: 1px solid;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 300;
}
.one {
  color: #4cc9f0;
}
.two {
  color: #f038ff; 
}
.three {
  color: #b9e769;
}

.btn:hover {
  color: white;
  border: 0;
}

.one:hover {
  background-color: #4cc9f0;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
}
.two:hover {
  background-color: #f038ff;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
}
.three:hover {
  background-color: #b9e769;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
}

链接下划线动画1

h2 > a {
  position: relative;
  color: #000;
  text-decoration: none;
}
h2 > a:hover {
  color: #000;
}
h2 > a::before {
  content: "";
  position: absolute;
   100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

阴影效果

.box {
  position: relative;
  display: inline-block;
   100px;
  height: 100px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.box::after {
  content: "";
  border-radius: 5px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
   100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.box:hover {
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
}
.box:hover::after {
    opacity: 1;
}

边框效果

<div id="draw-border">
  <button>Hover me</button>
</div>

#draw-border {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  border: 0;
  background: none;
  text-transform: uppercase;
  color: #4361ee;
  font-weight: bold;
  position: relative;
  outline: none;
  padding: 10px 20px;
  box-sizing: border-box;
}
button::before, button::after {
  box-sizing: inherit;
  position: absolute;
  content: '';
  border: 2px solid transparent;
   0;
  height: 0;
}
button::after {
  bottom: 0;
  right: 0;
}
button::before {
  top: 0;
  left: 0;
}
button:hover::before, button:hover::after {
   100%;
  height: 100%;
}
button:hover::before {
  border-top-color: #4361ee;
  border-right-color: #4361ee;
  transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}
button:hover::after {
  border-bottom-color: #4361ee;
  border-left-color: #4361ee;
  transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
}

冰冻效果

<div id="frozen-btn">
  <button class="green">Hover me</button>
  <button class="purple">Hover me</button>
</div>

#frozen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  border: 0;
  margin: 20px;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
  padding: 15px 50px;
  border-radius: 50px;
  color: white;
  outline: none;
  position: relative;
}
button:before{
  content: '';
  display: block;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
  background-size: 210% 100%;
  background-position: right bottom;
  height: 100%;
   100%;
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left: 0;
  border-radius: 50px;
  transition: all 1s;
  -webkit-transition: all 1s;
}
.green {
   background-image: linear-gradient(to right, #25aae1, #40e495);
   box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.purple {
   background-image: linear-gradient(to right, #6253e1, #852D91);
   box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.purple:hover:before {
  background-position: left bottom;
}
.green:hover:before {
  background-position: left bottom;
}

闪亮效果

<div id="shiny-shadow">
  <button><span>Hover me</span></button>
</div>

#shiny-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #1c2541;
}
button {
  border: 2px solid white;
  background: transparent;
  text-transform: uppercase;
  color: white;
  padding: 15px 50px;
  outline: none;
  overflow: hidden;
  position: relative;
}
span {
  z-index: 20;  
}
button:after {
  content: '';
    display: block;
    position: absolute;
    top: -36px;
    left: -100px;
    background: white;
     50px;
    height: 125px;
    opacity: 20%;
    transform: rotate(-45deg);
}
button:hover:after {
  left: 120%;
  transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
   -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}

缓动上移)

<div class="lists">
    <a href="#" class="box">
        <img src="avatar.jpg">
    </a>
    <a href="#" class="box">
        <img src="avatar.jpg">
    </a>
</div>
.lists{
    display: flex;
    margin-top: 100px;
    justify-content: center;
}
.box{
     200px;
    height: 200px;
    transition: all 0.3s;
}
.box~.box{
    margin-left: 15px;
}
.box img{ 100%;height: 100%;}
.box:hover{
    transform: translateY(-6px);
}

放大效果

<div class="lists">
    <a href="#" class="box">
        <img src="avatar.jpg">
    </a>
    <a href="#" class="box">
        <img src="avatar.jpg">
    </a>
</div>
.lists{
    display: flex;
    margin-top: 100px;
    justify-content: center;
}
.box{
     200px;
    height: 200px;
    transition: all 0.3s;
}
.box~.box{
    margin-left: 15px;
}
.box img{ 100%;height: 100%;}
.box:hover{
    transform: scale(1.03);
}

框内放大效果

<div class="lists">
    <a href="#" class="box">
        <img src="avatar.jpg">
    </a>
    <a href="#" class="box">
        <img src="avatar.jpg">
    </a>
</div>

.lists{
    display: flex;
    margin-top: 100px;
    justify-content: center;
}
.box{
     200px;
    height: 200px;
    overflow:hidden;
}
.box~.box{
    margin-left: 15px;
}
.box img{
     100%;
    height: 100%;
    transition: all 0.5s;
}
.box:hover img{
    transform: scale(1.1);
}

蒙层效果

<div class="lists">
    <a href="#" class="box">
        <img src="avatar.jpg">
    </a>
    <a href="#" class="box">
        <img src="avatar.jpg">
    </a>
</div>
.lists{
    display: flex;
    margin-top: 100px;
    justify-content: center;
}
.box{
     200px;
    height: 200px;
    overflow:hidden;
    background-color: #4f4f4f;
}
.box~.box{
    margin-left: 15px;
}
.box img{
     100%;
    height: 100%;
    transition: all 0.5s;
}
.box:hover img{
    opacity: 0.8
}

文字滑动进入

<div class="lists">
    <div class="item">
        <div class="text">
          <h1>标题名称</h1>
          <img src="avatar.jpg">
          <h2 class="animate-text">Kitty 的测试案例</h2>
          <p class="animate-text">这里放内容简介，内容简介,这里放内容简介，内容简介,这里放内容简介，内容简介</p>
          <div class="dots"> <span></span> <span></span> <span></span> </div>
        </div>
    </div>
</div>
* { margin: 0; padding: 0;}
.lists{
     100%;
    display: flex;
    justify-content: center;
    margin-top: 100px;
}
.item {
     300px;
    height: 300px;
    background-color: #99aeff;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease-out;
    box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);
    overflow: hidden;
    color: #fff;
}
.item img {
    height: 100%;
     100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    transition: all 0.4s ease-out;
}
.item .text {
     100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 99;
    position: absolute;
    padding: 30px;
}
.item h1 {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
.item h2 {
    margin-top: 20px;
    font-style: italic;
    transform: translateX(200px);
}
.item p {
    margin-top: 20px;
    line-height: 25px;
    transform: translateX(-200px);
    transition-delay: 0.2s;
}
.animate-text {
    opacity: 0;
    transition: all 0.6s ease-in-out;
}
.item:hover {
    box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.64);
    transform: scale(1.05);
}
.item:hover img {
    opacity: 0.2;
}
.item:hover .animate-text {
    transform: translateX(0);
    opacity: 1;
}
.dots {
    position: absolute;
    bottom: 20px;
    right: 30px;
    margin: 0 auto;
     30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.dots span {
     5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    display: block;
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.5s ease;
    transform: translateY(30px);
}
.item:hover span {
    opacity: 1;
    transform: translateY(0px);
}
.dots span:nth-child(1) {
    transition-delay: 0.05s;
}
.dots span:nth-child(2) {
    transition-delay: 0.1s;
}
.dots span:nth-child(3) {
    transition-delay: 0.15s;
}

四、常用的css样式 - `color background font` 渐变色

7.1 不定宽溢出文本适配滚动

不定宽溢出文本适配滚动

<div class="wrap">
  <p title="我的宽度是正常宽度">我的宽度是正常宽度</p>
  <p class="scroll" title="我的宽度是溢出了一小部分">我的宽度是溢出了一小部分</p>
  <p class="scroll" title="我的宽度是溢出了溢出了很大一部分">我的宽度是溢出了溢出了很大一部分</p>
</div>

.wrap {
  position: relative;
   150px;
  overflow: hidden;
}

p {
    white-space: nowrap;
    display: inline-block;
}
p:hover {
    animation: move 1.5s infinite alternate linear;
}
<!-- 父级定宽 -->
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(calc(-100% + 150px), 0);
    }
}
<!-- 父级不定宽 -->
<!-- @keyframes move {
    0% {
        left: 0;
        transform: translate(0, 0);
    }
    100% {
        left: 100%;
        transform: translate(-100%, 0);
    }
} -->

本文转自 https://lousanpang.github.io/2019/05/01/frontend/css/css-summary/，如有侵权，请联系删除。

查看全文

相关阅读:
执行sudo命令时command not found的解决办法
 CentOS7编译安装libc++和libc++abi
CentOS 7 编译安装clang+llvm
如何使用 Issue 管理软件项目？
西门子 S7-300 PLC 从入门到精通的100个经典问题
 PLC_SIM 出现I/O访问错误-技术论坛-工业支持中心-西门子中国
 C# Lambda表达式
 C# Task中的Func, Action, Async与Await的使用
 C#委托的介绍(delegate、Action、Func、predicate)
委托你怎么看？

原文地址：https://www.cnblogs.com/hustshu/p/14862834.html

最新文章
Number.toString SyntaxError
年终总结-2018
CDATA
MySQL易忘知识点梳理
 ES6
ES6
ES6
ES6
ES6
CodeIgniter笔记-去掉index.php

CSS记录篇

一、提高开发效率、提高用户体验

二、常用的css动画

2.1 音乐跳动动画

2.2 横向旋转动画1

2.3 四圆点旋转动画

2.4 条形旋转动画变颜色

2.5 跳动弹性的盒子

2.6 闪烁的点

2.7 三个球逐渐显现

2.8 折叠积木

2.9 伸拉的输入框

2.10 手浮右侧切入动画

2.11 骨架屏动画

2.12 蚂蚁行军图

2.13 裁切路径

2.100 动画参考列表

三、常用的css样式 box-shadow hover

3.1 box-shoadow

3.2 Hover

四、常用的css样式 - color background font 渐变色

4.1 传统色

4.2 渐变色

五、404页面示例

六、常用的动画库

七、常见的css问题

7.1 不定宽溢出文本适配滚动

三、常用的css样式 `box-shadow` `hover`

3.2 `Hover`

四、常用的css样式 - `color background font` 渐变色