请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

互动交流 tranform:rotate() 实现动态圆环

4
回复
188
查看
[复制链接]

1

主题

7

帖子

40

积分

 楼主| 2018-10-11 11:46:40 显示全部楼层 |阅读模式
本帖最后由 jam 于 2018-10-11 14:03 编辑

华为快应用IDE真机预览效果和在cmd上build 再扫码看到的效果不一致的吗
1.只有华为ide上真机预览才正常
回复

使用道具 举报

8

主题

98

帖子

530

积分

2018-10-15 20:06:00 显示全部楼层
贴代码上来看看
回复

使用道具 举报

1

主题

7

帖子

40

积分

 楼主| 2018-10-16 12:26:25 显示全部楼层
                    <div class="circle-progress-wrapper">
                        <div class="wrapper-half">
                            <div class="translate-tl">
                                <div style="transform: {{valueL}}">
                                    <div class="wrapper-half inner-left">
                                        <div class="circle-progress circle-main"></div>
                                    </div>
                                    <div class="wrapper-half inner-right">
                                        <div class="circle-progress circle-hodler"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wrapper-half">
                            <div class="translate-tr">
                                <div style="transform: {{valueR}}">
                                    <div class="wrapper-half inner-left">
                                        <div class="circle-progress circle-hodler"></div>
                                    </div>
                                    <div class="wrapper-half inner-right">
                                        <div class="circle-progress circle-main"></div>
                                    </div>
                                </div>
                            </div>   
                        </div>
                    </div>
回复

使用道具 举报

1

主题

7

帖子

40

积分

 楼主| 2018-10-16 12:27:05 显示全部楼层
.circle-progress-wrapper {
    width: 468px;
    height: 468px;
    margin: 31px 0 1px;
}
.translate-tl {
    width: 468px;
    flex-shrink: 0;
}
.translate-tr {
    width: 468px;
    flex-shrink: 0;
    transform: translateX(-234px);
}
.roate-tl {
    transform: rotate(0deg);
}
.roate-tr {
    transform: rotate(160deg);
}
.wrapper-half {
    flex: 1;
    align-items: center;
}
.circle-progress {
    width: 468px;
    height: 468px;
    flex-shrink: 0;
    border-radius: 468px;
}
.circle-main {
    border: 21px solid #F5F5F5;
}
.circle-hodler {
    border: 21px solid #11D59C;
}
.inner-left{
    flex-shrink: 0;
}
.inner-right {
    flex-shrink: 0;
    justify-content:flex-end;
}
回复

使用道具 举报

1

主题

7

帖子

40

积分

 楼主| 2018-10-16 12:27:42 显示全部楼层
        valueR:'{"rotate":"0deg"}',
        valueL:'{"rotate":"0deg"}'
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册