背景
背景大小控制（注意：大小要写在背景属性后面）
background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
布局
【div自适应屏幕高度】
想要高度100%，需要在css里加写：html, body { height:100%}
这样设置的div高度才能达到100%。
100%是相对的，想要铺满整个屏幕，一层层嵌套的div也得需要100%才行。
【div居中】
position:absolute;
top:50%; left:50%;
margin-top:-100px;(元素高度的一半)
margin-left:-100px;(元素宽度的一半)
【div宽度自适应内容】
width:fit-content;
width:-webkit-fit-content;
width:-moz-fit-content;
容器样式
【圆角】
border-radius:5px 5px 5px 5px；
动画
【平移动画】
@keyframes map_mc {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200px, 0, 0);
transform: translate3d(-200px, 0, 0);
display: none;
}
}
.map_mc{
background: url(img/map_mc.png) no-repeat;
-webkit-animation: 10s map_mc linear infinite normal;
animation: 10s map_mc linear infinite normal;
position: relative;
}
写法2
CSS3的动画属性：
①.animation-name:
用于将动画（@keyframes 语法）附加到元素上；
②. animation-duration:
定义动画完成一次迭代（从0%到100%）所花的时间；
③. animation-timing-function:
类似于transition-timing-function属性，
用来更细粒度的控制动画的速度。
取值有: ease\ linear\ ease-in\ ease-out\ ease-in-out 之一
④.animation-iteration-count:
此属性用来定义动画要执行多少次。infinite无限次
⑤. animation-direction:
当动画迭代时，可以使用具有alternate的 animation- direction属性来使其他迭代反向播放动画。 默认normal；
⑥. animation-delay:
在开始执行动画时的延迟
⑦. animation-fill-mode:
取值有：none、forwards、backwards、both
定义在动画开始之前或者结束之后发生的动作
⑧. animation-play-state:
定义动画运行还是暂停
【摘自：CSDN博主「画一生情入颜容」的文章，原文链接：https://blog.csdn.net/csdn_zsdf/article/details/70807823 】
/*地球自转动画-start*/
.map_mc{
margin: 77px 0 0 0;
position: absolute;
width: 214px;
height: 214px;
background:url(img/map_mc.png) 156px top;
-webkit-mask: url(img/mc_zhezhao.png);
-webkit-mask-size: cover;
z-index:1;
-webkit-animation-name: flymove;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 20000;
-moz-animation-name: flymove;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 20000;
-ms-animation-name: flymove;
-ms-animation-duration: 10s;
-ms-animation-timing-function: linear;
-ms-animation-iteration-count: 20000;
}
@-webkit-keyframes flymove{
0%{background-position:0px 0px;}
100%{background-position:370px 0;}
}
@-moz-keyframes flymove{
0%{background-position:0px 0px;}
100%{background-position:370px 0;}
}
@-ms-keyframes flymove{
0%{background-position:0px 0px;}
100%{background-position:370px 0;}
}
/*地球动画-end*/
旋转动画
样式：
/*效果一：360°旋转 修改rotate(旋转度数)*/
.mymc{
position: relative;
z-index: 100px;
width: 837px;
height: 837px;
margin: 0 auto 0 auto;
padding-top: 80px;
overflow: hidden;
}
.mydiv{
opacity: 0.3;
position: absolute;
z-index: 100px;
width: 837px;
height: 837px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 50s linear infinite;
-moz-animation: rotate 50s linear infinite;
-o-animation: rotate 50s linear infinite;
animation: rotate 50s linear infinite;
transform-origin: 50% 50% 0px;
-webkit-transform-origin: 50% 50% 0px;
-ms-transform-origin: 50% 50% 0px;
-moz-transform-origin: 50% 50% 0px;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}
代码：
<div class="mymc">
<div class="mydiv"><img src="img/01.png" width="837" height="837" alt=""/></div>
<div class="breathe-div"></div>
</div>
一个CSS挺酷的呼吸圈
样式：
/*呼吸圈*/
.breathe-div {
width: 500px;
height: 500px;
border: 1px solid #2b92d4;
border-radius: 50%;
text-align: center;
cursor: pointer;
margin:170px auto;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: breathe;
-webkit-animation-duration: 1500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes breathe {
0% {
opacity: .4;
box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
}
100% {
opacity: 1;
border: 1px solid rgba(59, 235, 235, 0.7);
box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
}
}
代码：
<div class="breathe-div"></div>
透明度
opacity:1.0;
纯 css写的图片轮播
/*图片轮播*/ .myad{ width: 750px; height: 422px; margin:255px 0 0 810px; position: absolute; background: url(img/yq_pic1.jpg) ; background-repeat: no-repeat; background-size:cover ; opacity: 1; animation: fateimg 10s linear infinite; } @keyframes fateimg{ 0%{background: url(img/yq_pic1.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;} 30%{background: url(img/yq_pic1.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;} 40%{background: url(img/yq_pic1.jpg);opacity: 0;background-repeat: no-repeat;background-size:cover ;} 50%{background: url(img/yq_pic2.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;} 80%{background: url(img/yq_pic2.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;} 90%{background: url(img/yq_pic2.jpg);opacity: 0;background-repeat: no-repeat;background-size:cover ;} 100%{background: url(img/yq_pic1.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;} }
用CSS3实现鼠标移动到图片上图片变大效果
代码
div img:hover{
transition: all 0.6s;
transform: scale(1.4);
-webkit-transform: scale(1.4);
}
计算
calc()使用通用的数学运算规则，但是也提供更智能的功能：
使用“+”“-”“*”“/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算。
.box{
border:1px solid #ddd;
width:calc(100% - 100px);
background:#9AC8EB;
}
3栏等宽布局
.box{
margin-left:20px;
width:calc(100%/3 - 20px);
}
.box:nth-child(3n){
margin-left:0;
}
网友评论