transition-property: all;
transition-duration: 1s;
transition-delay: 2s;
transition-timing-function:cubic-bezier(.49,-0.75,.88,1.74);
transform的注意事项:
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:①②③④⑤;
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;}
}
/* 淡入淡出效果 */
<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%
<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>
效果:
<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>
注:复合样式的时候,第一个是位置,第二个是裁切
*{ 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);}
链接: 阿里巴巴矢量图标库
图标引入
<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>
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>
卡片材质效果:
《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;
注:分栏的宽度和 分栏个数只能设置一个。
CSS 伪元素用于设置元素指定部分的样式。
例如,它可用于:
请注意双冒号表示法 - ::first-line 对比 :first-line
不同厂商和浏览器的版本不同(如IE6-IE11,Firefox/Safari/Opera/Chrome等),导致CSS写法不同,解析方式不同,最后在页面上显示的效果也不同。为了统一在页面上的显示效果,针对不同浏览器写相应的CSS,这种方法称为CSS hack。
详情见:史上最全的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;
}
/*优雅降级*/