简单的HelloWorld变色

凶鸡

已于 2022-02-12 22:56:30 修改

阅读量378

点赞数

分类专栏：网页特效文章标签： css css3 html html5 javascript

于 2021-06-29 20:25:37 首次发布

本文链接：https://blog.csdn.net/angry_rooster/article/details/118343181

版权

6 篇文章 1 订阅

订阅专栏

这个网页特效的基本功能就是点击左侧按钮会变色，点击右侧按钮恢复颜色

在这个简单功能的基础上添加一些特效，用以练习CSS。添加的特效有：

鼠标悬浮在按钮上时按钮边框会出现移动的效果
按钮特效的实现需要借助按钮的两个伪元素::before和::after，以及伪类:hover还有过渡样式transition；
鼠标悬浮在按钮上时，边框上下的两个“空隙”会相互反向移动，实际上是两个和背景颜色一样颜色的伪元素斜方块（transform: skew(-50deg)）在动，这就产生了好像边框发生变化的效果
当颜色从原有颜色变为目标颜色时，圆圈遮罩从中间扩大到两侧；当颜色变回原有颜色时，圆圈遮罩从两侧缩回中间
这里的实现需要借助clip-path和transition；
实际上如下图的黑色字体的“Hello World!”的上面一层有一个绝对定位的红色“Hello World!”，只是最开始通过clip-path: circle(0px)产生一个显示部分为半径0px的圆形遮罩空间给隐藏了。当点击“变为红色”按钮后，这个圆形遮罩显示空间变为了半径200px，显示的空间足够大，红色的“Hello World!就会完全显示”。在过渡属性transition的作用下红色字体会慢慢地显示出来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YO9K3qzU-1644677773265)(img/circleClipPath.png “圆形遮罩示意图”)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRaqYgCK-1644677773266)(img/finalEffect.gif “最终效果”)]

关注