2020-03-31

已于 2022-06-30 16:05:30 修改
阅读量335 收藏
点赞数
分类专栏： 笔记 文章标签： javascript 前端 html
于 2020-03-31 07:37:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mzy110_/article/details/105214070
版权

day1
用bitbug把图片形式的png转换成图标形式的.ico
网页截图再检查中application中local storage 按ctr+p键输入>full就可以把网页给下载出来了!

transition:过渡属性 过渡时间 运动曲线 默认为ease意为平滑 何时开始（多组属性之间用逗号隔开）
若所有属性都变化写成transition:all 0.5；
**过渡写在本身上 谁做过渡 过渡写在谁身上谁做动画就写谁身上
东过渡写法

当鼠标经过div盒子的时候 里面的图片的外边距向左走-10个像素在这里插入图片描述
在定位里面让孩子压在父亲下面给孩子z-index一个负值

2D变形（css3）transform

2d变形可以让定位的盒子水平居中和垂直居中
在这里插入图片描述

transform:translateY（-50%）；
1.位移translate（x，y）
transform:translate（x，y）
让定位的盒子水平居中
2.scale缩放
transform:scale（x，y）取值范围在0（0%）－1（100%）间 可以大于1
transform:scale（0.8,1） 宽度变为原来的80%，高度不变
transform:scale（0.8）高度省略 默认和宽度一起缩放 大于1为放大 小于1为缩小 等于1高度宽度不变
3transform-origin 旋转的度数
transform:rotate（180deg）正数为顺时针 负数为逆时针
4.transform-origin:right bottom；以左下角为中心旋转

几张图片在一起旋转代码

在这里插入图片描述## 当鼠标移动到div盒子上时 div里面的盒子开始宽高不给 当鼠标移动到外面盒子上时 里面的盒子显示出来
1、首先给定位出里面盒子的位置
2、降低里面子盒子的权重 让子盒子在父盒子下面利用zindx-x
3、当鼠标移动到大盒子时里面的盒子宽高显示出来
在这里插入图片描述
一些视频http://pan.baidu.com/s/lgfbbfpd 密码:d5mo
5.倾斜transform:skew（30deg） 让盒子倾斜30度
transform:skew（x，y）

一个实例在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
**图片是一个典型的行内块元素
animation css3动画
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向
播放次数设为无限次播放为infinite
轮流反方向播放alternate
在这里插入图片描述
animation用法：先声明在调用它的方法
在这里插入图片描述
动画不需要过渡效果
在这里插入图片描述
在移动端网页要给屏幕最大宽度max-width和最小宽度min-width来自由伸缩
文字阴影css3
text-shadow:水平阴影 垂直阴影 阴影面积 阴影颜色
background-size:width height 规定着背景图片的大小
如果只设一个值 另一个只默认为auto
content为一边到达一边就停止
cover高完成时才停止缩放
-前缀浏览器 为了兼容性

-webkit-为前缀 谷歌浏览器
-moz-为火狐浏览器
-ms-为IE浏览器
-o- 欧鹏浏览器
背景渐变

background:-webkit-linear-gradient（渐变的起始位置 起始颜色 结束颜色（top ，red ，green））
线性渐变background:linear-gradient（top，red 0% ，green 50% ， blue 100%）；
多背景css3

多背景时背景颜色写在背景图片下面防止被叠加
盒子半透明

1background:raba（）；背景颜色透明
2.background-color:red
opacity:0.2；盒子半透明里面字体也变得透明
优雅降级（graceful degradation）和渐进增强（progressIve enhancement）

3d变形css3
x轴 左边是负的 右边是正的
y轴 上边是负的 下边是正的
z轴里边是负的 外边是正的
rotateX（）沿着x轴立体旋转
rotateY（）
rotateZ（）
透视（perspective）眼睛到屏幕的距离
透视原理 近大远小
给父亲加透视效果 500px

backface-visibility 属性定义当元素不面向屏幕时是否可见
ctr+shift+上剪头
backface-visibility:hidden；隐藏前一张照片

小昭，快敲代码去~
关注
专栏目录
过渡属性: transition
qq_53640252的博客
03-01 5761
1.设置需要过渡的css属性 transition-property： ①css属性，css属性； (可以写多个，用逗号隔开) ②all； 设置所有属性 2.设置过渡所需时长 transition-duration: 数字s; (设置过渡秒数) 3.设置速度方式 transition-timing-function: ①ease减速 ②linear匀速 ...
CSS——平面转换、渐变背景、空间转换、动画
Concise200的博客
02-09 989
移动web学习1. 平面转换位移旋转修改寻转中心点多重转换旋转 1. 平面转换 使用transform属性实现元素的位移、旋转、缩放等效果 位移 注意：一般要加过渡属性transition: all 0.5s;这样就会显示移动的效果。谁变化就加谁身上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati
CSS3 Transition
江湖再见
04-17 1257
效果图： --未改变属性前效果： --执行完动画后的最终效果 语法： transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性
transition使用
小宝的博客
06-28 1453
transition transition:变化属性 花费时间 运动曲线 何时开始 transition: width 0.5s(简写.5s) ease 0s , height .5s ease 1s; 如果想要写多个属性，利用逗号进行分隔； 如果想要多个属性都变化，属性写all就可以 了 transitionL:all 0.5s; 注意：是谁做过度就给谁加 ...
一个在线制作ico文件的网站
无术不学的博客
06-23 521
https://www.bitbug.net/
20200331-建设银行-2020年3月大宗商品市场（2020-03-31）.pdf
04-08
20200331-建设银行-2020年3月大宗商品市场（2020-03-31）.pdf
FGT_VM64-v6-build1579-FORTINET.out 发布日期2020-03-31
05-08
FortiGate for VMWare ESXi platform Version 6.4.0 MD5:5e7a331355f824c4144e8cceee0677ab
利用pandas编程，使得输入为：{'Region': ['East', 'South', 'West', 'East', 'South'], 'Date': [Timestamp('2020-01-01 00:00:00', freq='D'), Timestamp('2020-02-02 00:00:00', freq='D'), Timestamp('2020-03-03 00:00:00', freq='D'), Timestamp('2020-01-04 00:00:00', freq='D') 输出为利用pandas编程，使得输入为：{'Region': ['East', 'South', 'West', 'East', 'South'], 'Date': [Timestamp('2020-01-01 00:00:00', freq='D'), Timestamp('2020-02-02 00:00:00', freq='D'), Timestamp('2020-03-03 00:00:00', freq='D'), Timestamp('2020-01-04 00:00:00', freq='D') 输出为利用pandas编程，使得输入为：{'Region': ['East', 'South', 'West', 'East', 'South'], 'Date': [Timestamp('2020-01-01 00:00:00', freq='D'), Timestamp('2020-02-02 00:00:00', freq='D'), Timestamp('2020-03-03 00:00:00', freq='D'), Timestamp('2020-01-04 00:00:00', freq='D')输出为Region Date East 2020-01-31 972 South 2020-02-29 807 2020-04-30 823 West 2020-03-31 459 Name: Sales, dtype: int64
05-26
2020-03-31 0 2020-04-30 0 South 2020-01-31 0 2020-02-29 200 2020-03-31 0 2020-04-30 0 West 2020-01-31 0 2020-02-29 0 2020-03-31 300 2020-04-30 0 Name: Sales, dtype: int64 ``` 可以看到，输出...
Input One line: a dict contains "Region", "Date" and "Sales". Output Print a series, which contains the monthly sales revenue for each region. Samples Input {'Region': ['East', 'South', 'West', 'East', 'South'], 'Date': [Timestamp('2020-01-01 00:00:00', freq='D'), Timestamp('2020-02-02 00:00:00', freq='D'), Timestamp('2020-03-03 00:00:00', freq='D'), Timestamp('2020-01-04 00:00:00', freq='D'), Timestamp('2020-04-05 00:00:00', freq='D')], 'Sales': [863, 807, 459, 109, 823]} Output: Region Date East 2020-01-31 972 South 2020-02-29 807 2020-04-30 823 West 2020-03-31 459 Name: Sales, dtype: int64 use pandas in python
05-27
可以使用 pandas 的 groupby 方法来实现对每个地区月销售额的统计，具体实现如下： ...West 2020-03-31 459 Name: Sales, dtype: int64 ``` 可以看到，该结果按照地区和日期分组，统计了每个地区每个月的销售额总和。
bitbug_favicon
09-20
作者主页:http://www.easy518.com
前端必备网站（推荐一）
最新发布
weixin_62639453的博客
05-21 2063
多达50多种各种各样的前端相关资源网站，其中还有一些较宝藏的网站，收藏不易。
VUE动画 的基本使用
zengxingX的博客
11-13 374
单元素动画 动画条件：进入与离开的动作，比如v-if，v-show 用transition包住动画标签 xxx是定义的名字 name=“xxx” xxx-enter:进入前状态，进入是希望从什么状态变为正常状态 xxx-enter-active:进入动画过程中一直存在的class,常用于做动画的执行体，承载 transition all 0.5 xxx-leave-to：离开时的状态，离开时，希望从正常状态变到什么状态 xxx-leave-active：离开过程中一直存在的class，常用..
CSS3第二节之transition过渡动画
weixin_44439110的博客
09-27 310
一、transition过渡小案例 应用到的样式 position：relative、absolute； :first-child；选中第一个元素 transition：all 0.5; :last-child;选中最后一个元素 display：none、block； :nth-child(n);选中某个元素 transform-origin: top right;允...
transition:all 0.5s linear;进度条动画效果 制作原理
weixin_30807677的博客
07-19 4014
Html: <span class="progress"><b ><i></i></b>50%</span> Css: .progress b,.xsprogress b{border-radius: 15px; background-color: #eee;width:150p...
CSS3过渡动画 transition:all与transition区别
热门推荐
a5252145的博客
08-27 2万+
先写一个样式： &lt;style&gt; div{ width: 200px; height: 200px; margin: 100px auto; background-color: #336699; /*transition:width 1s;*/ transition:all 1s; ...
css3-- transform: translate(-50%,-50%);
yueliangyefan的博客
06-27 7618
代码： position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 ...
css缩放（不同屏幕适配） transform属性的scale（）方法
hsany330的专栏
06-01 1万+
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。 语法：transform： scaleX（x）； / 沿x轴方向缩放/ transform: scaleY(y); / 沿y轴方向缩放/ transform： scale（）； / 同时沿x轴和y轴缩放/ 说明： 跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩
css3 transition用法（很详细）
qq_40890601的博客
05-18 1万+
解释 transition（ CSS 属性）是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。 transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。 以下是属性解释。 值 描述 transition-property 指定CSS属性的name，transition效果 transition-duration transit
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值