jquery+svg实现向左向右剪头点击动画效果代码
代码语言:html
所属分类:其他
代码描述:jquery+svg实现向左向右剪头点击动画效果代码
代码标签: jquery svg 向左 向右 剪头 点击 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
.arrow {
--active: #fff;
--border: rgba(255, 255, 255, .12);
display: block;
position: relative;
width: 44px;
height: 44px;
}
.arrow.left {
transform: scaleX(-1);
}
.arrow i {
display: block;
position: absolute;
margin: -10px 0 0 -10px;
width: 20px;
height: 20px;
left: 50%;
top: 50%;
}
.arrow i:before, .arrow i:after {
content: "";
width: 10px;
height: 2px;
border-radius: 1px;
position: absolute;
left: 50%;
top: 50%;
background: var(--active);
margin: -1px 0 0 -5px;
display: block;
transform-origin: 9px 50%;
}
.arrow i:before {
transform: rotate(-40deg);
}
.arrow i:after {
transform: rotate(40deg);
}
.arrow:before, .arrow:after {
content: "";
display: bloc.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0