zoukankan      html  css  js  c++  java
  • animation练习

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .box{
    200px;
    height: 200px;
    /*盒子的边框 宽度 颜色 transparent表示透明 */
    border: 10px solid transparent;
    /*使盒子成为圆的*/
    border-radius: 50%;
    /*盒子的左边框颜色*/
    border-top-color:red;
    /*盒子的左边框宽度*/
    border-left-0px;
    position: relative;
    animation: move 2s infinite linear;
    }
    .box::before{
    content: "";
    20px;
    height: 20px;
    background-color: red;
    border-radius:50% ;
    /*绝对定位*/
    position: absolute;
    right: 14px;
    top: 16px;
    }
    /*
    伪元素和伪类
    after before
    hover active
    CSS3中提出伪类
    ::后面跟的是伪元素(可以视为虚拟元素,可以用真实元素模拟)
    :后面跟的是伪类
    状态伪类:hover active(用户触发某个状态时会选中选择器)
    伪类选择器:first-child,last-child,nth-child(n)·····用来过滤
    *
    */
    @keyframes move{
    0%{
    transform: rotate(0deg);
    }
    100%{
    transform: rotate(360deg);

    }
    }
    </style>
    </head>
    <body>
    <div class="box"></div>
    </body>
    </html>

  • 相关阅读:
    php 全局变量 2
    PHP 全局变量 1
    巧用sublime
    ini_get和ini_set
    sublime安装sftp
    常用数组函数
    二维数组去重
    判断常量
    system(),exec() ,passthru()
    【收集】Python 微优化
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13367556.html
Copyright © 2011-2022 走看看