Controllable speed CSS3 rotating windmill special effects-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Controllable speed CSS3 rotating windmill special effects

高洛峰

Feb 23, 2017 am 10:44 AM

css3

In the past, JavaScript was generally used to create web page animations. Now more and more animations are implemented using pure CSS, and animation control can also be implemented using CSS3. Because CSS 3 is here, the animation function of CSS 3 is indeed powerful. The following is a windmill rotation animation made purely with CSS3, and also uses CSS3 to control the speed.

Experience effect:
http://hovertree.com/texiao/css3/40/

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

As you can see, the blades of the windmill are triangular. To use CSS to draw various graphics, please refer to:
http://hovertree.com/h/bjaf/jtkqnsc1.htm

http://hovertree.com/h/bjaf/ltgc20vn.htm

CSS animation uses the animation attribute, please refer to:
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

The rotation of the fan blades uses the transform attribute, reference:
http://hovertree.com/h/bjaf/c3bshswk.htm

##http:// hovertree.com/h/bjaf/lxsexx3m.htm

This example uses the CSS 3 selector nth-of-type, reference:

http://hovertree.com /h/bjaf/c2c0k0tf.htm

The code for this example is given below:

<!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><p class="wrapper">
    <p class="pin-layout">
        <a href="#" class="control">暂停</a>
        <a href="#" class="control">旋转</a>
        <a href="#" class="control">中速</a>
        <a href="#" class="control">高速</a>
        <p class="pillar">
            <p class="dot"></p>
            <span class="item1"></span>
            <span class="item2"></span>
            <span class="item3"></span>
            <span class="item4"></span>
        </p>
    </p>
    <p><b>何问起温馨小提示：</b>暂停后点击页面任何区域都可自动旋转哦!</p></p><!-- end wrapper --><p style="text-align:center;margin:100px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;"><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></p></body></html>

CSS file code:

*{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);
    }}

Windmill using image fan blades:

http://hovertree.com/ h/bjaf/h9tb5itb.htm
Special effects collection:

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

For more controllable speed CSS3 rotating windmill special effects, please pay attention to the PHP Chinese website for related articles!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PM

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

See all articles