吉首网站建设,营口网站设计,中国建筑设计院排名一百强,网站开发有哪些竞赛以上是将要实现的效果#xff0c;Javascript框架React的Logo图形#xff0c;首先我们来拆解下#xff0c;它包括三个交叉的椭圆和中间一个圆点#xff0c;所以我们Html元素可以用以下代码实现#xff1a;div classmaindiv classellipse ell… 以上是将要实现的效果Javascript框架React的Logo图形首先我们来拆解下它包括三个交叉的椭圆和中间一个圆点所以我们Html元素可以用以下代码实现div classmaindiv classellipse ellipse1/divdiv classellipse ellipse2/divdiv classellipse ellipse3/divdiv classball/div
/div
整个logo图形的外层以main类包裹里面的ellipse类元素表示椭圆最下面的类名ball表示中间的圆点首先我们让整个logo图形水平垂直居中.main {height: 100vh;display: flex;justify-content: center;align-items: center;position: relative;
}
然后我们给类名ellipse元素及椭圆添加样式很容易想到椭圆是由一个长方形通过设置圆角而来.ellipse {height: 12vw;width: 4vw;border-radius: 50%;border: 0.6vw solid #5ed3f3;position: absolute;
}
由于设置了绝对定位三个椭圆重叠在了一起我们接下来需要做的是让这三个椭圆分离交叉让它们分别以自己的中心旋转一定的角度分别旋转30°-30°90°.ellipse1 {transform: rotate(30deg);
}
.ellipse2 {transform: rotate(-30deg);
}
.ellipse3 {transform: rotate(90deg);
}
最后还缺中间的一个实心圆点位置居中简单.ball {position: absolute;width: 2.5vw;height: 2.5vw;border-radius: 50%;background-color: #5ed3f3;
}
最后定义一个旋转的动画keyframes roll {from {transform:rotate(0deg)}to {transform:rotate(360deg)}
}
给main元素增加一个animation动画旋转一周的持续时间是15s延迟0.5s执行周期是无限循环.main {animation: roll 15s linear 0.5s infinite;
}
其实很多的logo完全可以用CSS写出来就没有必要用图片代替了这样既省了网页的加载压力而且还是矢量的不用担心糊的问题。注关注公众号“太空编程”回复 css揭秘即可获取优质CSS学习资料
