【CSS求助】请大佬看一看怎么取消居中
本帖最后由 wr20060926 于 2020-5-16 22:41 编辑辟垃圾，MMP，你的垃圾代码批不要发上来嘛！皮纳基！二次开发可用性几乎为零！网络上找的，与他战斗了半天，还是没找到完美取消居中的方法，（原作者也真是，一点注释都没有.....）
一定要保持原有动画，然后让他老老实实的就在span/div/a/button的位置上，别乱跑！
https://wr20060926.lanzouj.com/ico479g
试一下的朋友，注意把背景元素去掉，（知识无价，但是我真的还是第一次见过这么懒的、把素材放到网上的，而且素材设置的只利于装逼展示，超级不利于使用！）
关键CSS
```css
@font-face {
font-family: "bw";
src: url("https://robindelaporte.fr/codepen/play/BwModelicaSS01-ExtraBold.woff") format("woff");
}
html {
font-size: 62.5%;
}
.home {
position: fixed;
height: 100vh;
width: 100vw;
overflow: hidden;
top: 0%;
left: 0%;
background-color: #e9f5ff;
}
.home canvas {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 4;
pointer-events: none;
}
.home span {
position: relative;
z-index: 6;
font-family: "bw";
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
font-size: 3rem;
color: #fff;
pointer-events: none;
}
.home a {
font-family: "bw";
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
font-size: 3rem;
color: #fff;
background-color: #acc7ed;
border-radius: 10rem;
padding: 1.5rem 4rem 2rem;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.home a span {
position: relative;
opacity: 0;
}
.home a:after {
content: "";
background: linear-gradient(56deg, #61dafb 0%, #d6cbf6 46%, #f2056f 100%);
width: 80%;
height: 20%;
position: absolute;
bottom: -4px;
left: 10%;
opacity: 0;
-webkit-filter: blur(15px);
filter: blur(15px);
border-radius: 10rem;
-webkit-transform: translateZ(-1px);
transform: translateZ(-1px);
-webkit-transition: opacity 0.6s ease;
transition: opacity 0.6s ease;
}
.home a:before {
content: "";
background: linear-gradient(56deg, #61dafb 0%, #d6cbf6 46%, #f2056f 100%);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
border-radius: 10rem;
-webkit-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
}
.home a:hover {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-transform: translate(-50%, -50%) scale(1.35);
transform: translate(-50%, -50%) scale(1.35);
-webkit-transform-origin: center;
transform-origin: center;
}
.home a:hover:after {
opacity: 1;
-webkit-transition: opacity 0.6s ease;
transition: opacity 0.6s ease;
}
.home a:hover:before {
opacity: 1;
-webkit-transition: opacity 0.6s linear;
transition: opacity 0.6s linear;
}
``` home a 取消绝对定位 就可以调整了
不知道楼主是想取消哪个居中 字体 还是椭圆边框 还是边框上面的○？
想改的话 就直接改他们的位置就行了 只是他写的是百分比。 pkni1230 发表于 2020-5-15 23:57
home a 取消绝对定位 就可以调整了
问题没有得到解决 讲a标签设为块级标签 调节x 轴参数canvas 的位置和 大小也要做相应调整
页:
[1]