前端学习笔记07---css3新特性

时间:2020-05-20
本文章向大家介绍前端学习笔记07---css3新特性，主要包括前端学习笔记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');    /* 传递一张图片作为滤镜 */
}

原文地址：https://www.cnblogs.com/waverode/p/12924337.html

随机文章
WEB前端知识点必读
最近更新