一款纯css3实现的鼠标经过按钮特效教程

今天，我要向大家展示一款纯CSS3实现的鼠标悬停按钮特效。这个按钮设计简洁，效果惊艳，非常美观。让我们先来看一下效果图：

（图片居中展示）

接下来，我将为大家分享实现的代码。

首先是HTML代码：

```html

```

接下来是CSS3代码：

```css

.contener {

width: 300px;

height: 60px;

background-color: 00bcd4;

line-height: 60px;

color: ffffff;

font-weight: 300;

font-family: 'Roboto';

font-size: 25px;

position: relative;

overflow: hidden;

cursor: pointer;

box-shadow: 1px 1px 1px 333333;

}

.txt_button {

position: absolute;

width: 100%;

}

.contener:hover .circle {

-webkit-animation: oblik 0.4s ease-in; / Safari 和 Chrome /

-moz-animation: oblik 0.4s ease-in; / Firefox /

-ms-animation: oblik 0.4s ease-in; / Internet Explorer /

animation: oblik 0.4s ease-in; / 标准语法 /

transform-origin: 50% 50%; / 动画中心点位置 /

width: 100px; / 设置圆形大小 /

height: 100px; / 设置圆形大小 /

border-radius: 50%; / 创建圆形边框 /

}

/ 定义动画效果的关键帧 /

@keyframes oblik { / 动画名称 /

0% {opacity: 1; transform: scale(0);} / 动画开始状态 /

100% {opacity: 0; transform: scale(5); background-color: 006064;} / 动画结束状态 /

}

```以上就是今天带给大家的纯CSS3实现的鼠标悬停按钮特效。这个特效利用了CSS的动画属性和一些关键帧来实现。当鼠标悬停在按钮上时，会触发动画效果，使按钮周围的圆形元素进行放大和颜色变化。希望这个特效能对你的网站设计有所帮助。如果你对我们的文章感兴趣，请继续关注我们的博客，我们会定期分享更多有关SEO和网站设计的优秀文章。谢谢大家！