程序员经验分享-hwhale

CSS3让登陆面板旋转起来

2023-05-16

这里只考虑chrome的兼容。

LoginRotate.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆面板旋转</title>
    <style>
        body {
            font-family: "Microsoft YaHei", "微软雅黑";
        }

        .container {
            /*创建3D场景*/
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;
            -webkit-transform-style: -webkit-preserve-3d; /*告诉浏览器以下transform操作是在3D场景下进行的*/
        }

        #login-panel {
            /*-webkit-transform: rotateX(45deg);*/
        }

        .login {
            width: 500px;
            height: 400px;
            margin: 100px auto;
            text-align: center;

            border: 1px solid #ABCDEF;
            border-radius: 10px;
            box-shadow: 0 0 3px 3px #ABCDEF;
        }
        .login h1 {
            margin: 50px 0;
        }
        .login-row span {
            font-size: 18px;
        }
        .login-row input {
            height: 25px;
            line-height: 25px;
            padding: 0 10px;
            margin: 10px 0;
        }

        .btn {
            outline: none;
            background-color: aliceblue;

            cursor: pointer;
            width: 90px;
            height: 40px;
            border: 1px solid #DDD;
            border-radius: 5px;
            margin: 30px 20px;
            font-size: 16px;

            transition: background-color 0.5s;
            -webkit-transition: background-color 0.5s;
            -moz-transition: background-color 0.5s;
            -o-transition: background-color 0.5s;
        }
        .btn:hover {
            background-color: antiquewhite;
        }

        .login-success {
            font-size: 20px;
            padding: 50px;
        }
    </style>

    <script>
        var loginBtn, regiBtn;
        window.onload = function() {
            loginBtn = document.getElementById("login");
            loginBtn.onclick = rotate;
            regiBtn = document.getElementById("regi");
            regiBtn.onclick = rotate;
        };

        function rotate() {
            var x = 0;
            var panel = document.getElementById("login-panel");
            panel.style.transform = "rotateX(0deg)";
            panel.style.webkitTransform = "rotateX(0deg)";

            var flag = true;
            var timer = setInterval(function() {
                if(Math.round(x) >= 90 && flag) {
                    panel.innerHTML = "<p class='login-success'>登陆成功</p>";
                    flag = false;
                }

                if(Math.round(x) >= 358) {
                    panel.style.transform = "rotateX(360deg)";
                    panel.style.webkitTransform = "rotateX(360deg)";
                    clearInterval(timer);
                    return false;
                } else {
                    x += 2 + (360 - x) / 60;
                    panel.style.transform = "rotateX(" + x + "deg)";
                    panel.style.webkitTransform = "rotateX(" + x + "deg)";
                }
            }, 25);
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="login" id="login-panel">
            <h1>登陆</h1>
            <div class="login-row">
                <label for="username"><span>账号：</span></label>
                <input type="text" id="username" name="username">
            </div>
            <div class="login-row">
                <label for="password"><span>密码：</span></label>
                <input type="password" id="password" name="password">
            </div>
            <div class="login-row">
                <button id="login" class="btn" type="button">登陆</button>
                <button id="regi" class="btn" type="button">注册</button>
            </div>
        </div>
    </div>
</body>
</html>

运行结果如下：


点击登陆，登陆面板会发生360度旋转，并显示信息。


旋转结束：


本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CSS3

让登陆面板旋转起来

CSS3让登陆面板旋转起来 的相关文章

  • 这里推荐几个前端动画效果网站

    1 AnimistaAnimista 是一个 CSS 动画 转场库和在线工具 它有许多现成的 CSS 动画片段可以直接使用 也可以在线定制动画 网站地址 Animista On Demand CSS Animations Library 2

  • 几种css炫酷背景欣赏

    这里为大家带来几种表现惊人的css背景效果 纯css表现效果 有桌布效果 星空效果 心形效果 砖墙效果等 请欣赏 background radial gradient rgba 255 255 255 0 0 rgba 255 255 25

  • （新）Chrome浏览器自定义背景插件

    一 效果预览 二 项目回顾 1 原理 主要是利用js脚本在页面打开前插入一个背景图片容器 在通过相应的事件控制来实现该功能 2 功能 将网络图片设置为浏览器背景 3 使用 下载插件 gt 修改js文件 加入图片链接 添加浏览器扩展 gt 刷

  • 一篇文章吃透 CSS3 属性： transition过渡 与 transform动画

    最近有人私信我 CSS 中的 transition 过渡 和 transform 动画 属性 这两个属性的参数确实比较复杂 它们可以做出 CSS 的一些基础动画效果 平移 旋转 倾角 等等 这些也是我早期学习 CSS 的难记易忘之处 今天给

  • 小案例：页面滚动事件以及导航栏点击

    HTML html实现方法一 导航栏a标签href 要与下列div中id属性对应 点击a标签即可滑动到对应id的div div class navbar 导航栏 ul class rightheader li a class page sc

  • scss 中公共变量的导出方法:export

    前言 在使用vue或者react开发项目时都会用到scss 或者less等的扩展语言 那么肯定会有公共变量提取与使用 这篇文章就是记录如何导出公共css变量的 export 关键词 menuText bfcbd9 menuActiveTex

  • Flex布局实战详解

    Flex布局详解 1 父项属性 flex direction 设置主轴的方向 justify content 设置主轴上的子元素排列方式 flex wrap 设置子元素是否换行 align content 设置侧轴上的子元素排列方式 多行

  • 弹性盒子（Flex）相关属性全解析

    目录 基本介绍 添加在父元素上的属性 添加在flex容器上的 一 设置为弹性布局 display flex 二 修改主轴的属性 flex direction 三 设置子元素是否折换 flex wrap 四 设置主轴的对齐方式 justify

  • 前端例程20220728：点击涟漪效果按钮

    演示 原理 监听按钮点击事件 点击事件中获取点击位置 在点击位置生成一个元素作为水波 水波生成后通过扩散同时变透明 水波根据动画时间变透明后销毁 代码

  • 逐渐从土里长出来的小花

    从土里逐渐长出来的小花 这是长出来后的样子 图片压缩了出现了重影 代码在这里

  • position:absolute详解

    position absolute 日常开发中经常涉及元素的定位 我们都知道 绝对定位相对于最近position不为static的父级元素来定位 但其中定位的位置还是有细微的差别的 绝对定位根据left和top属性来规定绝对定位元素的位置

  • 网页按钮点击动画

    要求 一个按钮 每点击一次在大小可随时变化的按钮表面生成一个实心圆形 对每个圆形配置的时间 T T T 单位 毫秒 内有如下过程 第 i i i次点击生成一个圆形

  • css按钮样式

    创建漂亮的 CSS 按钮的 10 个代码片段 IT程序狮子烨 1 个月前 如果你正在寻找一些高质量的 CSS 按钮的示例 那么这篇文章一定是你的 菜 在本文中 我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集 并附有它们的

  • 父组件传来的值和子组件自己定义的data的值有什么区别？

    props和data的区别 1 data中的数据是组件内自己的数据 状态 可以随意修改data中的值 2 props的数据是父组件传递过来的数据 是只读的 只能供子组件使用 不能随意修改 下面进行演示 1 首先创建一个父组件HomeView

  • 精致的动画特效源代码

    动画特效 css简介 代码部分 纯css3云彩动画效果 css3放大镜动画效果 jQuery游戏图片手风琴收缩切换特效 js百叶窗图片3D旋转切换特效 纯CSS3制作飞舞的火箭动画 简单易用的纯CSS3图片墙效果 一个简单好看的纯CSS3翻

  • 更改element button 按钮颜色

    在全局的index scss里面改 显示时按钮样式 el button inblack 需要更改的按钮类型 background 060606 important border color 060606 important color ff

  • 【宠粉福利】这次我们准备了 iPhone 12、AirPods Pro、罗技鼠标等大礼等你来领！...

    喜迎开学季 C 站开豪礼 最高可开 iphone 12 盲盒开出的不只是一份礼物 更是对于一切美好的期待 拆开一个盲盒 就像开始一场未知的爱丽丝梦游仙境 为 两点一线 朝九晚九 的生活 埋下一刻期待的种子 去收获一份未知的惊喜 这次 价格再

  • 超简单：很火的3D立体动态相册，送给心爱的那个人

    1 首先 我们一共需要三个文件 目录关系如下所示 先建index html文件吧 电脑上先创建一个 txt文件 在里面加入代码后保存 重命名为index html 记得把原来的 txt后缀覆盖 html我用的谷歌浏览器 index html

  • 滚动条样式

    一 在div中的滚动条样式 div webkit scrollbar width 5px 滚动条宽度 div webkit scrollbar thumb border radius 10px 滚动条圆角 webkit box shadow

  • 面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

    面试官 元素水平垂直居中的方法有哪些 如果元素不定宽高呢 一 背景 在开发中经常遇到这个问题 即让某个元素的内容在水平和垂直方向上都居中 内容不仅限于文字 可能是图片或其他元素 居中是一个非常基础但又是非常重要的应用场景 实现居中的方法存在

随机推荐

  • jQuery下的瀑布流效果（改）

    使用 window on 34 resize 34 waterfall 使得瀑布流列数可以动态变化 包含加载数据的模拟 useJQ html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt

  • 带有分散效果的瀑布流（jQuery实现）

    初始数据集中在窗口底部 xff0c 通过动画移动摆动到正确的位置 xff0c 同样模拟网络加载数据时 xff0c 图片也从窗口底部 动画 摆放到正确的位置 如下图所示 xff0c 这是初始数据移动的过程 移动结束后 xff0c 初始数据摆放

  • 使用jQuery、js实现必应搜索制作

    实现过程参考自 慕课网 xff0c 有关具体详情可参考视频 实现必应搜索制作 xff0c 结果如下 xff1a 点击提示框中的选项进行对应的跳转 xff08 在当前页面 xff09 xff1a 使用Ajax提交http请求 xff0c 从必

  • 网页在IE6下可能出现的小问题

    我们制作网页过程中 xff0c 需要对网页进行调试以兼容不同浏览器 这里使用IETester 针对网页在IE6进行调试 xff0c 解决一些可能出现的问题 1 在IE6可能会出现双边距 双边距出现的条件是当浮动元素的浮动方向和margin的

  • 雅虎WEB前端网站优化 -- 34条军规

    转载自 xff1a 点击打开链接 雅虎给出了优化网站加载速度的34条法则 xff08 包括Yslow规则22条 xff09 详细说明 xff0c 下载转发 ponytail 的译文 xff08 来自帕兰映像 xff09 1 Minimize

  • 91. Decode Ways（解码方法）

    这道题的关键在于推导出递推公式 xff0c 这里我将存储的数组定义为code xff0c 字符串为s xff0c code i 代表前i个字符可解码的数量 xff0c 即code i 代表的是s i 1 及之前字符的总解码数量 很明显可知c

  • PHP中的字符串定义——Heredoc结构形式

    在php中字符串类型可以用三种方法定义 xff1a 单引号形式 双引号形式和Heredoc结构形式 单引号形式和双引号的定义形式如下 xff1a lt php str string1 61 39 我是字符串 39 单引号 str strin

  • php get_magic_quotes_gpc()函数用法介绍

    转载自 xff1a 点击打开链接 magic quotes gpc函数在php中的作用是判断解析用户提示的数据 xff0c 如包括有 post get cookie过来的数据增加转义字符 xff0c 以确保这些数据不会引起程序 xff0c

  • PHP 单一入口

    转载自 xff1a 点击打开链接 单一入口概述 单一入口的应用程序就是说用一个文件处理所有的HTTP请求 xff0c 例如不管是列表页还是文章页 xff0c 都是从浏览器访问index php文件 xff0c 这个文件就是这个应用程序的单一

  • PHP下的MVC

    学习资源来自于慕课网 先来一个简单的Demo SimpleDemo 控制器C testController class php lt php class testController function show 控制器的作用是调用模型 xf

  • PHP操作mysql类的封装

    版本一 xff1a lt php 这是一个工具类 xff0c 作用是完成对数据库的操作 class SqlHelper public conn public dbname 61 34 test 34 public username 61 3

  • 简单新闻发布系统前台界面（html+css）

    运行效果如下 xff1a 图片素材 xff1a bg jpg header shadow png news icon png index html lt DOCTYPE html gt lt html lang 61 34 zh CN 34

  • 视图引擎Smarty的简单使用

    参考 xff1a http www jb51 net article 5091 htm 参考 xff1a http baike baidu com link url 61 FFySw2r dsE lTdQgGy2DpLhciXM JqUag

  • 简易 文章发布系统——后台管理系统

    来自于慕课网的学习 这里建立一个简易的文章发布系统 后台管理系统 xff0c 功能包括 文章的发表 查看文章列表 xff0c 其中还提供对文章的删除和修改功能 首先使用mysql建立数据库 info xff0c 在info数据库中建立一张

  • 简易 文章发布系统——前台界面

    续 简易 文章发布系统 后台管理系统 源自 慕课网 的学习 关于简易文章发布系统 后台管理系统大致已经制作完毕 xff0c 但是从安全方面来看 xff0c 程序质量不高 xff0c 只适合初学者进行学习开发 xff0c 掌握php的开发流程

  • PHP实现页面静态化——全部纯静态化

    先来看看php在服务器的执行过程 xff1a 当用户请求服务器php文件的时候 xff0c 服务器将对php文件进行语法分析 xff0c 其次是解析 xff0c 最后才运行 当php文件有内容输出时 xff0c 该内容会先经过服务器的php

  • PHP实现页面静态化——局部动态化

    上回说到 xff1a PHP实现页面静态化 全部纯静态化 这次实现PHP的局部动态化 xff0c 也就是说静态化的页面存在 动态 过程 xff0c 结合全部静态化技术 43 Ajax技术实现局部动态化 xff0c 局部更新页面 在上文的数据

  • CSS3的过渡 transition

    这里只考虑 chrome 的兼容 transition html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 3

  • CSS3中的3D旋转 rotate、3D位移 translate

    这里只考虑 chrome 的兼容 3DrotateDemo html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8

  • CSS3让登陆面板旋转起来

    这里只考虑chrome的兼容 LoginRotate html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34

热门标签