利用css样式表做一个旋转写轮眼

成品效果图

首先分析效果图
图中有红色背景圈和里面的三个椭圆和最中心的黑圈组成。
因此，我们应该写一个大的div盒子，来装这三个椭圆div，里面的三个椭圆div和圆的画法类似。

可以用以下代码实现：

        width: 200px;height: 200px;border-radius:100% 0% 100% 0%;border: black 2px solid;

注意：
这里除了两个斜着的椭圆div，还需要画一个竖着的椭圆div，我们可以利用图形的变形操作，将椭圆沿着Z轴旋转45度。

    **用以下代码实现**

   transform: rotateZ(45deg);

关键帧动画写旋转动画
首先写剧本，写每个时间段图片的旋转位置，然后在需要旋转的div下导入这个剧本
代码如下

写剧本代码
@keyframes xly{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}导入剧本代码animation: xly 2s linear infinite;

整个程序的代码如下

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.father{margin: 100px auto;width: 283px;border-radius: 50%;background-color: red;border: 2px solid red;height: 283px;position: relative;animation: xly 2s linear infinite;}.father:hover{animation-play-state: paused;}.son1{width: 200px;height: 200px;border-radius:100% 0% 100% 0%;border: black 2px solid;margin: 0 auto;position: absolute;left: 40px;top: 40px;}.son2{width: 200px;height: 200px;border-radius:0% 100% 0% 100%;border: black 2px solid;margin: 0 auto;position: absolute;left: 40px;top: 40px;}.son3{width: 200px;height: 200px;border-radius:100% 0% 100% 0%;border: black 2px solid;transform: rotateZ(45deg);margin: 0 auto;position: absolute;left: 40px;top: 40px;}.son4{width: 200px;height: 200px;border-radius:0% 100% 0% 100%;border: black 2px solid;transform: rotateZ(45deg);margin: 0 auto;position: absolute;left: 40px;top: 40px;}.son5{width: 50px;height: 50px;background-color: black;border-radius: 50%;position: absolute;left: 115px;top: 115px;}@keyframes xly{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
</style>
<body><div class="father"><div class="son1"></div><div class="son2"></div><div class="son3"></div><div class="son4"></div><div class="son5"></div></div>
</body>
</html>

利用css样式表做一个旋转写轮眼相关推荐

利用css的rotate()做一个3d旋转图集
视频效果: 3d旋转图集思路: 1.要完成这个作品我们一定要理解变形原点的概念,因为要将4张图片形成图中所示的效果,我们一定要改变变形在z轴上的位置,然后使用rotate()形成一个类似于旋转木马一 ...
前端技术分享：一个超级好用的CSS样式表
大家可以经常逛一些程序员比较喜欢的论坛贴吧,你会有不一样的惊喜呢,今天小千就来给大家分享一个在GitHub上面发现的超级好用的CSS样式表,来看一看. 看名称本以为是一个动画库,但是看下来才发现这是一 ...
[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
用html和css做一个旋转的正方体
用html和css做一个旋转的正方体 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
css样式表和选择器
CSS样式----图文详解:css样式表和选择器主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...
html 将盒子固定浏览器,浏览器默认css样式表 css之左盒子固定,右盒子自适应的一种实现方式...
浏览器默认css样式表在页面布局或者是列表布局中,我们经常出现一个场景:左边是固定宽度的盒子,右边自适应:div>label>Open... maoguiyou 2016年09月13日 ...
怎样用html设置文档格式,Dreamweaver使用CSS样式表设置网页文本格式
Dreamweaver使用CSS样式表设置网页文本格式互联网发布时间:2008-10-17 19:35:50 作者:佚名我要评论本文章介绍如何在 Dreamweaver 中使用层叠 ...
（转）CSS样式表继承详解
什么是css 继承? 要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在 ...
(原创分享，改进版)CSS样式表速成！
大话CSS样式表速成程序和美工一直是相辅相成的,一个好的Web项目需要不仅仅是程序的完美,同样一个好的用户使用页面,也可以吸引一大部分用户.往往在传统的概念里,程序和美工总是被分开来说.一方面,这 ...

利用css样式表做一个旋转写轮眼

利用css样式表做一个旋转写轮眼

利用css样式表做一个旋转写轮眼相关推荐

最新文章

热门文章