前端学习笔记07---css3新特性
看了一下css3的特性，记录一点新认识的特性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3新特性</title> <link rel="stylesheet" href="lab06.css"> </head> <body> <!-- 渐变 --> <div id="gradient"> </div> <!-- 文字效果 --> <p id="the-word"> experience This is a sentence of test </p> <!-- @font-face css3字体--> <p id="the-font"> experience This is a sentence of test </p> <!-- 过渡 --> <div id="trasition"> 过渡效果 </div> <!-- css3动画 --> <div id="keyframes"> 我是一个keyframes的动画 </div> <!-- css3多列 --> <p id='column'> 当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。 </p> <!-- 滤镜 --> <img src="/statics/images/pineapple.jpg" alt="Pineapple" width="300" height="300"> </body> </html>
#gradient{ width: 100px; height: 0; padding-bottom: 300px; /* 线性渐变：linear-gradient */ background: linear-gradient(to bottom right,red, blue,yellow,blue); /* 径向渐变（从外到里）：radial-gradient */ /* background: radial-gradient(red, blue,yellow,blue); */ /* 带百分比的颜色渐变 百分比就是颜色到开始位置的距离 */ /* background: linear-gradient(to bottom right,red 40%,yellow 60%,blue); */ /* 重复的渐变 */ /* background: repeating-linear-gradient(to bottom right,red 10%,yellow 20%); */ border: 10px solid #000000; } #the-word{ /* 文字阴影 5个属性(阴影水平偏移位置 阴影垂直偏移位置 （模糊距离） 阴影大小 颜色) */ text-shadow: 5px 1px 5px #00008B; /* 盒子阴影 说白了就是给块状元素用的 属性同上 */ /* box-shadow: -5px 5px 5px #000000; */ /* 阴影可以加多个 */ box-shadow: -5px 5px 5px #000000, 5px 5px 5px #000000; /* 文字溢出管理 一般用来表示省略号 要用之前要设置 overflow: hidden; */ /* width: 30px; height: 30px; overflow: hidden; text-overflow: ellipsis; */ /* 文字默认情况是在不影响单词的情况下换行， 就是一个单词是完整的在一行的，不会变成两行， 即使他位置不够只是溢出也不会拆成两行 */ /* width: 40px; height: 100px; */ /* word-break: keep-all; */ /* 文字强制换行 可以在单词中强制换行 例如‘experience’不够位置变成expe-rience， 从中间换行不会再单词结尾再换 学过英语懂得都懂 不过在这种情况下，单词结束也是会换行，只不过它可以不会溢出会拆成两行而已*/ /* word-wrap: break-word; */ /* 完全文字强制换行 完全的强制换行 没有单词的概念了*/ word-break: break-all; } /* @font-face 可以自定义的设置你想要的font-family 可以在里面加任何文字规则 */ @font-face { font-family: myFirstFont; src: url(sansation_light.woff); font-weight: bold; } #the-font{ font-family: myFirstFont; } /* css3过渡 过渡是从一种状态逐渐变为另一状态 所以属性应该有变化的属性和过渡时间 用来说明我应该从这一状态变化哪个属性多长时间到那个状态； 不同的状态，一般是设置伪元素； 一般和tansform这个属性搭配 过渡就像是一个监听，监听着指定的属性是否发生变化，但它本质上不是监听，只是像而已； 当然也可以指定多项属性； */ #trasition{ transition: transform 2s, width 2s, height 2s; background-color: red; height: 100px; width: 100px; } /* 当鼠标悬浮在这里时字体变为20px*/ #trasition:hover{ width: 200px; height: 200px; transform: rotate(180deg); } /* css3的动画由两个要素构成，一个是keyframes，一个是animation； keyframes是规定了动画的动作，动画是干了什么，从什么动作开始，到什么动作， 规定另一个动画的内容； animation就是用来绑定元素与动画的，说明这个元素要用的动画和持续时间 */ @keyframes colorchange{ /* from - to 形式 */ /* from{ background-color: #0000FF; } to{ background-color: #000000; color: #FFFFFF; } */ /* 百分比形式 */ 0%{ background-color: #0000FF; } 50%{ background-color: #000000; /* 如果设置多个变换函数的时候要记住先位移在旋转 */ /* transform: scale(2) rotate(180deg); */ } 100%{ background-color: #000000; color: #FFFFFF; transform: translate(100px); } } #keyframes{ animation: colorchange 5s; /* 播放次数 默认是1 infinite（无限）表示无限次 */ animation-iteration-count: infinite; /* 播放的方向 可以设置逆序播放 alternate（交替的）表示奇数次正向，偶数次逆向*/ /* animation-direction: reverse; */ } /* css3多列 可以让一段文本变为多列效果，像是新闻排版一样。 和flex等其他布局实现的多列效果看起来差不多，但有一点区别，这里的多列中的每一列不是单一的一个元素， 所以这样做的多列效果大部分样式的会应用全部列，而无法实现单列特殊化； 如果只是需要简单的多列效果可以用，很方便啊， */ #column{ /* 设置列数 */ column-count: 3; /* 设置列的宽度 宽度*/ column-width: 100px; /* 缩写 */ columns: 2 500px; /* 设置列之间的样式 */ column-rule: 10px solid #00008B; } /* 滤镜 有很多滤镜呀，blur(px)、brightness(%)、contrast(%)、drop-shadow(h-shadow v-shadow blur spread color)、 grayscale(%)、hue-rotate(deg)、invert(%)、opacity(%)、saturate(%)、sepia(%)、url() */ img{ /* 比较常用的是blur() opacity(%) drop-shadow(h-shadow v-shadow blur spread color) url() */ filter: blur(10px); /* 高斯模糊滤镜 */ filter: opacity(0.3); /* 模糊度滤镜 */ filter: drop-shadow(10px 20px 0 1 #fffff); /* 阴影滤镜 */ filter: url('url'); /* 传递一张图片作为滤镜 */ }
