CSS3基础2(变形与动画)

<!DOCTYPE html5>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3基础知识(动画)</title>
<style>
/*div{*/
/*width: 150px;*/
/*height: 150px;*/
/**/
/*}*/
/*过渡 transition(参数分别为 需要过渡的属性(width、height) 过渡需要时间 过渡函数 过渡延时间 动画曲线*/
/*理解应用众多过渡函数的效果*/
/*div:hover{*/
/*width: 400px;*/
/*height: 500px;*/
/*-webkit-transition: width 2s linear 1s, height 3s ease-in 2s;*/
/*-moz-transition: width 2s linear 1s, height 3s ease-in 2s;*/
/*-o-transition: width 2s linear 1s, height 3s ease-in 2s;*/
/*-ms-transition: width 2s linear 1s, height 3s ease-in 2s;*/
/*transition: width 2s linear 1s, height 3s ease-in 2s;*/
/*}*/


/*transform 变形是对元素进行2D或3D转换,可以对元素进行旋转、缩放、平移或扭曲。*/
/*transform-origin 用来改变变形的原点 默认居于元素X轴和Y轴的50%处*/

/* 变形2D-旋转 (x deg 旋转角度 x正数为顺时针 x负数为逆时针) */
/*div:hover{*/
/*transform: rotate(30deg);*/
/*transition: transform 2s;*/

/*-webkit-transform-origin: 50% 100%; !*(50%,100%) 表(x,y) (最左 最上)*!*/
/*-moz-transform-origin: 50% 100%;*/
/*-o-transform-origin: 50% 100%;*/
/*-ms-transform-origin: 50% 100%;*/

/*-webkit-transform: rotate(30deg);*/
/*-moz-transform: rotate(30deg);*/
/*-o-transform: rotate(30deg);*/
/*-ms-transform: rotate(30deg);*/
/*}*/

/* 变形2D 平移 translate */
/*div:hover{*/
/*transform: translate(100px,100px); !* (x,y) 长宽 也可以传百分比*!*/
/*transition: transform 2s ease-in;*/
/*}*/

/* 变形2D 缩放 scale (大于1放大,小于1缩小)*/
/*div:hover{*/
/*transform: scale(2,3); !* (x,y) 分别为放大的倍数*!*/
/*transition: transform 2s ease-in;*/
/*}*/

/* 变形2D 扭曲 skew */
/*div:hover{*/
/*transform: skew(30deg,30deg); !* (x,y) 分别为x轴,y轴的扭曲角度*!*/
/*transition: transform 2s ease-in;*/
/*}*/

/*3D perspective 表 眼睛到屏幕的距离 */
/*#parent{*/
/*perspective: 300px;*/
/*}*/
/*#child{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*transform-style: preserve-3d;*/
/*position: absolute;*/
/*margin-left: 100px;*/
/*margin-top: 50px;*/
/*}*/
/*#child:hover{*/
/*transform: rotateX(-45deg);*/
/*}*/

/* 动画 animation 参数(名称 动画持续时间 方式 延迟时间 次数 方向 动画函数)*/
/*@keyframes move {*/ /*关键帧动画*/
/*0%{*/
/*width: 150px;*/
/**/
/*}*/
/*50%{*/
/*width: 500px;*/
/**/
/*}*/
/*100%{*/
/*width: 150px;*/
/**/
/*}*/
/*}*/
/*#anima{*/
/*width: 150px;*/
/*height: 150px;*/
/**/
/*}*/
/*#anima:hover{*/
/*animation: move 2s linear 1s 2 infinite; !*infinite无限次循环 reverse 反向 *!*/
/*}*/

/*图片加载效果*/
#loading{
animation: move 2s infinite linear;
border: 0px solid black;
width: 96px;
height:96px;
margin: 50px auto;
background:url(img/loading.png)no-repeat center;
}
@keyframes move{
0%{ transform: rotate(0deg);}
100%{ transform: rotate(360deg);}
}

</style>
</head>
<body>
<div id="loading"></div>

<!--<div>树荫照水爱晴柔</div>-->
<!--<div id="anima">醉清风</div>-->
<!--<div id="parent">-->
<!--<div id="child"></div>-->
<!--</div>-->
</body>
</html>
............................................
素材



转载于:https://www.cnblogs.com/YoogaChan/p/6952506.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370438.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET Core2.0 环境下MVC模式的支付宝PC网站支付接口-沙箱环境开发测试

1.新建.NET Core web项目 2.Controllers-Models-Views 分三个大部分 3.下载安装最新sdk 官方的SDK以及Demo都还是.NET Framework的&#xff0c;根据官方文档说明新建网站后还是需要引用官方SDK的源码&#xff0c; 在这里直接使用网上一位朋友的用.NET Standard 2.0 进行实现了支…

如何在redhat8里使用gcc命令_如何使用who命令检查用户登录信息

请关注本头条号&#xff0c;每天坚持更新原创干货技术文章。如需学习视频&#xff0c;请在微信搜索公众号“智传网优”直接开始自助视频学习1. 前言本教程主要介绍如何使用who命令检查用户登录信息。如何使用who命令检查用户登录信息Linux中的who命令列出了系统上的所有登录用户…

研究僵局–第4部分:修复代码

在这个简短的博客系列的最后BadTransferOperation中&#xff0c;我一直在讨论分析死锁&#xff0c;我将修复BadTransferOperation代码。 如果您看过本系列的其他博客 &#xff0c;那么您将知道&#xff0c;为了达到这一点&#xff0c;我创建了死锁的演示代码&#xff0c;展示了…

chrome插件2

转自&#xff1a;http://www.codeceo.com/article/15-chrome-extension.html 1. Web Developer 支持Chrome的Web Developer扩展&#xff0c;允许你通过添加一个小工具栏来使用不同的工具。 官方网站&#xff1a;https://chrome.google.com/webstore/detail/web-developer/bfbam…

java月历组件_vue之手把手教你写日历组件

---恢复内容开始---1.日历组件1.分析功能&#xff1a;日历基本功能&#xff0c;点击事件改变日期&#xff0c;样式的改变1.结构分析&#xff1a;html1.分为上下两个部分2.上面分为左按钮&#xff0c;中间内容展示&#xff0c;右按钮下面分为周几展示和日期展示3.基本结构页面ht…

maven project module 依赖项目创建 ---转

一、创建Maven Project 1.右击 --> New --> Other&#xff0c;--> Maven --> Maven Project --> Next 2.如下图&#xff0c;选中Create a simple project --> Next 3.输入Group Id, Artifact Id, Version, Packaging选择pom&#xff0c;因为创建的Maven Pr…

linux常见命令搜集

查找根目录下txt和pdf文件 find / \( -name "*.txt" -o -name "*.pdf" \) -print 正则查找根目录下所有的txt和pdf文件 find / -regex ".*\(\.txt|\.pdf\)$"查找所有非txt文本 find . ! -name "*.txt" -print制定搜索深度 find ~ -max…

需加装饰——装饰模式

装饰模式指的是在不必改变原类文件和使用继承的情况下&#xff0c;动态地扩展一个对象的功能。它是通过创建一个包装对象&#xff0c;也就是装饰来包裹真实的对象。 类图分析 我们先假设一个业务场景&#xff0c;有三种房子需要装修&#xff0c;分别是公寓&#xff0c;木屋和别…

Vue2.0 --- vue-cli脚手架中全局引入JQ

第一步&#xff1a;安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下面这个位置添加代码断&#xff08;当前图片安装的是2.2.3版本&#xff0c;如果想安装更高或者其他可以更改版本号&…

Unity——用UnityEditor拷贝FBX中的AnimationClip

最近有个新需求&#xff0c;要用代码添加动画的事件&#xff0c;但是Unity不能直接修改FBX中的AnimationClip 在Animation窗口中可以看到&#xff0c;AnimationClip是Read-Only状态&#xff0c;用代码修改这个AnimationClip也是不会生效的&#xff0c;包括用代码添加事件 解决方…

mvc如何嵌套第三方页面_长文观点丨为什么我不再使用MVC框架?

原创&#xff1a; 张卫滨 译 Jean-Jacques Dubray是一名资深工程师&#xff0c;他最近引入了一个新的模式&#xff1a;状态-行为-模(State-Action-Model&#xff0c;SAM)。SAM是一个函数式反应型的编程模式&#xff0c;它致力于简化数据Model和View之间的交互。它究竟有何优点值…

JSON和XML的区别

转载于:https://www.cnblogs.com/mr-wuxiansheng/p/6974239.html

屏幕适配

rem是什么&#xff1f; rem&#xff08;font size of the root element&#xff09;是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位&#xff0c;em&#xff08;font size of the element&#xff09;是指相对于父元素的字体大小…

【存储过程】MySQL存储过程/存储过程与自定义函数的区别

---------------------------存储过程-------------------- 语法: 创建存储过程: CREATE [definer {user|current_user}] PROCEDURE sp_name ([ proc_parameter [,proc_parameter ...]]) [ characteristics..] routime_body 其中: proc_parameter : [IN|OUT|INOUT] parameter_…

Java死锁故障排除和解决

JavaOne年度会议的一大优点是&#xff0c;主题专家介绍了几个技术和故障排除实验室。 其中的一个实验室今年特别吸引了我的注意力&#xff1a;“ HOL6500-查找和解决Java死锁 ”&#xff0c;由Java冠军Heinz Kabutz提出 。 这是我在该主题上看到的最好的演示之一。 我建议您自己…

3. HTML中的容器标签

什么是容器标签&#xff1f;在HTML开发中我们常常会使用一类标签作为容器放置一些内容&#xff0c;我们把这类标签称之为容器标签&#xff0c;可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签&#xff0c;在这里我们就来总结下这些内容。 列表标签 1 <!-- 无…

GitHub上Java的Bloom Bloom实现

布隆过滤器是集数据结构的一种 。 对于那些不了解的对象&#xff0c;“设置数据结构”仅包含一个主要方法。 它仅用于确定特定元素是否包含在一组元素中。 大多数数据结构&#xff08;例如Hash Map &#xff0c; Linked List或Array &#xff09;都可以相当轻松地创建此函数。 …

ni软件管理器_NI 技术支持丨我的 NI 硬件设备不能被识别,怎么办?Windows

这篇指南可以帮助您解决在您的 Windows 系统上无法识别您的 NI 硬件有关的问题。症状包括以下几种情况&#xff1a;连接至 USB 端口时&#xff0c;硬件上的 LED 灯不亮/不闪烁。连接至 USB 后已连接设备的 LED 灯持续闪烁。仅限音频接口&#xff1a;该设备在音频应用程序或 Win…

在Java应用程序中使用密码学

这篇文章描述了如何使用Java密码体系结构 &#xff08;JCA&#xff09;&#xff0c;该体系结构使您可以在应用程序中使用密码服务。 Java密码体系结构服务 JCA提供了许多加密服务&#xff0c;例如消息摘要和签名 。 这些服务可以通过特定于服务的API来访问&#xff0c;例如Me…

CSS学习笔记-04 a标签-导航练习

个人练习&#xff0c;各位大神勿笑 。。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&qu…