按钮,一直是网站开发项目中不可或缺的内容之一,很多时候,为了做一个好看有趣的动画效果,总是要花很多心思,我们在前面也分享了一些按钮的练习项目。
今天,我们再来练习一个新的关于按钮的效果,下面,我们一起来看一下今天这个项目的最终效果:
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);
}
写在最后
以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。