可控制转速CSS3旋转风车特效 -tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

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

高洛峰

Feb 23, 2017 am 10:44 AM

css3

以前制作网页动画一般使用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><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>

Salin selepas log masuk

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

Salin selepas log masuk

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

特效集合：

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

更多可控制转速CSS3旋转风车特效相关文章请关注PHP中文网！

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

3 minggu yang lalu By DDD

Bagaimana untuk memperbaiki KB5055518 gagal dipasang di Windows 10?

3 minggu yang lalu By DDD

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

2 minggu yang lalu By DDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Bagaimana untuk memperbaiki KB5055612 gagal dipasang di Windows 10?

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Java

1662

Tutorial CakePHP

1419

Tutorial Laravel

1313

Tutorial PHP

1262

Tutorial C#

1235

Tunjukkan Lagi

Related knowledge

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Jun 28, 2022 pm 01:39 PM

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Jul 19, 2022 am 11:28 AM

Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Jun 01, 2022 pm 07:15 PM

Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".

Bagaimana untuk melaksanakan sempadan renda dalam css3 Sep 16, 2022 pm 07:11 PM

Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Apr 25, 2022 pm 04:52 PM

Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Jun 10, 2022 pm 01:00 PM

Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3 Apr 28, 2022 pm 04:32 PM

Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. animation-timing-function: nilai atribut kelajuan;}".

Adakah kesan animasi css3 mempunyai ubah bentuk? Apr 28, 2022 pm 02:20 PM

Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.

See all articles