首页 > 程序开发 > web前端 > HTML/CSS >

css3(5)

2017-08-09

css3(5),text-shadow :文本阴影。

text-shadow :文本阴影。

p{

font-size:60px;

font-weight:900px;

color:#999;

text-shadow:5px 5px 5px #333; 水平位移,垂直位移,模糊半径,颜色。

} 文字缩进: text-indent 文本换行:

p

{

width:100px;

border:solid 1px red;

word-wrap:break-word;/断单词/

word-break:break-all;/断字符/

white-space:nowrap;/强制在一行内显示所有文本/

}

overflow:hidden; 超出部分隐藏。

overflow:auto; 超出有滚动条。

overflow:srcoll; 超出不超出都有滚动条 文本溢出

div

{

width:200px;

white-space:nowrap;

border:solid 1px red;

text-overflow:clip;/不显示省略标记,而是简单的裁切掉/

text-overflow:ellipsis;/当对象内文本溢出时显示省略标记/

overflow:hidden;

}

注意:text-overflow是配合overflow使用的。 圆角 border-radius

border-top-left-radius:10px; 阴影 box-shadow :

box-shadow:5px 5px 5px #333; 水平位移,垂直位移,模糊半径,颜色。 背景图片铺满: background-size:cover; transform

#d1

{

width:100px;

height:100px;

background-color:#00F;

}

#d1:hover

{

transform:rotate(40deg) scale(1.2); /顺时针旋转40度,放大1.2倍/

transform:translate(40px,40px); /水平偏移40px,垂直偏移40px/

transform:skew(30deg,-10deg); /水平倾斜30度,垂直倾斜10度/

} 兼容性写法:

#d1:hover{

-ms-transform:rotate(40deg) scale(1.2); /顺时针旋转40度,放大1.2倍/ IE内核浏览器

-moz-transform:translate(40px,40px); /水平偏移40px,垂直偏移40px/ 火狐内核浏览器

-o-transform:skew(30deg,-10deg); /水平倾斜30度,垂直倾斜10度/ safari是苹果内核浏览器

-webkit-transform:rotate(40deg) scale(1.2); 谷歌内核浏览器

} 平滑过渡:

#d1

{

width:100px;

height:100px;

background-color:#00F;

}

#d1:hover

{

background-color:#F00;

transition:background-color 1s ease-in;/过渡的属性,如果是所有的则是all,经历的时间,过渡效果/

}

匀速:linear 加速:ease 开始慢:ease-in

结束慢: ease-out 开始结束慢中间快 : ease-in-out 更复杂的动画 animation :

#d1

{

magin:0px auto;

width:959px;

height:613px;

background-image:url(“11.jpg”);

animation:x-spin 20s infinite linear;/动画名称,经历时间,播放次数(为infinite则一直播放),播放方式/

}

@-webkit-keyframes x-spin

{

0%{

transform:rotateX(0deg);/沿x轴开始旋转/

}

50%{

transform:rotateX(180deg);/沿x轴旋转180/

}

10%{

transform:rotateX(360deg);/沿x轴旋转360/

}

} 替换图片:

#d1 {

width: 239px;

height: 360px;

background-image: url(“../img/1.jpg”);

background-repeat: no-repeat;

}

#d1:hover {

background-image: url(“../img/10.jpg”);

transform: rotate(40deg);

transition: all ease 1s;

}

实例一

css: .pic img { width: 150px; border: solid 2px #fff; border-radius: 12px; cursor: pointer; } .pic { position: absolute; } .pic1 { top: 100px; left: 100px; transform: rotate(30deg); } .pic2 { top: 150px; left: 150px; transform: rotate(-30deg); } .pic3 { top: 180px; left: 180px; transform: rotate(40deg); } .pic4 { top: 100px; left: 230px; transform: rotate(-20deg); } .pic5 { top: 230px; left: 180px; transform: rotate(-40deg); } .pic6 { top: 140px; left: 250px; transform: rotate(34deg); } .pic7 { top: 90px; left: 350px; transform: rotate(55deg); } .pic8 { top: 240px; left: 400px; transform: rotate(-22deg); } .pic9 { top: 80px; left: 450px; transform: rotate(-24deg); } .pic:hover { transform: rotate(0deg) scale(1.5); transition: transform ease 1s; z-index:2; }

实例二:

css: #d1 { width: 600px; height: 338px; margin-top: 100px; margin-left: 100px; background-image: url("../img/11.jpg"); animation: donghua 10s ease infinite; } @keyframes donghua { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg) scale(1.5); } 100% { transform: rotateY(360deg) scale(1); } } 实例三:

css: body { background-color: #000; } .ball-box { height: 300px; width: 300px; position: absolute; top: 50%; left: 50%; margin: -150px 0px 0px -150px; perspective:3000px; } .ball { height: 100%; transform-style: preserve-3d; animation: rotate3d 20s infinite linear; } @-webkit-keyframes rotate3d { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .ball > div { border: solid 2px #fff; height: 100%; width: 100%; position: absolute; border-radius: 100%; } .line-1 { transform: rotateY(0deg); } .line-2 { transform: rotateY(36deg); } .line-3 { transform: rotateY(72deg); } .line-4 { transform: rotateY(108deg); } .line-5 { transform: rotateY(144deg); } .ball::after { content: ""; width: 1px; height: 500px; background-color: #ff0; display: block; transform: translateX(150px) translateY(-100px); } 重要亮点

transform-style: preserve-3d; 使其具有3d效果。

perspective:3000px; 透镜,相当于焦距,焦距越小成像越大,焦距越大,成像越大

相关文章
最新文章
热点推荐