鱼C论坛

 找回密码
 立即注册
查看: 3141|回复: 3

[已解决]不二H5的63课这里不太懂,求解!

[复制链接]
发表于 2018-7-3 22:49:39 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
为何我设置-0.5时没有图形显示,而设置-0.05时却有图形显示。如图:
63.png
63-1.png
如果值-0.5时不显示图形,哪这么设置又有什么意义?
63-2.png
最佳答案
2018-7-4 09:14:28

1、0 0 6 3 - 多点Loading特效【终极版】 - 3.0知识点:keyframes的使用(宝典定义:传送门)+box-shadow(宝典定义:传送门

2、设计了8个方位:上、右上、右、右下、下、左下、左、左上;每个方位有指定box-shadow设置

3、鱼油纠结的第四个位置值,代表代表圆点大小,为了完成“放大缩小”效果

在源码中设置的是-.5em,鱼油确认下自己的代码是否有问题。

此外这种效果上的差别,按照个人审美进行设置,具体数字都可以变化,只要效果能呈现就行


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-7-4 09:14:28 | 显示全部楼层    本楼为最佳答案   

1、0 0 6 3 - 多点Loading特效【终极版】 - 3.0知识点:keyframes的使用(宝典定义:传送门)+box-shadow(宝典定义:传送门

2、设计了8个方位:上、右上、右、右下、下、左下、左、左上;每个方位有指定box-shadow设置

3、鱼油纠结的第四个位置值,代表代表圆点大小,为了完成“放大缩小”效果

在源码中设置的是-.5em,鱼油确认下自己的代码是否有问题。

此外这种效果上的差别,按照个人审美进行设置,具体数字都可以变化,只要效果能呈现就行


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-7-4 18:10:31 | 显示全部楼层
不二如是 发表于 2018-7-4 09:14
1、0 0 6 3 - 多点Loading特效【终极版】 - 3.0知识点:keyframes的使用(宝典定义:传送门)+box-shadow ...

但是不二,我回到时家又重新试了一下代码发现我的代码没问题。当第四个值设置为-0.05时有图形显示。如图:
63-1.png
当第四个值设置为-0.5时没有显示。这是什么原因呢?
附上完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆阵</title>
    <style type="text/css">
        body{
            background: #AFE;
            margin: 200px;
        }
        .load{
            font-size: 33px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            text-indent: -8888em;

            #animation: load-effect .9s infinite linear;
            /*  ☆第一个参数,代表距离左侧的水平位移距离。

                ☆第二个参数,代表距离上侧的纵向移动距离。

                ☆第三个参数,代表清晰度,0则没有模糊效果。

                ☆第四个参数,代表圆点大小,1.5em表示将阴影外扩3/2宽度。

                ☆第五个参数,设置颜色。*/
            box-shadow:3em 0 0 -.05em #ff88c2;
            #box-shadow: 0 -3em 0 .2em #FCC, 2em -2em 0 0 #FFB7DD, 3em 0 0 -.5em #FF88C2, 2em 2em 0 -.5em #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 -.5em #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 0 #8C0044;
            #box-shadow: 0 -3em 0 0 #FCC, 2em -2em 0 .2em #FFB7DD, 3em 0 0 0 #FF88C2, 2em 2em 0 -.5em #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 -.5em #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
            #box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 0 #FFB7DD, 3em 0 0 .2em #FF88C2, 2em 2em 0 0 #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 -.5em #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
            #box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 0 #FF88C2, 2em 2em 0 .2em #F4A, 0 3em 0 0 #F08, -2em 2em 0 -.5em #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
            #box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 -.5em #FF88C2, 2em 2em 0 0 #F4A, 0 3em 0 .2em #F08, -2em 2em 0 0 #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
        }

        @keyframes load-effect {

        }
    </style>
</head>
<body>
<div class="load">鱼C工作室</div>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-7-6 20:19:33 | 显示全部楼层
隨鈊乄鎍慾 发表于 2018-7-4 18:10
但是不二,我回到时家又重新试了一下代码发现我的代码没问题。当第四个值设置为-0.05时有图形显示。如图 ...

问题弄明白了。第四个参数是以本尊的半径为基准。如果我把此参数设置为(box-shadow:0 0 0 0.5em #ff88c2;),表示阴影的半径缩小为零了。所以没有图形显示。特此写出来以便有相同疑问的鱼油参考
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-22 07:48

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表