完整的代码,你可以戳这里:CodePen Demo -- CSS Cos/Sin Math function 快速实现圆弧轨迹动画 在之前,我们想实现一个圆弧动画,如下所示,还是稍微有点点麻烦的: 有了三角函数之后,类似的动画,可以节省部分代码实现: @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; } .g...
syntax:'<angle>'; inherits: false; initial-value:0deg; }ul{position: relative; }li{position: absolute; inset:0;border-radius:50%;animation: move3sinfinite ease-in-out;transform:translate(calc(sin(var(--angle)) *60px),calc(cos(var(--angle)) *60px) ); }@for$i from1to11{li:nth-...
我们将` border-image `换成` background-image ` + 伪元素的方案，这也是在 ` border-image ` ...
这里表示的是与屏幕宽度相关的样式设置,上面的代码表示当屏幕宽度大于 900px 时,内部的样式代码块才能生效。 其实不仅仅是上面的屏幕宽度媒体查询,在 CSS 中,存在大量的以@符号开头的规则。称之为@规则(at-rule)。本文就将介绍一下除去媒体查询之外,其他有意思的且在未来会越来越重要的@规则规则。 at-rule @规...
syntax: '<angle>'; inherits:false; initial-value: 0deg; } .g-single{ background:#000; width:20px; height:20px; border-radius:50%; animation: move3sinfinite linear; transform:translate( calc(sin(var(--angle)) *10vmin), calc(cos(var(--angle)) *10vmin) ...
An outset border. The effect depends on the border-color value. No border. A hidden border. A mixed border. Try it Yourself » Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is...
border:1px solid #1e90ff; padding:5px; } Try it Yourself » Syntax of the var() Function Thevar()function is used to insert the value of a CSS variable. The syntax of thevar()function is as follows: var(--name, value)
syntax:'<angle>'; inherits: false; initial-value:0deg; }div{width:200px;height:200px;border-radius:50%;background:conic-gradient(#fc0,#fc015deg, transparent15deg, transparent30deg);transform:rotate(var(--angle));animation: propertyRotate2sinfinite linear; ...
syntax: '<angle>'; inherits: false; initial-value: 0deg; } div { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(#fc0, #fc0 15deg, transparent 15deg, transparent 30deg); transform: rotate(var(--angle)); ...
.box{height:150px;width:150px;background:#fff;border-radius:20px;box-shadow:0px5px10px0pxrgba(0,0,0,0.5);} This will be the output: Usingbox-shadowwith the:hoverpseudo-class andtransformproperty box-shadowcan also be affected by the:hoverpseudo-class. You could add a shadow to a ...