纯CSS实现炫酷旋转小风车

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>旋转小风车</title><style type="text/css">            .container{position: absolute;top:12%;left: 0;right: 0;bottom: 0;margin: auto;}.box_block{position: relative;width: 300px;height: 300px;margin: 0 auto;animation: Positive_rotation 4s linear infinite;}.box_block:hover{animation:contrarotation .8s linear infinite;/*linear 动画从头到尾的速度是相同的*//*infinite 动画无限次播放*/}/*反向旋转*/@keyframes contrarotation{from{transform: rotate(0deg)}to{transform: rotate(-360deg)}}/*正向旋转*/@keyframes Positive_rotation{from{transform: rotate(0deg);}to{transform: rotate(360deg);}}.div1{width: 0;height: 0;border:75px solid #ffb02d;border-left-color: transparent;/*隐藏*/border-bottom-color: #3aa37a;float: left;}.div2{width: 0;height: 0;border: 75px solid #ffcd35;border-top-color: transparent;border-right-color: #ee7a65;float: left;}.div3{width: 0;height: 0;border:75px solid #a0bd77;border-bottom-color: transparent;border-right-color: #5687e7;float: left;}.div4{width: 0;height: 0;border:75px solid #5697fe;border-right-color: transparent;border-top-color: #ee7a65;float: left;}.stick{width: 14px;height: 400px;background: #666666;z-index: -1;left: 0;top:86px;bottom:0;right: 0;margin: auto;position: absolute;}</style></head><body><div class="container"><div class="box_block"><div class="div1"></div><div class="div2"></div>    <div class="div3"></div><div class="div4"></div><div class="remove_blocks" style="clear: both;"></div></div><div class="stick"></div>            </div></body>
</html>

效果图：

转载于:https://www.cnblogs.com/Best-Chen/p/9739545.html

纯CSS实现炫酷旋转小风车相关推荐

纯css实现炫酷侧边栏
纯css实现炫酷侧边栏有疑问的小伙伴可以深入探讨学习
你不知道的CSS妙用，纯CSS实现炫酷照片墙
演示地址:https://www.albertyy.com/2020/6/photo.html 原始效果: 鼠标经过效果: 鼠标点击效果: 代码: <!DOCTYPE html> < ...
html背景斜线,巧妙的实现 CSS 斜线(炫酷的小效果)
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com ...
纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
炫酷html动画,纯CSS3一个炫酷动画
纯CSS3一个炫酷动画通过下边的代码可以看到这个例子的html代码还是很简单的,中间类似图标的部分是通过给两个围绕盒子爬的虫子通过给 HTML代码 CSS代码 body{ margin: 0; b ...
【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构该旋转银河系星空背景特效的HTML结果只需 ...
HTML+CSS实现炫酷的登录界面
你好,我是罡罡同学! 代码谱第一页忘掉心上人,最后一页...... 谢谢大家的支持,您的一键三连是罡罡同学前进的最大动力! 打赏一点钱,帮我买包辣条,继续创作,谢大家! 一键三连一键三连一键三连 ...

纯CSS实现炫酷旋转小风车

纯CSS实现炫酷旋转小风车相关推荐

最新文章

热门文章