• 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

  • 相关阅读:
    数字图像处理（入门篇）四 像素关系
    云南白药正在度过“中年危机”
    【早读算法】K近邻算法原理小结
    Linux：C_单机五子棋
    【Java面试】Redis存在线程安全问题吗？为什么？
    公众号留言板小程序哪个好用？一一列举
    3D格式转换工具HOOPS Exchange最全技术指南（三）：4大功能特征与典型使用场景
    Stable Diffusion的入门介绍和使用教程
    Spring Boot: Lombok 注解原理分析及实践
    使用docker安装RocketMQ
  • 原文地址：https://blog.csdn.net/Aciel_/article/details/139844813