CSS3的几个变形案例……

大家好,欢迎来到雄雄的小课堂,那个……辣椒酱很好吃的,哈哈哈哈!今天给大家分享的内容是利用CSS制作网页的动画。

辣椒酱:自从有了这款辣椒酱,拌饭再也不用老干妈

CSS变形

CSS的变形包括这么几种效果,分别有平移(translate),缩放(scale),倾斜(skew),旋转(rotate),下面我们来分别看看。

01

平移(translate)

语法:transform: translate(X轴平移的像素,Y轴平移的像素)

Eg:

#div1:hover{transform: translate(10px,-9px);}

效果如图所示:

02

缩放(scale)

语法:transform: scale(宽度缩放值,高度缩放值)

如果参数只有一个值,默认第二个值和第一个值相等;默认值是1,0-0.99的任意一个数字可以缩小元素,大于1则会使元素放大。例如:scale(0.8),元素会缩小0.8倍,而scale(1.5)元素则会放大1.5倍。

Eg:

#div2:hover{transform: scale(1.2);}

效果图:

03

旋转(skew)

语法:transform: skew(X轴倾斜的角度,Y轴倾斜的角度);单位为deg(°)

Eg:

#div3:hover{transform: skew(10deg,10deg);
}

效果图:

04

旋转(rotate)

语法:transform: rotate(旋转的度数);其中参数的单位是deg(°)。

Eg:

#div4:hover{transform: rotate(20deg);
}

效果如图:

关于CSS的其他动画,我们下期在分享,今天太忙啦~

往期精彩

jsp中使用cookie时报错……

2020-11-17

Java中的TreeSet集合会自动将元素升序排序

2020-11-16

“老师,请您多关注一下我吧!!!”

2020-11-15

晨读,难道只是为了完成任务而读的吗?

2020-11-14

Vector是线程安全的?

2020-11-13

为什么要有周考?周考是用来干什么的?

2020-11-12

点分享

点点赞

点在看

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

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

相关文章

图片管理应用

文章目录一、简介二、父项目三、图片管理服务的数据库设计四、定义module : img_pojo五、定义module : img_mapper六、定义module : img_service_api七、module : img_service_provider八、 定义module : imp_service_…

我眼中的ASP.NET Core之微服务

前言 前几天在博客园看到有园友在分享关于微软的一个微服务架构的示例程序,想必大家都已经知道了,那就是eShopOnContainers。 我们先不看项目的后缀名称 OnXXX ,因为除了 OnContainers 还有 OnAzure,OnWeb,OnKuberne…

形象的解释神经网络激活函数的作用是什么

转载自 形象的解释神经网络激活函数的作用是什么 神经网络中激活函数的作用 查阅资料和学习,大家对神经网络中激活函数的作用主要集中下面这个观点: 激活函数是用来加入非线性因素的,解决性模型所不能解决的问题。 下面我分别从这个方面…

【2018.3.31】模拟赛之四-ssl2408 句子【dp,字符串】

正题 大意 先给出n个句子,然后给出一个最终句子。最终句子由多个句子加密后组成(可能重复)。加密方法就是将字母调换位置,加密代价就是该位置与原来的字母不同的数量。求达到最终句子的最小加密代价 解题思路 用f[i]f[i]表示最终…

CSS3中的动画示例

大家好,欢迎来到雄雄的小课堂,上一期我们分享了几个CSS变形案例,大家还记得有哪几个吗?原文在这里:CSS3的几个变形案例……今天,我们来看看CSS的过渡:过渡简单的来讲,就是元素由一种…

ASP.NET Core之跨平台的实时性能监控(2.健康检查)

前言 上篇我们讲了《如何使用App Metrics 做一个简单的APM监控》,最后提到过健康检查这个东西. 这篇主要就是讲解健康检查的内容. 没看过上篇的,请移步:ASP.NET Core之跨平台的实时性能监控 首先我们来了解一下什么是健康检查(health checks)? 1.什么是健康检查? 健康检查…

​通俗理解神经网络BP反向传播算法

转载自 ​通俗理解神经网络BP反向传播算法 通俗理解神经网络BP反向传播算法 在学习深度学习相关知识,无疑都是从神经网络开始入手,在神经网络对参数的学习算法bp算法,接触了很多次,每一次查找资料学习,都有着似懂非…

ssl初一组周六模拟赛【2018.3.31】

前言 先说一下成绩: 姓名成绩hjq300wyc(本人千年老二)270zyc260xjq240lw223xxy220lrz200hzb200 正题 题目1:ssl2406 约数【水题】 水题 链接: https://blog.csdn.net/mr_wuyongcong/article/details/79768338 题目2:ssl2407 …

CSS动画示例(上一篇是CSS过渡…)

大家好,欢迎来到雄雄的小课堂,前面,我们将CSS的变形和过渡都整理了,有需要的可以移步这里看:CSS3中的动画示例CSS3的几个变形案例……今天,我们来看看CSS3的动画。CSS3使用动画分为两个步骤:1.通…

Health Check in eShop -- 解析微软微服务架构Demo(五)

引言 What is the Health Check Health Check(健康状态检查)不仅是对自己应用程序内部检测各个项目之间的健康状态(各项目的运行情况、项目之间的连接情况等),还包括了应用程序对外部或者第三方依赖库的状态检测。 W…

为什么梯度反方向是函数下降最快的方向

转载自 为什么梯度反方向是函数下降最快的方向 为什么梯度反方向是函数下降最快的方向? 刚接触梯度下降这个概念的时候,是在学习机器学习算法的时候,很多训练算法用的就是梯度下降,然后资料和老师们也说朝着梯度的反方向变动&a…

ssl1335-最佳派对【二分图,最大匹配,图论】

正题 题目 有n个中国学生与若干个外国学生&#xff0c;一些中国学生与外国学生之间可以很好的配对&#xff0c;求能配成的最多对数 解题思路 二分图匈牙利算法 代码 #include<cstdio> #include<cstring> using namespace std; struct line{int x,y,next; }a[100…

javaweb中实现分页,持续更新……

大家好&#xff0c;欢迎来到雄雄的小课堂&#xff0c;昨天分享了个分页工具类一个简单的分页工具类&#xff0c;其实&#xff0c;也是为今天的分享做的铺垫&#xff0c;今天&#xff0c;给大家带来的是javaweb实现分页的全过程&#xff01;前言&#xff1a;为什么需要分页&…

Redis(入门)

文章目录一、 Redis简介二、 基于Docker安装Redis单机版三、 Redis常用命令1 Key操作2 字符串值(String)&#xff08;值的长度不超过512MB&#xff09;3 哈希表(Hash)4 列表&#xff08;List&#xff09;5 集合(Set)6 有序集合&#xff08;Sorted Set&#xff09;四、 Redis持久…

浅析神经网络为什么能够无限逼近任意连续函数

转载自 浅析神经网络为什么能够无限逼近任意连续函数 神经网络为什么能够无限逼近任意连续函数&#xff1f; 下面通过一个分类例子一步一步的引出为什么神经网络能够无限逼近任意函数这个观点&#xff0c;并且给出直观感觉! 我们首先有这个需求&#xff0c;需要将下面的数据…

前端模块化工具--webpack学习心得

话说前头 webpack前段时间有听说一下&#xff0c;现在已经到了3.x的版本&#xff0c;自己没去接触。因为之前使用gulp来作为自己的项目构建工具。现在感觉gulp使用的趋势在减少。现在这段时间去接触了webpack&#xff0c;感觉很不错&#xff0c;它的模块化打包机制&#xff0c…

ssl1333-地鼠的困境【二分图,最大匹配,图论】

正题 大意 有n个地鼠有m个地洞&#xff0c;每只地鼠的速度都是v。若不在s秒之内回到地洞就会狗带&#xff0c;每只地洞只能躲一只地鼠&#xff0c;求能活下来多少只 代码 #include<cstdio> #include<cstring> #include<cmath> using namespace std; struct…

javaweb实现分页查询(一)

大家好&#xff0c;欢迎来到雄雄的小课堂&#xff0c;昨天分享了个分页工具类&#xff0c;其实&#xff0c;也是为今天的分享做的铺垫&#xff0c;今天&#xff0c;给大家带来的是javaweb实现分页的全过程&#xff01; 前言&#xff1a;为什么需要分页&#xff1f;假设某大学有…

eclipse搭建多module项目的坑

一、eclipse坑 1、低版本eclipse没有jdk1.8 2、默认使用jre库作为工作空间jdk&#xff0c;项目build path绑定jre&#xff0c;而Maven项目需要jdk 3、Maven项目经常抛错&#xff0c;工作空间和项目缓存了Maven错误信息 二、Maven坑 1、仓库没有包&#xff0c;生成xxx.lastU…

SpringSecurity认证

一、 Spring Security简介 1 概括 Spring Security是一个高度自定义的安全框架。利用Spring IoC/DI和AOP功能&#xff0c;为系统提供了声明式安全访问控制功能&#xff0c;减少了为系统安全而编写大量重复代码的工作。 使用Spring Secruity的原因有很多&#xff0c;但大部分都…