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,一经查实,立即删除!

相关文章

java对hashmap迭代_Java:通过HashMap迭代,这样更有效率?

第二个选项肯定更有效&#xff0c;因为在第一个选项中只进行一次查找&#xff0c;次数为n次。但是&#xff0c;没有什么比尝试它更好&#xff0c;当你可以。所以这里 –(不完美&#xff0c;但足够好验证假设和我的机器)public static void main(String args[]) {Map map new H…

html-edm(邮件营销)编写规则

最近写了一个edm邮件 以前没有接触过 使用的是很老的html页面编写规则 只能用table标签 在此记录一下edm编写的一些规则 个人参考的是这两个网址&#xff0c;转载一下 http://www.zcool.com.cn/article/ZMTM5MDgw.html https://www.cnblogs.com/lhweb15/p/6404626.html …

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…

HTML5和css3

超链接 <a target"页面打开位置" href"链接地址">内容</a>target:_blank 重新打开一个页面target:_self 当前页面打开 1.页面地址&#xff1a; 基础功能&#xff0c;用于进入该链接的页面&#xff1b; 2.锚点&#xff1a; 需要给标签名定义id…

python下载显示文件丢失_Microsoft.PythonTools.resources.dll

我该如何安装从金山毒霸下载的DLL文件&#xff1f;一&#xff1a;1、从金山毒霸下载压缩文件。2、将DLL文件解压到电脑上的某个地方。3、把该文件跟要求使用它的程序放在同一路径上。注意32位程序需要使用32位的DLL文件&#xff0c;64位程序需要使用64位的DLL文件。否则会出现0…

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…

java soot_正确执行3个地址代码的SOOT API

我在运行SOOT API时遇到问题 . 我正在使用java -cp soot-2.5.0.jar soot.Main -f jimple test我遇到以下错误&#xff1a;Exception in thread "main" java.lang.RuntimeException: Could not load classfile: java.io.ObjectInputStream atat soot.coffi.Util.resol…

JSF AJAX请求的会话超时处理

JSF AJAX请求的会话超时处理 当我们使用AJAX行为开发JSF应用程序时&#xff0c;在处理Ajax请求超时场景时可能会遇到问题。 例如&#xff0c;如果您使用的是基于J2EE表单的身份验证&#xff0c;则会话超时后应将正常请求重定向到登录页面。 但是&#xff0c;如果您的请求是AJAX…

linux常见命令搜集

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

前端html,css基础总结

0.1、css引入界面的方式: 内联式:通过标签的style属性&#xff0c;在标签上直接写样式。 <div style"width:100px; height:100px; background:red "></div> 嵌入式:通过style标签&#xff0c;在网页上创建嵌入的样式表。 <style type"text/css&q…

知乎python练手的_Python—爬虫之初级实战项目:爬取知乎任一作者的文章练手

爬虫之初级实战项目&#xff1a;爬取知乎任一作者的文章练手在正式上代码之前&#xff0c;先过一遍之前所学知识的框架内容&#xff0c;温故而知新&#xff01;&#xff01;&#xff01;接下来我们直接上代码&#xff0c;一定要手敲代码、手敲代码、手敲代码&#xff01;&#…

java url帮助类_Spring居然还提供了这么好用的URL工具类

1. 前言开发中我们经常会操作 URL&#xff0c;比如提取端口、提取路径以及最常用的提取参数等等。很多时候需要借助于一些第三方类库或者自己编写工具类来实现&#xff0c;今天胖哥给大家介绍一种方法&#xff0c;无需新的类库引入&#xff0c;只要你使用了 Spring Web 模块都可…

Java并发之CyclicBarria的使用(二)

Java并发之CyclicBarria的使用&#xff08;二&#xff09; 一.简介 之前借助于其他大神写过一篇关于CyclicBarria用法的博文&#xff0c;但是内心总是感觉丝丝的愧疚&#xff0c;因为笔者喜欢原创&#xff0c;而不喜欢去转载一些其他的文章&#xff0c;为此笔者自己原创了一个C…

需加装饰——装饰模式

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

Java正则表达式教程及示例

当我开始使用Java时&#xff0c;正则表达式对我来说是一场噩梦。 本教程旨在帮助您掌握Java正则表达式&#xff0c;并让我定期返回以刷新我的正则表达式学习。 什么是正则表达式&#xff1f; 正则表达式定义字符串的模式。 正则表达式可用于搜索&#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;如果想安装更高或者其他可以更改版本号&…