CSS笔记-3

Hopeys

已于 2024-05-01 17:39:38 修改

阅读量4

点赞数 39

文章标签： css 笔记前端

于 2024-05-01 17:36:11 首次发布

本文链接：https://blog.csdn.net/HOPE101110/article/details/138375794

版权

一、过渡效果

1、过渡

transition

transition: width 0.5s ease-in 0s;

所有数值类型的属性，都可以参与过渡，比如width、height left top border-radius opacity

背景颜色和文字颜色都可以被过渡

所有变形（包括和）都能被过渡

2、all

如果要所有属性都参与过渡，可以写all

3、四个小属性

二、 2D变形

关键字 transform

（1）移动

transform: translate(x, y); //水平垂直移动

长与tranition搭配使用

（2）缩放

transform:scale（x,y）;

如果只写一个参数则宽高都变大

应用：鼠标移动标题图片放大

（3）旋转

img :hover { transform: rotate(90deg); /* deg 度数*/ }

旋转中心点

（4）倾斜

transform: skew(10deg,20deg); //x倾斜角，y倾斜角

三、3D变形

x左边是负的，右边是正的
y上面是负的，下面是正的
z里面是负的，外面是正的

1、3D旋转

（1）将transform属性的值设置为rotatex()或者rotateY(),即可实现绕横轴、纵轴旋转

（2）perspective属性用来定义透视强度，可以理解为“人眼到舞台的距离”，单位是px

2、空间移动

四、动画

1、关键帧 @keyframes

keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

2、动画的调用

（1）使用animation属性调用动画

（2）第五个参数就是动画的执行次数

（3）如果想永远执行可以写infinite

（4）如果想让动画的第2 4 、、6……（偶数次）

自动逆向执行，那么要加上alternate参数即可（有来有回）

animation: movelr 2s linear infinite alternate 0s

如果想让动画停止在最后结束状态，那么要加上forwards

animation: changeToCircle 1s linear forwards;

3.例子

 .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 应用动画 */
            animation: r 1s linear 0s infinite alternate;
        }
        
        /* 定义动画 */
        @keyframes r {
            from{
                transform: rotate(0);
            }to{
                transform: rotate(360deg);
            }
        }

4、多动画关键帧

五、其他

1、em和px换算

em的值并不是固定的;
em会继承父级元素的字体大小。

为了简化font-size的换算，需要在css中的body选择器中先全局声明 Font-size=62.5%，很多初学者可能会在此定义0.625em或者直接定义12px，这是没有效果的，一定要定义font-size=62.5%！

任意浏览器的默认字体高都是10px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

将你的原来的px数值除以16，然后换上em作为单位

<head>
	<title>1</title>
	<style type="text/css">
		.btn{
			padding: .3em .8em;
    		border: 1px solid #446d88;
    		background: #58a linear-gradient(#77a0bb, #58a);
    		border-radius: .2em;
    		box-shadow: 0 .05em .25em gray;
    		color: white;
    		text-shadow: 0 -.05em .05em #335166;
    		font-size: 200%;
    		line-height: 1.5;
		}
	</style>
</head>
<body>
	<div class="btn">按钮</div>
</body>

改变font-size大小，就会改变按钮整体大小

2、currentColor

例子：让所有的水平分割线（所有<hr>元素）自动与文本的颜色保持一致。

hr { height: .5em; background: currentColor; }

3、继承（inherit 属性）

在CSS中，子元素会继承了父元素的一些样式属性。能够继承到子类的样式属性非常有限，仅是文字、字体、颜色... 子类如果还想继承父类的属性，可以通过inherit 强制继承。

button { font: inherit; }

a { color: inherit; }

4、预处理器

Stylus（http://stylus-lang.com/）

Sass（http://sass-lang.com/）

LESS（http://lesscss.org/）

这样的 CSS 预处理器。它们为 CSS的编写提供提供了一些便利，比如变量、mixin、函数、规则嵌套、颜色处理等。

5、DRY原则

假设一个逻辑(代码块)会重复两次或者以上，应该写成函数被调用

6、background-clip

设置元素的背景（背景图片或颜色）是否延伸到边框下面

background-clip: border-box;

background-clip: padding-box;

7. outline: 外边框

outline: 1px solid;

和border的区别：border占据空间，outline不占空间

8.vh视口

100vh

9.浏览器私有前缀

 background-image：-webkit-color:red;
 background-image：-moz-color:red;
 background-image：-ms-color:red;
 background-image：-o-color:red;