CSS3-钟表动画

╰+攻爆jí腚メ 2022-06-14 06:49 308阅读 0赞

# 钟表动画： #

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    
        <style>
    
            .div1{
                width: 357px;
                height: 358px;
                margin-top: 100px;
                background-image: url("img/4.png");
                background-repeat: no-repeat;
    
            }
            .div2{
                width: 180px;
                height: 300px;
                padding-left: 48%;
                padding-top: 16%;
                opacity:0.8;
                /*border: 5px solid red;*/
                float: left;
                -webkit-transition: all 2s;
                transform-origin: 50.7%  50.06%;
            }
    
            .div2:hover{
                transform: rotate(360deg);
            }
        </style>
    </head>
    <body>
    <div class="div0">
        <div class="div1">
            <div class="div2">
                <img src="img/8.png">
            </div>
        </div>
    
    </div>
    </body>
    <html>

运行结果：

发表评论取消回复

表情：

评论列表（有 0 条评论，308人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

文章目录一、CSS3 动画简介二、CSS3 动画实现步骤三、动画定义四、代码示例一、CSS3 动画简介

我不是女神ヾ/ 2023年10月14日 15:47/ 0 赞/ 167 阅读

相关 CSS3动画序列（CSS3）

CSS3动画序列（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

旧城等待，/ 2023年10月03日 13:46/ 0 赞/ 22 阅读

相关 CSS3-钟表动画

钟表动画： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-

╰+攻爆jí腚メ/ 2022年06月14日 06:49/ 0 赞/ 309 阅读

相关 CSS3动画

最新更新时间：2019年1月10日19:34:50 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：动画 360°循环旋转

浅浅的花香味﹌/ 2022年05月17日 02:04/ 1 赞/ 352 阅读

相关 CSS3动画

CSS3动画 CSS3动画可以分为过渡动画变形动画（平移，放大，旋转）和自定义动画（帧动画）。变形动画一般和过渡动画或者自定义动画搭配使用。过渡动画

一时失言乱红尘/ 2022年04月11日 11:11/ 0 赞/ 363 阅读

相关 css3制作简易钟表

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

红太狼/ 2022年02月22日 04:25/ 0 赞/ 335 阅读

相关 C#动画实现钟表

1界面设计部分 <Window x:Class="钟表.MainWindow" xmlns="http://schemas.microsoft

红太狼/ 2021年12月21日 02:55/ 0 赞/ 345 阅读

相关 css3 3D动画

3D 在2d的基础上添加 z 轴的变化 3D 位移：在2d的基础上添加 translateZ（），或者使用translate3d（）　　translateZ（）：以

た入场券/ 2021年11月29日 23:50/ 0 赞/ 455 阅读

相关 CSS3动画

CSS3动画 > 网页的动态效果实现动画效果的四种方式 1. 动态图片 2. Flash 3. CSS动画相关属性 4. JavaScript 实现

Dear 丶/ 2021年11月16日 07:38/ 0 赞/ 843 阅读

相关 transform钟表动画

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <s

拼搏现实的明天。/ 2021年11月13日 22:14/ 0 赞/ 353 阅读