CSS3

ymktchic

发布于 2022-01-18 17:15:01

3100

发布于 2022-01-18 17:15:01

文章被收录于专栏：ymktchicymktchic

CSS3

浏览器内核

transition过渡

transition

transition-property: all; 
       transition-duration: 1s; 
       transition-delay: 2s;
       transition-timing-function:cubic-bezier(.49,-0.75,.88,1.74);

transition-property : 规定设置过渡效果的CSS属性的名称。
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数)，也可以提前(数值为负数) )
transition-timing-function : 规定速度效果的速度曲线。

transform变化

transform的注意事项：

变形操作不会影响到其他元素。
变形操作只能添加给块元素，但是不能添加给内联元素。
复合写法，可以同时添加多个变形操作
执行是有顺序的，先执行后面的操作，再执行前面的操作。
translate会受到 rotate、scale、skew的影响
transform-origin : 基点的位置 x y z(3d)

animaion动画

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;
  }
  to {background-color: yellow;
  width:200px;}

animation-name: 设置动画的名字。
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数，默认值就是1 ，infinite无限次数
animation-timing-function : 动画的运动形式

注：

运动结束后，默认情况下会停留在起始位置。
keyframes : from -> 0% , to -> 100%

复合写法：animation:①②③④⑤;

 ul li:hover img{ animation: move 5s;}
    @keyframes move{
        0%{ transform : translate(0,0); opacity:1; }
        60%{ transform : translate(0,-50px); opacity:0;}
        61%{ transform : translate(0,20px);}
        100%{ transform : translate(0,0); opacity:1;}
    }
/* 淡入淡出效果 */

animation实现动画加载效果

<style type="text/css">
		.loading{width: 40px;height: 40px;position: relative; margin: 20px auto;}
		.loading .box1 ,.loading .box2{width: 100%;height: 100%;position: absolute;}
		.loading .box2{transform: rotate(45deg);}
		.box1 div ,.box2 div{width: 10px;height: 10px;background: skyblue;border-radius: 50%;position: absolute;animation: load 1.5s infinite linear;}
	      .box1 div:nth-of-type(1) {left: 0;top: 0;animation-delay: 1.4s;}
		   .box2 div:nth-of-type(1){left: 0;top: 0;animation-delay: 1.2s;}
		.box1 div:nth-of-type(2) {right: 0;top: 0;animation-delay: 1s;}
		 .box2 div:nth-of-type(2){right: 0;top: 0;animation-delay: .8s;}
		.box1 div:nth-of-type(3) {right: 0;bottom: 0;animation-delay: .6s;}
		 .box2 div:nth-of-type(3){right: 0;bottom: 0;animation-delay: .4s;}
		 .box1 div:nth-of-type(4) {left: 0;bottom: 0;animation-delay: .2s;}
		  .box2 div:nth-of-type(4){left: 0;bottom: 0;animation-delay: 0s;}
		@keyframes load{
	    	%0{transform: scale(1);}
	    	50%{transform: scale(0);}
			100%{transform: scale(1);}
	    }
	   
	</style>

animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。 none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效 backwards : 在延迟的情况下，让0%在延迟前生效 forwards : 在运动结束的之后，停到结束位置 both : backwards和forwards同时生效 animation-direction : 属性定义是否应该轮流反向播放动画。 alternate : 一次正向(0%-100%)，一次反向(100%-0%) reverse : 永远都是反向 , 从100%-0% normal (默认值) : 永远都是正向 , 从0%-100%

transform3D

transform: rotateX() : 绕x轴顺时针旋转 rotateY() : 绕y轴顺时针旋转 translateZ() : 绕z轴顺时针旋转 scaleZ() : 立体元素的厚度 3d写法 scale3d() : 三个值 x y z translate3d() : 三个值 x y z rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg

做一个3d立方体

<style>
    *{ margin:0; padding:0;}
    ul{ list-style: none;}
    .box{ width:300px; height:300px; border:1px black solid; margin:30px auto; perspective: 200px; perspective-origin: top right;}
    .box ul{ width:100px; height:100px; margin:100px; position: relative; transform-style:preserve-3d; transition:2s; transform-origin: center center -50px; 
        /* transform: scaleZ(.5); */
        /* transform: scale3d(2,.5,2); */
       /*  transform: translate3d(100px,100px,100px); */
       transform: rotate3d(1,1,1,30deg);
    }
    .box ul li{ width:100px; height:100px; position: absolute; line-height: 100px; text-align: center; color:white;font-size: 26px; opacity: 0.5; backface-visibility: hidden;}
    .box ul li:nth-child(1){ background:red; left: 0; top: 0;}
    .box ul li:nth-child(2){ background:blue; left: 100px; top: 0; transform-origin: left; transform: rotateY(90deg);}
    .box ul li:nth-child(3){ background:yellow; left: -100px; top: 0; transform-origin: right; transform: rotateY(-90deg);}
    .box ul li:nth-child(4){ background:green; left: 0; top: -100px; transform-origin: bottom; transform:rotateX(90deg);}
    .box ul li:nth-child(5){ background:pink; left: 0; top: 100px; transform-origin: top; transform:rotateX(-90deg);}
    .box ul li:nth-child(6){ background:gray; left: 0; top: 0; transform:translateZ(-100px) rotateY(180deg);}
    .box:hover ul{ transform: rotate3d(1,1,1,300deg);}
    </style>

效果：

perspective（观察距离）: 离屏幕多远的距离去观察元素，值越大幅度越小。
perspective-origin : 观察基点位置，观察元素的角度。perspective-origin : top right。
transform-origin: center center -50px; （Z轴只能写数值，不能写单词）
transform-style : 3D空间 flat (默认值2d)、preserve-3d (3d，产生一个三维空间)
backface-visibility : 背面隐藏 hidden、visible (默认值)

旋转木马

<style>
   *{ margin:0; padding:0;}
   ul{ list-style: none;}
   img{ display: block;width:120px; height:60px;}
   .parent{ width:600px; height:300px; border:1px black solid; margin: 30px auto; perspective: 700px;}
   .parent ul{ width:45px; height:30px; margin: 100px auto; position: relative; transform-style: preserve-3d; transition: 2s;}
   .parent ul li{  width:100%; height:100%; position: absolute; left: 0; top: 0;}
   .parent ul li:nth-child(1){ transform: rotateY(0) translateZ(200px);}
   .parent ul li:nth-child(2){ transform: rotateY(60deg) translateZ(200px);}
   .parent ul li:nth-child(3){ transform: rotateY(120deg) translateZ(200px);}
   .parent ul li:nth-child(4){ transform: rotateY(180deg) translateZ(200px);}
   .parent ul li:nth-child(5){ transform: rotateY(240deg) translateZ(200px);}
   .parent ul li:nth-child(6){ transform: rotateY(300deg) translateZ(200px);}
   .parent:hover ul{ transform:rotateY(360deg);}
</style>

CSS3拓展背景样式

background-size : 背景图的尺寸大小 cover : 覆盖，contain : 包含
background-origin : 背景图的填充位置 padding-box (默认) border-box content-box
background-clip : 背景图的裁切方式 padding-box border-box (默认) content-box

注：复合样式的时候，第一个是位置，第二个是裁切

图片翻转效果

*{ margin:0; padding:0;}
  img{ display: block; width: 200px;height:100px;}
  .parent{ width:200px; height:100px; margin: 200px auto; position: relative; perspective: 300px;}
  .parent div{ width:100%; height:100%; position: absolute; left: 0; top: 0; backface-visibility: hidden; transition: .5s;}

  .parent div:first-child{ transform: rotateY(0); }
  .parent div:last-child{ transform: rotateY(-180deg);}

  .parent:hover div:first-child{ transform: rotateY(180deg); }
  .parent:hover div:last-child{ transform: rotateY(0);}

CSS3线性渐变

线性渐变 -> linear-gradient是值，需要添加到background-image属性上注：渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转。

iconfont矢量图标库

链接：阿里巴巴矢量图标库

图标引入

<link rel="stylesheet" href="./css/iconfont.css">
<script src="./css/iconfont.js"></script> /*彩色图标引入js才是彩色 */

<span class="iconfont iconDollar"></span>
   <span class="iconfont iconcompass"></span>
   <span class="iconfont iconfood-strawberry"></span>

text-shadow

hello world

<div style="font-size:20px;text-shadow:3px 3px  pink">hello world</div>

hello world

 <div style="font-size:30px;text-shadow:3px 3px  skyblue">hello world</div>

hello world

<div style="font-size:30px; color: white;text-shadow: 2px 2px 4px #000000;">hello world</div>

hello world

<div style="font-size:30px; color: white;text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;">hello world</div>

hello world

<div style="font-size:30px;  color: pink;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">hello world</div>

box-shadow

卡片材质效果：

《phaseless》-Pacemak1r

<div style="  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center ;margin:5px auto;">
  <img src="CSS3/pg.jpg" alt="pgone" style="width:100%">
  <div style="padding:10px">
    <p>《phaseless》-pgone</p>
  </div>
</div>

box-shadow: h-shadow v-shadow blur spread color inset;

分栏布局

column-count : 分栏的个数
column-width : 分栏的宽度
column-gap : 分栏的间距
column-rule : 分栏的边线
column-span : 合并分栏

注:分栏的宽度和分栏个数只能设置一个。

CSS3伪元素

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

请注意双冒号表示法 - ::first-line 对比 :first-line

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

CSS hack

什么是CSS hack

不同厂商和浏览器的版本不同（如IE6-IE11,Firefox/Safari/Opera/Chrome等），导致CSS写法不同，解析方式不同，最后在页面上显示的效果也不同。为了统一在页面上的显示效果，针对不同浏览器写相应的CSS，这种方法称为CSS hack。

CSS hack 分类

CSS属性前缀法 .elem{ _background:red; }
选择器前缀法 *html .elem{ }
IE条件注释法 IE10以上已经不支持注释法。

详情见：史上最全的CSS hack方式一览_freshlover的专栏-CSDN博客_css hack

渐进增强和优雅降级

什么是渐进增强

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

什么是优雅降级

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

.transition{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}
/*渐进增强*/

.transition{ 
　　     transition: all .5s;
　　  -o-transition: all .5s;
  　-moz-transition: all .5s;
 -webkit-transition: all .5s;
}
/*优雅降级*/

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-11-19，如有侵权请联系 cloudcommunity@tencent.com 删除

css

图像处理

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

图像处理

登录后参与评论

0 条评论

热度

CSS3

CSS3

CSS3

浏览器内核

transition过渡

transition

transform变化

animaion动画

animation实现动画加载效果

transform3D

做一个3d立方体

旋转木马

CSS3拓展背景样式

图片翻转效果

CSS3线性渐变

iconfont矢量图标库

text-shadow

box-shadow

分栏布局

CSS3伪元素

CSS hack

什么是CSS hack

CSS hack 分类

渐进增强和优雅降级

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐