html风车相册代码,Css Html 大风车(示例代码)

简介这篇文章主要介绍了Css Html 大风车(示例代码)以及相关的经验技巧，文章约3675字，浏览量138，点赞数2，值得参考！

div{ border-radius: 50%;position: absolute; }

.red{

border-top:100px solid red;

border-right: 100px solid transparent;

border-bottom: 100px solid transparent;

border-left: 100px solid red;

transform:rotate(-45deg);

left:150px;

top:50px;

}

.yellow{

border-top:100px solid yellow;

border-right: 100px solid transparent;

border-bottom: 100px solid transparent;

border-left: 100px solid yellow;

left:250px;

top:150px;

transform:rotate(45deg);

}

.pink{

border-top:100px solid pink;

border-right: 100px solid transparent;

border-bottom: 100px solid transparent;

border-left: 100px solid pink;

left:150px;

top:250px;

transform:rotate(135deg);

}

.cyna{

border-top:100px solid cyan;

border-right: 100px solid transparent;

border-bottom: 100px solid transparent;

border-left: 100px solid cyan;

left:50px;

top:150px;

transform:rotate(-135deg);

}

@keyframes run{

from{transform: rotate(0deg);}

to{transform: rotate(360deg);}

}

@-webkit-keyframes run{

from{transform: rotate(0deg);}

to{transform: rotate(360deg);}

}

.wrap{

width: 500px;

height: 500px;

line-height: 500px;

text-align: center;

border-radius: 0;

position: relative;

margin:0 auto;

animation:run 2s linear infinite;

}

.limb{

width: 10px;

height: 300px;

border-radius: 0;

background-color: #000;

margin: 0 auto;

left: 245px;

top: 0;

margin-top: -250px;

position: static;

z-index: -1;

}

html风车相册代码,Css Html 大风车(示例代码)相关推荐

平台全局 css代码,css全局样式基础代码(示例代码)
简介这篇文章主要介绍了css全局样式基础代码(示例代码)以及相关的经验技巧,文章约900字,浏览量402,点赞数4,值得参考! body{ font-size:12px; font-family:&q ...
html中字段间距代码,css调字体大小代码 css字与字之间的间距怎么调
html怎么改变字体大小和颜色可以用css改变字体的大小和颜色. 在head标签中添加style标签给页面设置css样式,选择p标签,字体大小用的是"font-size"属在D ...
linux mv编写代码,Linux命令--mv(示例代码)
简介这篇文章主要介绍了Linux命令--mv(示例代码)以及相关的经验技巧,文章约4069字,浏览量253,点赞数7,值得推荐! Linux--mv mv经常被用来做备份命令参数: -b :若需覆盖 ...
ABOV单片机内部中断优先级寄存器IP1x/IPx的设置代码实现讲解及示例代码-[MC96F6332D]
一.准备工作 1.KEIL C51编译环境 2.外部中断EINT示例代码-MC96F6332D 3.MC96F6332D 开发板 4.USB-OCD II仿真器二.代码部分 1.现代单片机MC96F ...
css网页边框样式代码,css3边框样式(示例代码)
我们在设计网页样式的时候,经常会用到边框,那么css中的边框具体有哪些样式呢,下面我们来看. 首先,在css中设置border的时候,我们一般给给出三个值,线条样式,线条粗细,线条颜色. 以上的三个值 ...
利用css实现浮雕效果示例代码
前言最近在看百度地图看到了一个效果,感觉这个效果用在网页上应该蛮赞的,于是就学习了一下. 效果图如下: 浮雕效果需要用到伸缩盒的知识(flex) flex在chrome是完全支持的,要加-webki ...
用html浮雕效果图,利用css实现浮雕效果示例代码
前言最近在看百度地图看到了一个效果,感觉这个效果用在网页上应该蛮赞的,于是就学习了一下. 效果图如下: 浮雕效果需要用到伸缩盒的知识(flex) flex在chrome是完全支持的,要加-webki ...
Android相册中搜索功能,Android开发从相册中选取照片的示例代码
最近项目在做一个功能:就是需要从用户选择头像跳转到相册选择图片,这应该是一个很简单的需求,但是在网上搜了一下有好多都讲的很乱,其实用几十行代码就可以实现的为什么要说的那么复杂呢,下面就简单说一下喽. ...
html与css知识总结,html和css知识总结(示例代码)
今天把整个html和css的总结了一遍.可能还有疏忽之处,共同学习吧 [行为样式三者分离] 不加行内css样式,不加行内js效果 [标签] 1>单标签文档头,告诉浏览器这是一个网页 br换行 ...

html风车相册代码,Css Html 大风车(示例代码)

html风车相册代码,Css Html 大风车(示例代码)相关推荐

最新文章

热门文章