做网站怎么租个空间,wordpress子网站,天津广告公司排行榜,福州网站专业建设效果展示 CSS 知识点
实现圆圈文字animation 属性回顾
实现思路
从效果的实现思路很简单#xff0c;其实就是两个圆圈就可以实现。外层大圆#xff08;灰色#xff09;用于圆圈文字的展示#xff0c;而内圆#xff08;藏青色#xff09;主要用于存放 Logo 图片。布局采…效果展示 CSS 知识点
实现圆圈文字animation 属性回顾
实现思路
从效果的实现思路很简单其实就是两个圆圈就可以实现。外层大圆灰色用于圆圈文字的展示而内圆藏青色主要用于存放 Logo 图片。布局采用绝对定位。具体层次结构如下图。 实现整体页面布局
div classcirclediv classlogo/divdiv classtext!-- nbsp; 主要是用于单词之间的间距 --pMuhammadnbsp;Isshadnbsp;-nbsp;Creativenbsp;UX/UInbsp;Designernbsp;-nbsp;-/p/div
/div实现外部大圆和 Login 样式
.circle {position: relative;height: 400px;border-radius: 50%;display: flex;justify-content: center;align-items: center;/* 用于测试文字时的样式 *//* width: 400px; *//* background: #ccc; */
}.logo {position: absolute;width: 310px;height: 310px;background: url(./user-3.png) no-repeat center;background-color: aqua;background-size: cover;border-radius: 50%;
}圆圈文字拆分为多个 span 标签
const text document.querySelector(.text p);
text.innerHTML text.innerText.split().map((char, i) {// 进行角度旋转从而实现圆圈文字旋转角度影响字符之间的间距8.7是本案例中最适合的间距大小return span styletransform: rotate(${i * 8.7}deg)${char}/span;}).join();编写圆圈文字的样式和动画
.text {position: absolute;width: 100%;height: 100%;animation: rotateText 10s linear infinite;
}keyframes rotateText {0% {transform: rotate(360deg);}100% {transform: rotate(0);}
}.text span {position: absolute;left: 50%;font-size: 1.2em;/* 文字圆圈大小 外层大圈 / 2*/transform-origin: 0 200px;
}完整代码下载
完整代码下载
