两个半圆,点一下转90°,两个颜色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .wrap {
  8.             border:3px solid black;
  9.             width: 200px;
  10.             height: 200px;
  11.             border-radius: 50%;
  12.             overflow: hidden;
  13.             margin: 50px auto 0;
  14.             position: relative;
  15.             background-color: green;
  16.         }
  17.         .red {
  18.             width: 100px;
  19.             height: 200px;
  20.             position: absolute;
  21.             background-color: red;
  22.         }
  23.         .l {
  24.             width: 100px;
  25.             height: 200px;
  26.             left: 0;
  27.         }
  28.         .t {
  29.             width: 200px;
  30.             height: 100px;
  31.             top: 0;
  32.         }
  33.         .r {
  34.             width: 100px;
  35.             height: 200px;
  36.             right: 0;
  37.         }
  38.         .b {
  39.             width: 200px;
  40.             height: 100px;
  41.             bottom: 0;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46. <div id="app">
  47.     <div class="wrap" @click="change" >
  48.         <div class="red" :class="red_class" ></div>
  49.    </div>
  50. </div>
  51. </body>
  52. <script src="js/vue.js"></script>
  53. <script>
  54.     new Vue ({
  55.         el:"#app",
  56.         data : {
  57.             count : 0 ,
  58.             red_class:'l',
  59.             red_arr :['l','t','r','b']
  60.     },
  61.         methods:{
  62.             change(){
  63.                 this.count ++;
  64.                 this.red_class=this.red_arr[this.count %4]
  65.             }
  66.         },
  67.     })
  68. </script>
  69. </html>

homeworkvue的更多相关文章

随机推荐

  1. BigNum模板

    #include<iostream> #include<cstring> #include<iomanip> #include<algorithm> u ...

  2. pyinstaller 打包python3.6文件成exe 运行

    1.安装pyinstaller  切换到安装目录下script 运行  如我的目录:F:\Program Files\Python36\Scripts pip  install pyinstaller ...

  3. utils05_git在idea下的操作

    1.idea下将工程添加到本地仓库 1>找到自己的git.exe 2>创建本地的git仓库,将项目放入本地仓库 3> *从本地仓库更新 *提交到本地仓库 *比较版本差异 *丢弃我的修 ...

  4. 关于mysql8授权的问题，mysql萌新小白采坑记录

    记录本人第一次使用mysql时踩的坑,因为我从官网下载最新的版本8.0.15msi版本的,直接下一步下一步安装完成之后,本地访问正常,然后服务器安装访问也正常.然后本地连接服务器上的mysql时报错. ...

  5. light oj 1084 线性dp

    #include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...

  6. Delphi 设计模式：《HeadFirst设计模式》Delphi代码---工厂模式之抽象工厂[转]

     1  2 {<HeadFirst设计模式>工厂模式之抽象工厂 }  3 { 抽象工厂的产品                       }  4 { 编译工具:Delphi7.0     ...

  7. 转I/O多路复用之select

    源地址:http://my.oschina.net/pathenon/blog/64090 select的功能可以用一句话来描述: 实现基于I/O多路复用的异步并发编程. 在具体讲解select之前我 ...

  8. [转载] OpenCV2.4.3 CheatSheet学习（三）

    四.图像处理(呵呵,重头戏来了) 1. 滤波 filter2D() 用核函数对图像做卷积. sepFilter2D() 用分解的核函数对图像做卷积. 首先,图像的每一行与一维的核kernelX做卷积: ...

  9. C#icon图标文件转Image

    Icon icon = ICONHelper.GetFileIcon(filePath); MemoryStream mStream = new MemoryStream();//创建内存流 icon ...

  10. Linux时间设置命令

    1.date: 语法格式:date [-u] [-d datestr] [-s datestr] [--utc] [--universal] [--date=datestr] [--set=dates ...