【每日一练】25—CSS实现按钮悬停发光动画效果

按钮,一直是网站开发项目中不可或缺的内容之一,很多时候,为了做一个好看有趣的动画效果,总是要花很多心思,我们在前面也分享了一些按钮的练习项目。

今天,我们再来练习一个新的关于按钮的效果,下面,我们一起来看一下今天这个项目的最终效果:

HTML代码:

<html>  <head>    <meta charset="utf-8">    <title>【每日一练】25—CSS实现按钮悬停发光动画效果title>  head>  <body>    <div class="container">      <a href="http://www.aierweisi.com"  target="_blank"><span>服务器主机站span>a>      <a href="http://www.webqdkf.com" target="_blank"><span>web前端开发网站span>a>      <a href="http://www.aierweisi.com"  target="_blank"><span>服务器主机站span>a>      <a href="http://www.webqdkf.com" target="_blank"><span>web前端开发网站span>a>    div>  body>html>

CSS代码:

*{  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: 'Poppins', sans-serif;}body{  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  background: #000;}.container{  display: flex;  justify-content: center;  align-items: center;  flex-wrap: wrap;}a{  position: relative;  display: inline-block;  padding: 15px 30px;  color: #fff;  background: transparent;  border: 2px solid #42db14;  text-transform: uppercase;  font-weight: 600;  margin: 40px;  letter-spacing: 2px;  text-decoration: none;  transition: 0.5s;  transition-delay: 0s;  -webkit-box-reflect: below 0px linear-gradient(transparent,#0002);}a:hover{  transition-delay: 1.5s;  color: #fff;  box-shadow: 0 0 10px #42db14,        0 0 20px #42db14,        0 0 40px #42db14,        0 0 80px #42db14,        0 0 160px #42db14;}a:nth-child(2){  filter: hue-rotate(40deg);}a:nth-child(3){  filter: hue-rotate(70deg);}a:nth-child(4){  filter: hue-rotate(90deg);}a span{  position: relative;  z-index: 10;}a:before{  content: '';  position: absolute;  left: -20px;  top: 50%;  transform: translateY(-50%);  width: 20px;  height: 2px;  background: #42db14;  transition: width 0.5s,left 0.5s, height 0.5s,box-shadow 0.5s;  transition-delay: 1s,0.5s,0s,0s;  box-shadow: 5px -8px 0 #42db14,        5px 8px 0 #42db14;}a:hover:before{  width: 60%;  height: 100%;  left: -2px;  transition-delay: 0s,0.5s,1s,1s;  box-shadow: 0px 0 0 #42db14,        0px 0 0 #42db14;}a:after{  content: '';  position: absolute;  right: -20px;  top: 50%;  transform: translateY(-50%);  width: 20px;  height: 2px;  background: #42db14;  transition: width 0.5s,right 0.5s, height 0.5s,box-shadow 0.5s;  transition-delay: 1s,0.5s,0s,0s;  box-shadow: -5px -8px 0 #42db14,        -5px 8px 0 #42db14;}a:hover:after{  width: 60%;  height: 100%;  right: -2px;  transition-delay: 0s,0.5s,1s,1s;  box-shadow: 0px 0 0 #42db14,        0px 0 0 #42db14;}

写在最后

希望今天的【每日一练】项目对你有用,有空的话,可以多试试,这个稍微修改一下CSS就会有新的效果出来,然后又是一个新项目,这个就是练习项目的好处,并且,我们平常的小练习,其实都可以作为我们以后开发的一些素材与灵感来源。

我一直觉得,做开发项目,就像玩搭积木游戏一样,都是一块一块搭建起来,把每一块搭建好了,然后整个项目就好了,从一个点到线到面的过程。

最后,感谢你的阅读,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

【每日一练】193—CSS实现炫酷鼠标悬停动画效果

以下是今天练习的最终效果:

HTML代码:

<html lang="en" ><head>  <meta charset="UTF-8">  <title>【每日一练】193—CSS实现炫酷鼠标悬停动画效果title>  <link rel="stylesheet" href="style.css">
head><body><a href="#" class="slant">AI5460a><a href="#" class="liquid">AI5460a>
<a href="#" class="wave-link"><span>AI5460span> <svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0">path> svg>a>
body>html>

CSS代码:

:root {  --bg-color: #2b2b2b;  --fg-color: rgba(255, 255, 255, 0.9);  --bd-color: rgba(255, 255, 255, 0.2);      --default-bg:     linear-gradient(320deg, #ba4aff, rgba(186, 74, 255, 0) 70%),    linear-gradient(178deg, #008aff, rgba(0, 138, 255, 0) 70%),     linear-gradient(24deg, #00ffc6, rgba(0, 255, 198, 0) 35%),    linear-gradient(2deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));}
html { font-size: 34px; font-weight: 300;}
body { min-height: 100vh; display: grid; place-content: center; grid-template-columns: repeat(3, max-content); gap: 1rem; background: var(--bg-color); font-family: "Montserrat", sans-serif;}
a { position: relative; padding: 0.25rem 1rem; text-decoration: none; color: var(--fg-color); border: 1px solid var(--bd-color); display: flex; justify-content: center; align-items: center;}
a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: var(--default-bg); z-index: -1; transition: clip-path 1000ms ease-out;}
a.slant::before { clip-path: path('M0 0C8.33 -8.33 16.67 -12.5 25 -12.5C37.5 -12.5 36.57 -0.27 50 0C63.43 0.27 62.5 -34.37 75 -34.37C87.5 -34.37 87.5 -4.01 100 0C112.5 4.01 112.38 -18.34 125 -18.34C137.62 -18.34 138.09 1.66 150.48 0C162.86 -1.66 162.16 -25 174.54 -25C182.79 -25 191.28 -16.67 200 0L200 200L0 200L0 0Z');}
a.slant:hover::before { clip-path: path('M0 200C8.33 270.83 16.67 306.25 25 306.25C37.5 306.25 36.57 230.98 50 231.25C63.43 231.52 62.5 284.38 75 284.38C87.5 284.38 87.5 208.49 100 212.5C112.5 216.51 112.38 300.41 125 300.41C137.62 300.41 138.09 239.16 150.48 237.5C162.86 235.84 162.16 293.75 174.54 293.75C182.79 293.75 191.28 262.5 200 200L200 200L0 200L0 200Z');}
a.slant:active::before { clip-path: path('M0 200C8.33 270.83 16.67 306.25 25 306.25C37.5 306.25 36.57 230.98 50 231.25C63.43 231.52 62.5 284.38 75 284.38C87.5 284.38 87.5 208.49 100 212.5C112.5 216.51 112.38 300.41 125 300.41C137.62 300.41 138.09 239.16 150.48 237.5C162.86 235.84 162.16 293.75 174.54 293.75C182.79 293.75 191.28 262.5 200 200L200 200L0 200L0 200Z');}

a.liquid::before { clip-path: path('M0 -0.12C8.33 -8.46 16.67 -12.62 25 -12.62C37.5 -12.62 35.91 0.15 50 -0.12C64.09 -0.4 62.5 -34.5 75 -34.5C87.5 -34.5 87.17 -4.45 100 -0.12C112.83 4.2 112.71 -17.95 125 -18.28C137.29 -18.62 137.76 1.54 150.48 -0.12C163.19 -1.79 162.16 -25.12 174.54 -25.12C182.79 -25.12 191.28 -16.79 200 -0.12L200 -34.37L0 -34.37L0 -0.12Z');}
a.liquid:hover::before { clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');}
a.liquid:active::before { clip-path: ellipse( 100% 0% at 70% 0% );}
a.wave-link { cursor: pointer; font-size: 18px; position: relative; white-space: nowrap; background: transparent; border: 0; overflow: hidden; padding: 5px 0;}a.wave-link:before { content: ''; background: #FFF; position: absolute; width: 100%; height: 1px; top: 100%; left: 0; pointer-events: none;}.link__graphic { position: absolute; top: 0; left: 0; pointer-events: none; fill: none; stroke: #FFF; stroke-width: 1px;}.link__graphic--slide { top: -3px; stroke-width: 2px; transition: transform 0.7s; transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);}a.wave-link:hover .link__graphic--slide { transform: translate3d(-66.6%, 0, 0);}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

本站内容来自用户投稿,如果侵犯了您的权利,请与我们联系删除。联系邮箱:835971066@qq.com

本文链接:http://news.xiuzhanwang.com/post/2936.html

友情链接: