php 环状,CSS3能写出这种环状吗,不是环形进度条?
效果图:
用了SCSS来写,如果不太熟悉的话,可以看CSS。话不多说,直接上代码
index.html
loading.scss
// 线条总数
$total: 13;
// 每个线条相差的角度
$angel: 180/($total - 1);
.loading {
background: black;
width: 400px;
height: 400px;
position: relative;
div {
position: absolute;
display: block;
width: 100%;
height: 2px;
top: 50%;
transform-origin: 50% 50%;
&:before {
display: block;
content: "";
height: 100%;
width: 10%;
background: white;
}
@for $i from 1 through $total {
&:nth-child(#{$i}) {
transform: translate3d(0, -50%, 0) rotate(#{$angel*($i - 1)}deg);
opacity: 0.2 + 0.8 * $i / $total;
}
}
}
}
loading.css
.loading {
background: black;
width: 400px;
height: 400px;
position: relative;
}
.loading div {
position: absolute;
display: block;
width: 100%;
height: 2px;
top: 50%;
transform-origin: 50% 50%;
}
.loading div:before {
display: block;
content: "";
height: 100%;
width: 10%;
background: white;
}
.loading div:nth-child(1) {
transform: translate3d(0, -50%, 0) rotate(0deg);
opacity: 0.26154;
}
.loading div:nth-child(2) {
transform: translate3d(0, -50%, 0) rotate(15deg);
opacity: 0.32308;
}
.loading div:nth-child(3) {
transform: translate3d(0, -50%, 0) rotate(30deg);
opacity: 0.38462;
}
.loading div:nth-child(4) {
transform: translate3d(0, -50%, 0) rotate(45deg);
opacity: 0.44615;
}
.loading div:nth-child(5) {
transform: translate3d(0, -50%, 0) rotate(60deg);
opacity: 0.50769;
}
.loading div:nth-child(6) {
transform: translate3d(0, -50%, 0) rotate(75deg);
opacity: 0.56923;
}
.loading div:nth-child(7) {
transform: translate3d(0, -50%, 0) rotate(90deg);
opacity: 0.63077;
}
.loading div:nth-child(8) {
transform: translate3d(0, -50%, 0) rotate(105deg);
opacity: 0.69231;
}
.loading div:nth-child(9) {
transform: translate3d(0, -50%, 0) rotate(120deg);
opacity: 0.75385;
}
.loading div:nth-child(10) {
transform: translate3d(0, -50%, 0) rotate(135deg);
opacity: 0.81538;
}
.loading div:nth-child(11) {
transform: translate3d(0, -50%, 0) rotate(150deg);
opacity: 0.87692;
}
.loading div:nth-child(12) {
transform: translate3d(0, -50%, 0) rotate(165deg);
opacity: 0.93846;
}
.loading div:nth-child(13) {
transform: translate3d(0, -50%, 0) rotate(180deg);
opacity: 1;
}
php 环状,CSS3能写出这种环状吗,不是环形进度条?相关推荐
- 纯html5+css3能写出什么惊人效果
纯html5+css3能写出什么惊人效果? 在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性 首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video) 离 ...
- 纯html5+css3能写出什么惊人效果?
在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性 首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video) 离线存储, 新的表单元素, 新的表单控件 地理定 ...
- css3三角形兼容_利用css3特性写出三角形(兼容IE浏览器)
利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
- 前端 圆形进度图_图解CSS3制作圆环形进度条的实例教程
首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: CSS Code复制内容到剪贴板 .circleprogress{ width:160px; height ...
- 使用python加PyQt5,利用QMediaPlayer写一个简易的音乐播放器(进度条拖动,音量改变,播放停止切换,歌曲列表))
当你学习了python之后,总想着利用它去做些什么,无论是制作小工具还是小游戏,都是一种锻炼. 那么,利用python加上PyQt5写一个简单的音乐播放器,可能会是一个有趣的体验. 下面我会分享一下如 ...
- [CSS3]环形进度条
来源:https://codepen.io/eZ0/pen/eZXNzd 点击上面链接有源码有示例. .ko-progress-circle {width: 120px;height: 120px;b ...
- 2019年的代码都写完了吗?不如做个Python进度条看看还剩多少
我们都知道,进度条是用来直观展示流程所需时间的优秀工具,以免我们担心流程会突然挂掉,而且我们可以用它来预测代码运行是否正常,借助进度条,每个人都能直观地看到脚本最新的进展情况. 如果你之前没用过进度条 ...
- 使用css3制作一个简易的环形进度条
话不多说,直接上代码: css: section{width:2rem;height:2rem;position: relative;margin:2rem;} .wrap,.circle,.perc ...
- Acitivity(页面)之间的跳转,ProgressBar 进度条,PopupWindow 弹出框,Dialog 对话框,Spinner下拉框
Acitivity(页面)之间的跳转 Acitivity(页面)之间的跳转需要使用到 Intent(意图) Intent intent = new Intent(MainActivity.this(从 ...
最新文章
- java 值类型与引用类型_JAVA 关于值类型和引用类型的区别
- 利用oracle执行系统命令,利用oracle存储过程执行操作系统命令(转)
- ansible-playbook组件解析及操作全解
- 联想T460 Win10下“系统中断”CPU占用率高的解决办法
- 三菱plc选型手册_模拟量是什么?PLC和模拟量是如何转换的?
- java中的tostring_java 中重写toString()方法
- 计算机工程师分级_这些是每个计算机工程师都应该知道的数字
- enable 华为交换机ntdp_华为交换机配置
- 计算机电源在线工作,计算机开关电源的工作原理与维修2.pdf
- 在java中关于封装性的说法中错误的是_java题库2
- hough变换检测直线 matlab,Hough变换直线检测MatLab代码 | 学步园
- 串口服务器是什么,有什么功能
- cas和saml_结合使用SAML安全令牌和Microsoft Web Services增强功能
- xiaoxin juju needs help - 组合公式
- 关于X509证书和密钥的概念
- 参考C++高级进阶教程
- 市场营销问题 (二):产品属性的效用函数
- linux查看磁盘空间大小
- 【面试】大佬是如何面试别人List相关知识的
- linux 后台运行jar包 报错no main manifest attribute, in xxx.jar
热门文章
- 【BZOJ3049】Island Travels,SPFA预处理+状态压缩DP
- [SDOI2006]保安站岗 树dp
- 2017.8.11 OSU 失败总结
- 【英语学习】【English L06】U03 House L1 What type of apartment do you want to rent?
- Ubuntu安装指定版本clang-format
- Whitted光线追踪实现
- swing point 怎么让x 不变_Swing舞出我人生 Vol.02 / 我的人生分为跳舞之前和跳舞之后...
- html手机端富文本,pc端富文本编辑的字符串在手机端适配
- Observe rainy world
- UnrealEngine4 PBR Shading Model 概述