css | caihai123

# 几个按钮

默认按钮

主要按钮

成功按钮

信息按钮

警告按钮

危险按钮

点击查看代码

<template>
  <div style="padding:20px 0">
    <div class="pan-btn pan-blue">默认按钮</div>
    <div class="pan-btn pan-primary">主要按钮</div>
    <div class="pan-btn pan-success">成功按钮</div>
    <div class="pan-btn pan-info">信息按钮</div>
    <div class="pan-btn pan-warning">警告按钮</div>
    <div class="pan-btn pan-danger">危险按钮</div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.pan-btn {
  display: inline-block;
  position: relative;
  font-size: 14px;
  color: #fff;
  padding: 14px 36px;
  border-radius: 8px;
  border: none;
  background: #324157;
  transition: all 0.6s ease;
  cursor: pointer;
}

.pan-btn:hover {
  color: #324157;
  background: #fff;
}

.pan-btn:after,
.pan-btn:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0%;
  transition: all 0.4s ease;
  background: #324157;
}

.pan-btn:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}
.pan-btn:hover:after,
.pan-btn:hover:before {
  width: 100%;
  transition: all 0.6s ease;
}

/* 默认按钮 */
.pan-blue {
  background: #324157;
}
.pan-blue:hover {
  color: #324157;
}
.pan-blue:after,
.pan-blue:before {
  background: #324157;
}

/* 成功按钮 */
.pan-primary {
  background: #3a71a8;
}
.pan-primary:hover {
  color: #3a71a8;
}
.pan-primary:after,
.pan-primary:before {
  background: #3a71a8;
}

/* primary */
.pan-success {
  background: #30b08f;
}
.pan-success:hover {
  color: #30b08f;
}
.pan-success:after,
.pan-success:before {
  background: #30b08f;
}

/* 信息按钮 */
.pan-info {
  background: #4ab7bd;
}
.pan-info:hover {
  color: #4ab7bd;
}
.pan-info:after,
.pan-info:before {
  background: #4ab7bd;
}
/* 警告按钮 */
.pan-warning {
  background: #fec171;
}
.pan-warning:hover {
  color: #fec171;
}
.pan-warning:after,
.pan-warning:before {
  background: #fec171;
}
/* 危险按钮 */
.pan-danger {
  background: #e65d6e;
}
.pan-danger:hover {
  color: #e65d6e;
}
.pan-danger:after,
.pan-danger:before {
  background: #e65d6e;
}
</style>

点击查看代码

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

<script>
export default {};
</script>

<style scoped>
.neon-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100px;
  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);
}

</style>

点击查看代码

<template>
  <div class="circle-btn">
    <div class="btn-container">
      <svg width="46px" height="46px" viewBox="0 0 16 16" class="bi bi-arrow-right-short" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.146 4.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.793 8 8.146 5.354a.5.5 0 0 1 0-.708z"/>
        <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5H11a.5.5 0 0 1 0 1H4.5A.5.5 0 0 1 4 8z"/>
      </svg>
      <button>Hover me</button>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.btn-container {
  position: relative;
}

button {
  border: 0;
  border-radius: 50px;
  color: white;
  background: #5f55af;
  padding: 15px 20px 16px 60px;
  text-transform: uppercase;
  background: linear-gradient(to right, #f72585 50%, #5f55af 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 1s ease;
  cursor: pointer;
}

svg {
  box-sizing: border-box;
  background: #f72585;
  padding: 8px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0%;
}

button:hover {
  background-position: left bottom;
}
</style>

点击查看代码

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

<script>
export default {};
</script>

<style scoped>
.frozen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

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%;
  width: 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;
}

</style>

# css文字省略

点击查看代码

.ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 最多显示两行的文字 */
.multi-ellipsis-2{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* 最多显示三行的文字 */
.multi-ellipsis-3{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

# 加载动画

点击查看代码

<template>
  <div class="bouncing-loader">
    <div></div>
    <div></div>
    <div></div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}

.bouncing-loader {
  display: flex;
  justify-content: center;
}

.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}

.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}
</style>

点击查看代码

<template>
  <div class="loader">
    <div class="loading"></div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.loader {
  position: relative;
  height: 112px;
}
.loading {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  border-width: 3px;
  border-radius: 50%;
  border-style: solid;
  border-color: #1f2d3d transparent transparent;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
</style>

# 悬停时在文本周围创建一个阴影框

点我查看效果

点击查看代码

<template>
  <p class="hover-shadow-box-animation">点我查看效果</p>
</template>

<script>
export default {};
</script>

<style scoped>
.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}

.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}
</style>

# 顶部三角形的边框

这是一段内容,这是一段内容,这是一段内容,这是一段内容。

点击查看代码

<template>
  <div class="container">这是一段内容,这是一段内容,这是一段内容,这是一段内容。</div>
</template>

<script>
export default {};
</script>

<style scoped>
.container {
  position: relative;
  background: #ffffff;
  padding: 15px;
  border: 1px solid #dddddd;
  margin-top: 20px;
}

.container:before,
.container:after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 19px;
  border: 11px solid transparent;
  border-bottom-color: #dddddd;
}

.container:after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: #ffffff;
}
</style>

cssarrowplease (opens new window) 帮你做对话框三角

# table-cell垂直居中

居中的文本

点击查看代码

<template>
  <div class="container">
    <div class="center">
      <span>居中的文本</span>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.container {
  border: 1px solid #333;
  height: 250px;
  width: 250px;
}

.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
</style>

# Animate.css

Animate.css

← html vue →