Html/CSS动画效果个人练习（12）

最新推荐文章于 2023-03-16 20:18:11 发布

迷人滴巷子哥

最新推荐文章于 2023-03-16 20:18:11 发布

阅读量285

点赞数

分类专栏： CSS 文章标签： css3 js html jquery javascript

本文链接：https://blog.csdn.net/weixin_47445023/article/details/106040716

版权

CSS动画效果个人练习第十二天

Html源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>download</title>
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <a class="btn"><b>Download</b><div></div></a>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
	  <filter id="goo">
		<fegaussianblur in="SourceGraphic" stdDeviation="12" result="blur" />
		<fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
		<fecomposite in="SourceGraphic" in2="goo" operator="atop"/>
	  </filter>
    </defs>
  </svg>

  <svg class="svg" viewBox="0 0 400 400">
    <defs>
      <filter id="duotone-filter-post-one">
        <fecolormatrix type="matrix" values="0.14453125 0 0 0 0.33203125 0.71875 0 0 0 0.27734375 -0.34765625 0 0 0 0.73046875 0 0 0 1 0"></fecolormatrix>
      </filter>
    </defs>
  </svg>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS源代码

body {
   
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: "Source Code Pro";
}
body svg {
   
  position: absolute;
  width: 0;
  height: 0;
}
body .btn {
   
  text-transform: uppercase;
  letter-spacing: 5px;
  padding: 20px 40px;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  color: #fff;
  position: relative;
}
body .btn span {
   
  transition: 0.2s ease-in-out;
}
body .btn:before {
   
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ff00b8;
  left: 0;
  top: 0;
  border-radius: 75px;
  z-index: -1;
  transition-delay: 1s;
  transition: 0.4s ease-in-out;
}
body .btn div {
   
  width: 100%;
  height: 400%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -2;
  -webkit-filter: url("#goo");
          filter: url("#goo");
}
body .btn div:after {
   
  content: '';
  position: absolute;
  width: 100%;
  height: 25%;
  left: 0;
  bottom: 0;
  background: #ff00b8;
}
body .btn div:before {
   
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0px;
  bottom: 0px;
  border-radius: 100%;
  background: #ff00b8;
}
body .btn.loading {
   
  -webkit-animation: flick 7s ease-in-out 1 forwards;
          animation: flick 7s ease-in-out 1 forwards;
}
body .btn.loading:before {
   
  border-radius: 0px;
  box-shadow: inset 0 0 0 3px #ff00b8;
  transition-delay: 1.3s;
  -webkit-animation: loading 5s ease-in-out 1 forwards;
          animation: loading 5s ease-in-out 1 forwards;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  box-sizing: border-box;
}
@-webkit-keyframes loading {
   
  0% {
   
    background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
    background-position: -500px 50%;
    background-size: 925%;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    padding: 20px 40px;
  }
  97.5% {
   
    background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
    background-position: -900px 50%;
    background-size: 925%;
    box-shadow: inset 0 0 0 3px #ff00b8;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    content: '';
    color: #1f00ff;
    padding: 20px 40px;
    z-index: -1;
  }
  100% {
   
    background: #fff;
    background-position: -900px 50%;
    background-size: 925%;
    box-shadow: inset 0 0 0 3px #1f00ff;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    content: 'COMPLETE!';
    color: #1f00ff;
    padding: 20px 40px;
    font-weight: 900;
    z-index: 9;
  }
}
@keyframes loading {
   
  0% {
   
    background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
    background-position: -500px 50%;
    background-size: 925%;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    padding: 20px 40px;
  }
  97.5% {
   
    background

最低0.47元/天解锁文章

迷人滴巷子哥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Html/CSS动画效果个人练习（12）

CSS动画效果个人练习第十二天Html源代码<!doctype html><html><head><meta charset="utf-8"><title>download</title><link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet"><link rel="stylesheet"
复制链接

扫一扫