基于jsp的网站建设论文,廊坊seo关键词,建设通和天眼查网站,免费工作总结ppt模板下载“拿来主义”学习边框动画#xff0c;附源码#xff0c;CV可用
扫码关注#xff1a;小拾岁月#xff0c;发送 “边框动画”#xff0c;获取源码。
需求分析 从边框的旋转动画#xff0c;我们可以看出#xff0c;可以在按钮元素的下方添加给 360旋转 的元素。同时…“拿来主义”学习边框动画附源码CV可用
扫码关注小拾岁月发送 “边框动画”获取源码。
需求分析 从边框的旋转动画我们可以看出可以在按钮元素的下方添加给 360°旋转 的元素。同时边框在运行所以我们不可以使用功能 border 来实现却可以通过多个元素的叠加形成间隙来实现一个视觉上的边框。 经过上述分析可知完成边框动画需要以下 3 个元素
按钮元素主元素下方旋转元素旋转运动上方覆盖元素面积小于主元素覆盖在主元素上形成间隙即“边框” 页面布局
button classbtn边框按钮/button样式处理
旋转元素
.btn::before {content: ;width: 200%;height: 200%;background: red;position: absolute;left: 50%;top: 50%;z-index: -1;transform-origin: left top;animation: rotation 1.5s linear infinite;
}keyframes rotation {to {transform: rotate(360deg);}
}注意 我们通过 position: absolute;left: 50%;top: 50%; 将旋转元素定位到主元素的中心点并且通过 z-index: -1;置于主元素下方。另外为其添加选中动画。 对于旋转动画我们需要特别注意的是动画的 基准点 是元素的左上角而不是元素中心点, 可以通过 transform-origin: left top; 进行设置。 覆盖元素
.btn::after {content: ;position: absolute;--gap: 2px;width: calc(100% - var(--gap) *2);height: calc(100% - var(--gap) *2);background-color: #333;left: var(--gap);top: var(--gap);border-radius: inherit;z-index: -1;
}注意 针对于覆盖元素其中--gap: 2px; 是我们预留的边框宽度。 同时根据预留边框的宽度做定位处理使其覆盖在主元素上。 最后在调整元素的边框颜色隐藏超出的部分就可以实现动画效果了。 温馨提示
扫码关注小拾岁月发送 “边框动画”获取源码。
