• css--风车案例

     1.做一个固定的风车

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /*1. 行内以及行内块元素,如果html元素中有回撤将会被解析为空白符,会有空白 */
    10.         /*2. 一行内显示的元素空间不足,会自动换行排列 */
    11.         /* 初始化 */
    12.         
    13.         .windmill {
    14.             width: 200px;
    15.             height: 200px;
    16.             background-color: #fff;
    17.             font-size: 0;
    18.         }
    19.         
    20.         .windmill div {
    21.             width: 100px;
    22.             height: 100px;
    23.             background-color: rgb(21, 255, 0);
    24.             display: inline-block;
    25.         }
    26.         /* 圆的弧度看做一个正方形的四角 左上角 右上角 右下角 左下角 */
    27.         
    28.         .blade1 {
    29.             border-radius: 0px 100% 0px 100%;
    30.         }
    31.         
    32.         .blade2 {
    33.             border-radius: 100% 0px 100% 0px;
    34.         }
    35.     style>
    36. head>
    37.  
    38. <body>
    39.     
    40.     <div class="windmill">
    41.         <div class="blade1">div>
    42.         <div class="blade2">div>
    43.         <div class="blade2">div>
    44.         <div class="blade1">div>
    45.     div>
    46. body>
    47.  
    48. html>

     

     

    2.做一个会转动的风车

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /*1. 行内以及行内块元素,如果html元素中有回撤将会被解析为空白符,会有空白 */
    10.         /*2. 一行内显示的元素空间不足,会自动换行排列 */
    11.         /* 初始化 */
    12.         
    13.         .windmill {
    14.             width: 200px;
    15.             height: 200px;
    16.             background-color: #fff;
    17.             font-size: 0;
    18.             margin: 30px auto;
    19.             /* 过渡:在一定的时间内完成动作 */
    20.             transition: all 5s;
    21.         }
    22.         
    23.         .windmill div {
    24.             width: 100px;
    25.             height: 100px;
    26.             background-color: rgb(21, 255, 0);
    27.             display: inline-block;
    28.         }
    29.         /* 圆的弧度看做一个正方形的四角 左上角 右上角 右下角 左下角 */
    30.         
    31.         .blade1 {
    32.             border-radius: 0px 100% 0px 100%;
    33.         }
    34.         
    35.         .blade2 {
    36.             border-radius: 100% 0px 100% 0px;
    37.         }
    38.         
    39.         .windmill:hover {
    40.             transform: rotate(3600deg);
    41.         }
    42.     style>
    43. head>
    44.  
    45. <body>
    46.     
    47.     <div class="windmill">
    48.         <div class="blade1">div>
    49.         <div class="blade2">div>
    50.         <div class="blade2">div>
    51.         <div class="blade1">div>
    52.     div>
    53. body>
    54.  
    55. html>

     

    媒体1

  • 相关阅读:
    华为认证大数据是什么？华为认证大数据有用吗？
    Redis事务、pub/sub、PipeLine-管道、benchmark性能测试详解
    设计程序化交易系统会出现什么误区？
    C++ 设计原则 - 依赖倒置原则
    Git分支管理（IDEA）
    12.OpenFeign 实例（springcloud）
    HDFS 常见的运维技巧汇总
    前端基础建设与架构25 如何设计一个前端 + 移动端离线包方案？
    C语言基础Day7-结构体
    荣威 D7 正式亮相，新能源江湖再战
  • 原文地址：https://blog.csdn.net/Aciel_/article/details/139844813