CSS 练习demo-1

202 阅读1分钟

loading 载入动画

使用到的css属性

background:radial-gradient; 
创建一个渐变色的背景颜色

position:absolute; 
绝对定位,基于它的最近的祖先元素进行定位

transform 
允许你旋转,倾斜或平移该元素

border-radius:50%; 
radius半径,修改border的四个角,让一个正方形变成圆

transform-origin:50%;
更改一个元素变形的原点

animation:circle .5s alternate infinite ease;
animation用来指定一组或多组动画

@keyframes规则是通过在动画序列中定义关键帧的样式来控制CSS动画序列中的步骤

animtion-delay:.2s;
动画延迟,定义动画什么时候开始

left:auto; 
left的值是auto,对于绝对定位元素,会忽略left的值,以right为主去定位
如果right的值也是auto,那么元素不会偏离

filter:blur(1px);
模糊1px,将模糊或颜色偏移等图形效果应用于元素上

opacity:7; 
不透明度是7

letter-spacing:12px; 
文字间距 12px

点击预览: 练习代码 效果展示