前端日常实践：9#视频演示如何用纯CSS制作一个按钮定位的交互特效
时间：2023-04-05 15:51:06
HTML5
效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击全屏预览的链接。https://codepen.io/zhang-ou/pen/ELWMLr交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cqrNEsm源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/009-aimed-button-effects代码解释定义了dom，容器包含5个span，第一个是按钮文本，还有其他4个用于装饰：BUTTON
居中显示：html,body{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；背景色：黑色；color:silver;}设置文字样式:.box{width:9em;高度：3em；字体大小：30px；文本对齐：居中；行高：3em；字母间距：0.2em；font-family:sans-serif;}在范围中间绘制圆圈：.box{position:relative;}.box::after{content:'';位置：绝对；宽度：3em；高度：3em；边框：1px纯红色；边界半径：50%；left:3em;}绘制范围的交叉坐标线：.boxspan:not(:first-child){position:absolute;背景-c颜色：红色；}.boxspan.top,.boxspan.bottom{width:1px;高度：3em；左：50%；}.boxspan.top{top：-3em；}.boxspan.bottom{bottom：-3em；}.boxspan.left，.boxspan.right{width：3em；高度：1px；top:50%;}.boxspan.left{left:0;}.boxspan.right{right:0;}定义瞄准动画：@keyframesaim{from{filter:opacity(0.2);}到{过滤器：不透明度（0.8）;}}将瞄准动画应用于范围：.box::after{filter:opacity(0);}.boxspan:not(:first-child){filter:opacity(0);}.box:hover::after,.box:hoverspan:not(:first-child){animation:aim1slinearinfinitealternate;}最后，将容器的缓动效果从模糊设置为清晰：.box{filter:blur(2px);transition:0.5s;}.box:hover{filter:blur(0.2px);}完成！知识点：nothttps://developer.mozilla.org/en-US/docs/Web/CSS/:not:first-childhttps://developer.mozilla.org/en-US/docs/Web/CSS/:first-childfilter函数https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Functionsanimation-directionhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
