css各种使用案例合集（二）

1、hover动画

场景1：要求有旋转、变色，有变化过程

场景结果：

代码示例：

<div class="box">
  <div class="headUp"></div>
  <div class="head"></div>
  <div class="mouth">
    <div class="eye"></div>
  </div>
</div>

body{
  margin: 0;
  padding: 0;
  background-color: rgb(39,40,59);
}
.box{
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.headUp{
  position: absolute;
  top: 0;
  left: 0;
  border: 150px solid;
  border-radius: 50%;
  border-color: transparent transparent #d72928 #db3e3d;
  transform: rotate(45deg);
  transition: all 0.3s;
}
.head{
  border: 125px solid;
  width: 0;
  position: absolute;
  top: 50%;
  left: 25px;
  border-radius: 50%;
  border-color: rgb(255,255,255) rgb(248, 210, 69) transparent rgb(242, 242, 242);
  transform: translateY(-50%) rotate(-45deg);
  transition: all 0.3s;
}
.mouth{
  border: 65px solid;
  border-color: transparent rgb(247, 167, 3) transparent transparent;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  transition: all 0.3s;
}
.eye{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  left: -50px;
  top: -15px;
}
.box:hover .headUp{
  border-color: transparent transparent rgb(31,232,182) rgb(22, 215, 167);
  transform: rotate(225deg);
}
.box:hover .head{
  border-color:  transparent rgb(248, 210, 69) rgb(255,255,255) rgb(242, 242, 242);
  transform: rotate(225deg);
  transform-origin: 40% 25%;
}
.box:hover .mouth{
  transform: rotate(135deg);
  transform-origin: 35% 15%;
}

2、文字映射背景

场景1：给sxxhlxxdb文字随机映射背景图

场景结果：

代码示例：

<template>
  <div>
    <div>sxxhlxxdb</div>
  </div>
</template>

<style lang="scss" scoped>
$img: "https://picsum.photos/500/500?random=5";

body,html{
  width: 100%;
  height:100%;
  display: flex;
}

div{
  width: 520px;
  // height: 400px;
  color: transparent;
  font-size: 100px;
  font-weight: bold;
  text-align: center;
  // line-height: 400px;
  background: url($img) no-repeat center center;
  background-size: cover;
  -webkit-background-clip: text;
}
</style>

3、背景渐变

场景1：div背景从左到右由浅蓝色渐变为深蓝色

场景结果：

代码示例：

<div class="gradient-div"></div>  

.gradient-div {  
  width: 300px; 
  height: 200px;
  background: linear-gradient(to right, #a6c2f9, #6ca7ff); /* 从左到右的蓝色渐变 */  
  /* #6ca7ff是深蓝色，#a6c2f9是浅蓝色，渐变方向是to right（从左到右） */  
}