html css3风车,CSS3 风力发电 风车动画
CSS
语言:
CSSSCSS
确定
body {
padding: 0px;
margin: 0px;
background: hsl(212, 50%, 50%);
}
.sun {
width: 40px;
height: 40px;
border-radius: 360px;
background: white;
right: 40px;
top: -120px;
position: absolute;
animation-name: sunrise;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-delay: .1;
animation-play-state: running;
animation-fill-mode: forwards;
}
@keyframes sunrise {
0% {
top: -120px;
}
25% {
top: 19px;
right: 40px;
}
50% {
top: 25px;
right: 40px;
}
100% {
top: 18px;
right: 40px;
}
}
.wmd1 {
-webkit-transform: scale(.6);
position: absolute;
top: 180px;
left: 200px;
perspective: 1000px;
}
.base {} .blades {
width: 350px;
height: 350px;
left: 10%;
top: 10%;
z-index: 2;
border-radius: 50%;
position: absolute;
margin-top: -30px;
margin-left: 50px;
animation: spin 6s linear infinite;
}
.blade1 {
background: white;
position: absolute;
width: 41px;
height: 139px;
top: -10px;
left: 150.5px;
transform: rotate(0deg);
display: inline-block;
background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade2 {
background: white;
position: absolute;
width: 41px;
height: 139px;
top: 105.5px;
left: 41px;
transform: rotate(-90deg);
display: inline-block;
background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade3 {
background: white;
position: absolute;
width: 41px;
height: 139px;
top: 105.5px;
right: 41px;
transform: rotate(-270deg);
display: inline-block;
background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade4 {
background: white;
position: absolute;
width: 41px;
height: 139px;
bottom: -10px;
left: 150.5px;
transform: rotate(180deg);
display: inline-block;
background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.vane1 {
width: 1px;
height: 350px;
left: 175px;
background: white;
position: absolute;
transform: rotate(90deg);
}
.vane2 {
width: 1px;
height: 350px;
left: 171.5px;
background: white;
position: absolute;
transform: rotate(180deg);
}
.base .bottom_base {
position: absolute;
width: 90px;
height: 100px;
left: 162px;
border-right: 16px solid transparent;
border-left: 16px solid transparent;
border-bottom: 380px solid white;
opacity: .8;
z-index: -1;
top: 42.5px;
}
ul {
position: absolute;
top: 180px;
left: -30px;
}
li {
width: 10px;
height: 10px;
background: white;
padding: 2px;
display: block;
margin: 30px;
box-shadow: inset 0px -2px 0px lightgray;
}
li:nth-child(2) {
position: absolute;
top: -45px;
left: 20px;
}
li:nth-child(1) {
position: absolute;
top: 35px;
left: 50px;
}
li:nth-child(3) {
position: absolute;
top: 75px;
left: 50px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
html css3风车,CSS3 风力发电 风车动画相关推荐
- 用html怎么制作风车,css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
- html css3风车,css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
- 如何用css3实现简单旋转的风车
如何用css3实现简单旋转的风车 在DW中想要实现旋转的风车就要使用关键帧keyframes来设置旋转,其实也没什么难度的.先设置它的样式,然后要用定位把它放到合适的位置就可以了. HTML的代码如下 ...
- 悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果 我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
- html中如何实现放大动画,CSS3实现点击放大的动画实例
这次给大家带来CSS3实现点击放大的动画实例,CSS3实现点击放大动画实例的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 最近在工作中遇到一个需求,实现的效果是当点击商品图片右上的收藏按钮触 ...
- CSS3 skew倾斜、rotate旋转动画
css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...
- HTML中button怎么填充GIF,css3给按钮添加背景渐变动画
css3给按钮添加背景渐变动画 button { color:#FFF; font-size:16px; outline:none; width:300px; height:48px; backgro ...
- CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形( transform)、透明、伪元素等)...
一.阴影 1.1.文字阴影 text-shadow <length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的 ...
- html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
原标题:9款用HTML5/CSS3制作的动物.人物动画 今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. ...
最新文章
- POJ1696 Space Ant
- 2021春季每日一题【week5 未完结】
- Java:这是一份全面 详细的 Synchronized关键字 学习指南
- C语言,一种如此美丽的语言
- 2020年度国家自然科学基金医学领域结果公布(9月27后可查)
- echarts的入门案例
- java程序n体问题_2n皇后问题 (Java代码)详解
- 三八妇女节可以应用的PSD分层模板
- 利用脚本启动java程序
- linux是发展历史,linux发展历史.doc.doc
- 关于linux下fork()函数的解析:子进程继续创建子进程,如何停止?
- mini_magick
- python、matplotlib画股票分时图、时间序列图的时候如何跳过没有数据的区域
- win10计算机用户名和密码怎么找到,win10怎么查看wifi账号密码_win10电脑怎么看wifi密码...
- 一篇文章学会ICP许可证如何年检
- 如何共享计算机网络,电脑怎么共享网络给手机上网
- CSS 字体变形 font-variant属性
- linux lpte_PC并行口LPT的IO操作(基于WinIo)
- win10系统添加打印机
- KB奇遇记(3):信息化沙漠
热门文章
- openwrt开启upnp
- 2018dnf服务器维护时间,dnf2018年5月电脑管家活动_2018dnf5月电脑管家活动网址_快吧游戏...
- Android进阶三部曲 第一部《Android进阶之光》已出版(内含勘误)
- linux查看录音驱动程序,linux驱动由浅入深系列:ALSA框架详解 音频子系统之二
- Sox 萨班斯法案--摘录
- 友元 java_深入浅出话友元
- 微信登陆电脑失败是什么情况?
- 2021春节提前放假通知
- 前端提升页面加载速度
- Qt 暗夜黑主题教程(一) 创建带圆角和阴影的无边框窗口