css动画 —— 把你喜欢css动画嵌入到浏览器中

项目前期回顾

​回顾  前期  

你真的会使用 《断点》 吗_0.活在风浪里的博客-CSDN博客业务中使用 断点（break on）必然快速找到问题https://blog.csdn.net/m0_57904695/article/details/127634408?spm=1001.2014.3001.5501     

目录

 效果图

 按钮相关

 荧光按钮

流光按钮 

hover渐变 按钮

跑马灯 按钮

 下载按钮（带下载动画）

下一步按钮（带动画）

 边框线滑动 按钮

下载按钮

hover 对角聚中 按钮 

 hover 折角按钮

 动画提示 按钮

流光按钮：

跑马灯 

loading相关

经典loading

荧光文字loading

方块弹性旋转loading

阶梯 loading

手机端 loading

经典loading

杠杆loading

齿轮loading

流线边框

计算机 

 齿轮loading

3D 旋转魔方 

新年快乐 大灯笼

闪动 呼吸灯

 扫描 效果

打赏动画 

黑夜白天切换

模块选择

 

---

 效果图

效果图过多不在一一展示 代码开始

 按钮相关

 荧光按钮

    
    
    
    




     Button 

流光按钮 

    
    
    
    




     流光按钮

hover渐变 按钮

    
    
    
    




    
        渐变Button
    

跑马灯 按钮

    
    
    
    




    跑马灯

 下载按钮（带下载动画）

    
    
    





    下载

下一步按钮（带动画）

    
    
    





    
        Next
        
            
        
    

 边框线滑动 按钮

    
    
    





    

        表框双线按钮
    

下载按钮

    
    
    





    
        
        下载
    

hover 对角聚中 按钮 

    
    
    





     Button    

 hover 折角按钮

    
    
    





    
        hover 折角按钮
    

 动画提示 按钮

    
    
    





    

        uiverse.io
        
            Tooltip
        
    

流光按钮：

  
    
    
    
  
  
    博客源码

跑马灯 

loading相关

loading网站，一键复制https://epic-spinners.epicmax.co/?mode=light

经典loading

荧光文字loading

    
    
    





    

        

            Loading...
        
    

方块弹性旋转loading

阶梯 loading

手机端 loading

经典loading

杠杆loading

齿轮loading

流线边框

计算机 

    
    


  

  

    

      

      Clear
      /
      *
      7
      8
      9
      -
      4
      5
      6
      +
      1
      2
      3
      0
      00
      .
      =
    
  

  

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: consolas;
}
body 
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #edf1f4;
}
.calculator
{
	position: relative;
	width: 340px;
	padding: 20px;
	border-radius: 20px;
	box-shadow: 15px 15px 20px rgba(0,0,0,0.1),
	-15px -15px 20px #fffb;
}
.calculator .buttons
{
	position: relative;
	display: grid;
}
.calculator .buttons #value
{
	position: relative;
	left: 8px;
	grid-column: span 4;
	height: 100px;
	line-height: 100px;
	padding: 0 20px;
	border-radius: 10px;
	text-align: end;
	font-size: 2em;
	margin-bottom: 12px;
	color: #5166d6;
	overflow: hidden;
	font-weight: 500;
	width: calc(100% - 16px);
	user-select: none;
	box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1),
	inset -5px -5px 20px #fff;
}
.calculator .buttons span 
{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	border-radius: 10px;
	margin: 10px;
	min-width: 40px;
	font-size: 1.2em;
	color: #666;
	font-weight: 700;
	border: 2px solid #edf1f4;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
	-5px -5px 10px #fff;
	cursor: pointer;
	user-select: none;
}
.calculator .buttons span:active 
{
	color: #f44336;
	box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1),
	inset -5px -5px 10px #fff;
}
.calculator .buttons span#clear
{
	grid-column: span 2;
	background: #f44336;
	border: 2px solid #edf1f4;
	color: #fff;
}
.calculator .buttons span#plus
{
	grid-row: span 2;
	background: #31a935;
	border: 2px solid #edf1f4;
	color: #fff;
}
.calculator .buttons span#equal
{
	grid-row: span 2;
	background: #2196f3;
	border: 2px solid #edf1f4;
	color: #fff;
}
.calculator .buttons span#clear:active,
.calculator .buttons span#plus:active,
.calculator .buttons span#equal:active
{
	box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
	-5px -5px 10px #fff,
	inset 5px 5px 10px rgba(0,0,0,0.1);
}
.toggleBtn
{
	position: fixed;
	top: 20px;
	right: 20px;
	background: #555;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid #edf1f4;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
	-5px -5px 10px #fff;
}
.dark .toggleBtn
{
	background: #edf1f4;
	border: 2px solid #333;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.5),
	-5px -5px 10px rgba(255,255,255,0.25);
}
.dark 
{
	background: #282c2f;
}
.dark .calculator
{
	background: #33393e;
	box-shadow: 15px 15px 20px rgba(0,0,0,0.25),
	-15px -15px 20px rgba(255,255,255,0.1);
}
.dark .calculator #value 
{
	color: #eee;
	box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5),
	inset -5px -5px 20px rgba(255,255,255,0.1);
}
.dark .calculator .buttons span 
{
	color: #eee;
	border: 2px solid #333;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.25),
	-5px -5px 10px rgba(255,255,255,0.1);
}
.dark .calculator .buttons span:active 
{
	box-shadow: inset 5px 5px 10px rgba(0,0,0,0.25),
	inset -5px -5px 10px rgba(255,255,255,0.1);
}
.dark .calculator .buttons span#clear,
.dark .calculator .buttons span#plus,
.dark .calculator .buttons span#equal
{
	border: 2px solid #333;;
}
.dark .calculator .buttons span#clear:active,
.dark .calculator .buttons span#plus:active,
.dark .calculator .buttons span#equal:active
{
	box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1);
}

 齿轮loading

  
  

  





    

    

      

        

        

        

        

      
      

        

        

        

        

      
      

        

        

        

        

      
      
loading
    
 

.loader_overlay {
  width: 150px;
  height: 150px;
  background: transparent;
  box-shadow: 0px 0px 0px 100vw rgba(121, 114, 114, 0.67),
    0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
  border-radius: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs {
  z-index: -2;
  width: 100px;
  height: 100px;
  top: -120px !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs__top {
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
  -webkit-animation: rotate 10s infinite linear;
  animation: rotate 10s infinite linear;
}
.loader_cogs__top div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.loader_cogs__top div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.loader_cogs__top div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.loader_cogs__top div.top_part {
  width: 100px;
  border-radius: 10px;
  position: absolute;
  height: 100px;
  background: #f98db9;
}
.loader_cogs__top div.top_hole {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs__left {
  position: relative;
  width: 80px;
  -webkit-transform: rotate(16deg);
  transform: rotate(16deg);
  top: 28px;
  -webkit-transform-origin: 40px 40px;
  transform-origin: 40px 40px;
  -webkit-animation: rotate_left 10s 0.1s infinite reverse linear;
  animation: rotate_left 10s 0.1s infinite reverse linear;
  left: -24px;
  height: 80px;
}
.loader_cogs__left div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.loader_cogs__left div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.loader_cogs__left div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.loader_cogs__left div.left_part {
  width: 80px;
  border-radius: 6px;
  position: absolute;
  height: 80px;
  background: #97ddff;
}
.loader_cogs__left div.left_hole {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs__bottom {
  position: relative;
  width: 60px;
  top: -65px;
  -webkit-transform-origin: 30px 30px;
  transform-origin: 30px 30px;
  -webkit-animation: rotate_left 10.2s 0.4s infinite linear;
  animation: rotate_left 10.2s 0.4s infinite linear;
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
  left: 79px;
  height: 60px;
}
.loader_cogs__bottom div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.loader_cogs__bottom div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.loader_cogs__bottom div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.loader_cogs__bottom div.bottom_part {
  width: 60px;
  border-radius: 5px;
  position: absolute;
  height: 60px;
  background: #ffcd66;
}
.loader_cogs__bottom div.bottom_hole {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Animations */
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
  }
  to {
    -webkit-transform: rotate(376deg);
    transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
  }
  to {
    -webkit-transform: rotate(376deg);
    transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  to {
    -webkit-transform: rotate(364deg);
    transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  to {
    -webkit-transform: rotate(364deg);
    transform: rotate(364deg);
  }
}

3D 旋转魔方 

文件较多已上传资源

新年快乐 大灯笼

闪动 呼吸灯

  
    
    
    
    
    
  
  
    
animation: breath_light 3s ease infinite;
  

 扫描 效果

  
    
    
    
    
    
  
  
    

      项目分析项目分析项目分析
    
  

打赏动画 

    
    
    
    
    

    

    



    

        
        
        

            

                

                    
                        支付宝
                    
                    
                        微信
                    
                
                

                    
                    
                
                

                    支付宝扫一扫
                    微信扫一扫
                
                

                    下次一定
                
            
            

        
        
    

黑夜白天切换

    
    
    
    



    

        
            
            
            
            
            


            
            
        
    
    

        
        我是一个测试文字
    

    

模块选择

    
    
    
    



    

        
欢迎来到彩色之外，您好
        
其余ICON，更多功能在开发，请您点击中间UI，或者点击GitHub查阅文档
    
    

        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
        
HOVER

FOR

SOCIAL