可控制转速CSS3旋转风车特效

以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS3来了,CSS3的动画功能确实强大。以下是一个纯CSS3制作

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大。以下是一个纯CSS3制作的风车旋转动画,而且也用CSS 3控制速度。

体验效果:
http://hovertree.com/texiao/css3/40/

效果图:
可控制转速CSS3旋转风车特效

可以看到,风车的叶片是三角形,使用css画各种图形请参考:
http://hovertree.com/h/bjaf/jtkqnsc1.htm
http://hovertree.com/h/bjaf/ltgc20vn.htm

css制作动画是用到了animation属性,请参考:
http://hovertree.com/h/bjaf/i309b77d.htm
http://hovertree.com/h/bjaf/fwck53gt.htm
http://hovertree.com/h/bjaf/xpxgjfap.htm
http://hovertree.com/h/bjaf/kqud99m6.htm

扇叶的旋转使用到了transform属性,参考:
http://hovertree.com/h/bjaf/c3bshswk.htm
http://hovertree.com/h/bjaf/lxsexx3m.htm

本示例用到了CSS 3的选择器nth-of-type,参考:
http://hovertree.com/h/bjaf/c2c0k0tf.htm

下面给出本示例的代码:

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" /> <title>可控制转速CSS3旋转风车特效 - 何问起</title> <link rel="stylesheet" href="http://hovertree.com/texiao/css3/40/style/hovertreespin.css"> </head> <body> <div class="wrapper"> <div class="pin-layout"> <a href="#" class="control">暂停</a> <a href="#" class="control">旋转</a> <a href="#" class="control">中速</a> <a href="#" class="control">高速</a> <div class="pillar"> <div class="dot"></div> <span class="item1"></span> <span class="item2"></span> <span class="item3"></span> <span class="item4"></span> </div> </div> <p><b>何问起温馨小提示:</b>暂停后点击页面任何区域都可自动旋转哦!</p> </div><!-- end wrapper --> <div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用于支持CSS3的浏览器。</p> <p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/efqb2w4s.htm" target="_blank">说明</a></p> </div> </body> </html>

CSS文件代码:

*{margin:0; padding:0;} body{background:#eee;width:100%; height:100%;} .wrapper{ position: relative; width: 800px; height:450px; margin:60px auto 0; } .wrapper .pin-layout{ position: absolute; bottom: 0; left: calc(50% - 20px); width:40px; height:280px; } .wrapper .pin-layout::after{ position:absolute; bottom:0; left: calc(50% - 20px); content:""; height:0; width:10px; border-width: 0px 15px 280px 15px; border-style:solid; border-color:transparent transparent #6B3500 transparent; } .wrapper .pin-layout .pillar{ position: absolute; top: -18px; left: calc(50% - 18px); width:36px; height:36px; z-index: 9; transform: rotateZ(45deg); transition:all .9s linear; animation: hovertreespin 3s linear 0s infinite; } .pin-layout .control:hover::after{ position: absolute; left: 0; content: ""; width: 100%; height:100%; background: rgba(0,0,0,.3); } .pin-layout .control{ position: absolute; bottom:0; width: 80px; height:30px; line-height:30px; border: 1px solid #ADADAD; border-radius: 4px; text-align:center; text-decoration:none; letter-spacing:2px; color: white; background: red; } .pin-layout .control:nth-of-type(1){ left: -100px; } .pin-layout .control:nth-of-type(3):focus ~ .pillar{ animation-duration:.8s; } .pin-layout .control:nth-of-type(4):focus ~ .pillar{ animation-duration:.2s; } .pin-layout .control:nth-of-type(2){ right: -100px; background: green; } .pin-layout .control:nth-of-type(3){ bottom: -40px; left: -100px; background: #037862; } .pin-layout .control:nth-of-type(4){ bottom: -40px; right: -100px; background: #036B3E; } .pin-layout .control:nth-of-type(1):focus ~ .pillar{ animation-play-state:paused; } .pin-layout .control:nth-of-type(2):focus ~ .pillar{ animation-play-state:running; } .pin-layout .pillar span[class^="item"]{ position: absolute; top: calc(-200px + 18px); left: 18px; border-width:0px 80px 200px 0px; border-style:solid; } .pin-layout .pillar span[class^="item"]:nth-of-type(1){ z-index:1; border-color:transparent transparent dodgerblue transparent; /*border-color:green red gray blue;*/ } .pin-layout .pillar span[class^="item"]:nth-of-type(2){ z-index:2; border-color:transparent transparent orangered transparent; transform-origin:left bottom; transform: rotateZ(90deg); } .pin-layout .pillar span[class^="item"]:nth-of-type(3){ z-index:3; border-color:transparent transparent greenyellow transparent; transform-origin:left bottom; transform: rotateZ(180deg); } .pin-layout .pillar span[class^="item"]:nth-of-type(4){ z-index:4; border-color:transparent transparent mediumpurple transparent; transform-origin:left bottom; transform: rotateZ(270deg); } .wrapper .pin-layout .pillar .dot{ position: absolute; top: 0; left: 0; border-width: 19px; border-style: solid; border-color: #3C0505 transparent #3C0505 transparent; border-radius:50%; background:#F505EE; z-index:1999; box-shadow:0 0 2px #1A0505; } @keyframes hovertreespin { 0%{ transform: rotate(0deg) } 100%{ transform:rotate(360deg); } }

使用图片扇叶的风车:
http://hovertree.com/h/bjaf/h9tb5itb.htm

特效集合:

http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120270.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 启动spring时报java.lang.NoClassDefFoundError: org/springframework/boot/Bootstrapper解决办法

    启动spring时报java.lang.NoClassDefFoundError: org/springframework/boot/Bootstrapper解决办法D:\Java\bin\java.exe-XX:TieredStopAtLevel=1-noverify-Dspring.output.ansi.enabled=always-Dcom.sun.management.jmxremote-Dspring.jmx.enabled=true-Dspring.liveBeansView.mbeanDomain-Dspring.application.admin.enabled=true“-javaagent:D:\IDEA\IntelliJIDEA

  • Java、Go、Rust大比拼,高并发时代谁能称雄?

    Java、Go、Rust大比拼,高并发时代谁能称雄?作者|马超出品|CSDN(ID:CSDNnews)互联网时代流量的大起大落,很多科技巨头在面对流量的冲击时也都败下阵来,XXX崩了的新闻热搜不断,而Serverless凭借快速伸缩的自动弹性特点,可以从容应对类似的冲击,这也让这种新技术出尽的风头。在Serverless的喧嚣背后,Rust看似牢牢占据了C位,但其实在高并发这个话题下要总结的模式与套路其实很多,尤其是像Tokio、RxJava等专业的编程框架,对于程序员编写高性能程序的帮助很大。为了深入讨论高并发这个话题,本文还是将目光集中.

  • Pycharm中利用Anaconda进行环境配置「建议收藏」

    Pycharm中利用Anaconda进行环境配置「建议收藏」由于不同demo所利用的环境不同,因而大神们开发了Anaconda工具,其中已经安装好了很多包,并且使用conda来对这些进行管理。如此,便可以实现在电脑中存储多个互相不干扰的环境,使用编译器来分别利用这些环境创建不同的项目。

  • 追番必备,动漫角色也可以用人脸识别了

    追番必备,动漫角色也可以用人脸识别了机器之心报道作者:小舟用人脸识别找到你「老婆」。自七十年代以来,人脸识别已经成为了计算机视觉和生物识别领域研究最多的主题之一。近年来,传统的人脸识别方法已经被基于卷积神经网络(CNN)的…

  • linux服务器安装svn超详细介绍

    linux服务器安装svn超详细介绍 #!/bin/shREPOS="$1"REV="$2"exportLANG=en_US.UTF-8LOG_PATH=/tmp/svn.logecho

  • fork函数详解_全纯函数是什么

    fork函数详解_全纯函数是什么从最简单(基础)的一个例子说起,应该说是最基础而不是简单,下面的这个最基础的例子其实并不简单,因为有很多细节。我们需要从fork函数的定义开始说起:man手册官方定义thisfunctioncreatesanewprocess.Thereturnvalueisthezerointhechildandtheprocess-idnumberofthechildintheparent,or-1uponerror.这个函数创建一个新的进程。在子进

    2022年10月28日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号