可控制转速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)


相关推荐

  • poj 2375

    poj 2375这道题是一道gu

  • IT技术开发人员获得成功的六大步骤

    IT技术开发人士成功的6大步骤一个前辈在移民加拿大后写的文章,写得不错,值得借鉴,转来给大家看看,也给自己序言:经过001多年的洗礼,认识了这里这么多的JJMMGGDD,前几天刚得到签证,无限感慨

    2021年12月25日
  • STM32项目设计:基于stm32f4的智能门锁(附项目视频全套教程、源码资料)[通俗易懂]

    STM32项目设计:基于stm32f4的智能门锁(附项目视频全套教程、源码资料)[通俗易懂]文章目录智能门锁一、项目背景二、项目功能要求三、元件准备四、项目设计(一)原理图设计(二)硬件设计(三)程序设计智能门锁资料链接:stm32智能门锁.rar哔哩哔哩项目展示视频:https://b23.tv/bxfxvd一、项目背景在消费升级渗透在各个领域的今天,国民消费发生着巨大的变化,与每个人息息相关的家居行业也是如此。现今,越来越多的智能家居产品出现在普通老百姓的生活中,智能照明、智能窗帘、智能扫地机器人等各种智能产品都给人们的生活带来了极大的便利。智能门锁作为智能家居中重要的一环,也成

  • 看完这篇HTTP,跟面试官扯皮就没问题了

    看完这篇HTTP,跟面试官扯皮就没问题了我是一名程序员,我的主要编程语言是Java,我更是一名Web开发人员,所以我必须要了解HTTP,所以本篇文章就来带你从HTTP入门到进阶,看完让你有一种恍然大悟、醍醐灌顶的感觉。最初在有网络之前,我们的电脑都是单机的,单机系统是孤立的,我还记得05年前那会儿家里有个电脑,想打电脑游戏还得两个人在一个电脑上玩儿,及其不方便。我就想为什么家里人不让上网,我的同学xxx家里有网,每…

  • 物联网是随着智能化技术的发展_嵌入式物联网开发

    物联网是随着智能化技术的发展_嵌入式物联网开发&#13;&#13;&#13;&#13;&#13;&#13;&#13;从谷歌的AlphaGo将人工智能推进大众视野起,在可预见的未来,人工智能会涉及到我们生活的各个方面,…

  • JavaScript日期格式化及解析

    JavaScript日期格式化及解析JavaScript开发经常需要对日期进行转换,把日期转成字符串或者从字符串生成日期。JavaScript日期对象内置了简单的日期格式化方法toString()和日期解析方法Date.parse(),这两个方法有较大的局限性,不能自定义自定义日期格式化和解析的字符串格式。下面列出一些常用的日期处理JS库。

发表回复

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

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