美文网首页
CSS3新特性总结

CSS3新特性总结

作者: 秀逼 | 来源:发表于2017-11-01 12:18 被阅读0次
    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性以及指定效果的持续时间。

    语法：
    transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
    举个例子：
    /宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡/
    transition：width,.5s,ease,.2s
    举个例子：
    /所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒/
    transition：all,.5s
    分开写各属性：

    transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

    简单的transtion示例代码：

    <!DOCTYPE html>
<html>
<head>
    <title>transition</title>
</head>
<style type="text/css">
    div.button {
        width: 100px;
        height: 50px;
        background-color: red;
        color: #eee;
        margin: 100px;
        text-align: center;
        line-height: 50px;
        border-radius: 10px;
        font-weight: bold;
        transition: all, .5s;
    }
    div.button:hover {
        background-color: #eee;
        color: red;
    }
</style>
<body>

    <div class="button">
        登录
    </div>
</body>
</html>
    下拉菜单:

    有过渡的ul的上级元素(祖先元素)有一个类名（ul-transition）。利用这个类名，设置ul的过渡.ul-transition ul{transform-origin: 0 0;transition: all .5s;}

    <!DOCTYPE html>
<html>
<head>
    <title>transition</title>
</head>
<style type="text/css">
    .demo-ul{
        margin-top: 300px;
    }
    .demo-ul li{
        padding: 0 10px;
        width: 100px;
        background: #f90;
        position: relative;
        list-style-type: none;
        float: left;
    }
    .demo-ul li a{
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: white;
        text-decoration: none;
    }
    .demo-ul li ul{
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0;
        transform: scaleY(0);
        overflow: hidden;
        padding-left: 0;
    }
    .ul-transition ul{
        transform-origin: 0 0;
        transition: all .5s;
    }
    .demo-ul li:hover ul{
        transform: scaleY(1);
    }
    .demo-ul li ul li{
        float: none;
        background: #0099ff;

}
</style>
<body>
    <div class="demo-hover demo-ul t_c">
        <ul class="fllil">
            <li>
                <a href="javascript:;">html</a>
                <ul>
                    <li><a href="#">div</a></li>
                    <li><a href="#">h1</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">js</a>
                <ul>
                    <li><a href="#">string</a></li>
                    <li><a href="#">array</a></li>
                    <li><a href="#">object</a></li>
                    <li><a href="#">number</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">css3</a>
                <ul>
                    <li><a href="#">transition</a></li>
                    <li><a href="#">animation</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">框架</a>
                <ul>
                    <li><a href="#">vue</a></li>
                    <li><a href="#">react</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="demo-hover demo-ul ul-transition t_c">
        <ul class="fllil">
            <li>
                <a href="javascript:;">html</a>
                <ul>
                    <li><a href="#">div</a></li>
                    <li><a href="#">h1</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">js</a>
                <ul>
                    <li><a href="#">string</a></li>
                    <li><a href="#">array</a></li>
                    <li><a href="#">object</a></li>
                    <li><a href="#">number</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">css3</a>
                <ul>
                    <li><a href="#">transition</a></li>
                    <li><a href="#">animation</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">框架</a>
                <ul>
                    <li><a href="#">vue</a></li>
                    <li><a href="#">react</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
</body>
</html>
    动画：动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬！

    语法：animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）

    举个栗子：
    /执行一次logo2-line动画，运动时间2秒，运动曲线为 linear/
    animation: logo2-line 2s linear;

    /2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear/
    animation: logo2-line 2s linear 2s;

    /无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画/
    animation: logo2-line 2s linear alternate infinite;

    animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。    
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 
both：向前和向后填充模式都被应用。  */
    css3实现跳动的音符效果

    直接上代码：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>纯CSS3模拟跳动的音符效果</title>
  <style>
    *{margin:0;padding:0;list-style: none;}
    body{background-color: #efefef;}
    .demo-music {
      position: absolute;
      width: 100%;
      height: 200px;
      top: 120px;
      zoom: 1.5;
    }

    .demo-music .music {
      width: 80px;
      height: 50px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-40px, -25px);
      transform: translate(-40px, -25px);
      position: absolute;
    }

    .demo-music #waves {
      width: 80px;
      height: 50px;
      position: absolute;
      top: 12px;
      left: 12px;
    }

    .demo-music #waves li {
      position: relative;
      float: left;
      height: 100%;
      width: 12%;
      overflow: hidden;
      margin-right: 1px;
    }

    .demo-music #waves li span {
      position: absolute;
      bottom: 0;
      display: block;
      height: 100%;
      width: 100px;
      background: #09f;
    }

    .demo-music #waves .li1 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }

    .demo-music #waves .li2 span {
      animation: waves 0.9s linear 0s infinite alternate;
      -webkit-animation: waves 0.9s linear 0s infinite alternate;
    }

    .demo-music #waves .li3 span {
      animation: waves 1s linear 0s infinite alternate;
      -webkit-animation: waves 1s linear 0s infinite alternate;
    }

    .demo-music #waves .li4 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }

    .demo-music #waves .li5 span {
      animation: waves 0.7s linear 0s infinite alternate;
      -webkit-animation: waves 0.7s linear 0s infinite alternate;
    }

    .demo-music #waves .li6 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }
    @-webkit-keyframes waves {
      10% {
        height: 20%;
      }
      20% {
        height: 60%;
      }
      40% {
        height: 40%;
      }
      50% {
        height: 100%;
      }
      100% {
        height: 50%;
      }
    }

    @keyframes waves {
      10% {
        height: 20%;
      }
      20% {
        height: 60%;
      }
      40% {
        height: 40%;
      }
      50% {
        height: 100%;
      }
      100% {
        height: 50%;
      }
    }
  </style>
</head>
<body>
  <div class="demo-music">
    <div class="music">
      <ul id="waves" class="movement">
        <li class="li1"><span class="ani-li"></span></li>
        <li class="li2"><span class="ani-li"></span></li>
        <li class="li3"><span class="ani-li"></span></li>
        <li class="li4"><span class="ani-li"></span></li>
        <li class="li5"><span class="ani-li"></span></li>
        <li class="li6"><span class="ani-li"></span></li>
      </ul>
      <div class="music-state"></div>
    </div>
    </div>
</body>
</html>
    阴影效果：

    语法：box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;

    举个栗子：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    width:300px;
    height:100px;
    background:#09f;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>
    边框图片：

    语法：border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;

    举个栗子：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.demo {
    border: 15px solid transparent;
    padding: 15px;   
    border-image: url(border.png);
    border-image-slice: 30;
    border-image-repeat: round;
    border-image-outset: 0;
}
</style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>
    边框圆角:

    语法：border-radius: n1,n2,n3,n4;
    border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
    /n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。/

    举个例子：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    text-align:center;
    width:300px;
    border-radius:25px 0 25px 0;
}
</style>
</head>
<body>
<div>border-radius</div>
</body>
</html>
    背景：

    background-clip：制定背景绘制（显示）区域

    默认情况（从边框开始绘制）

    image.png

    从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！（background-clip: padding-box;）

    image.png

    只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！（background-clip: content-box;）

    image.png

    background-origin
    引用菜鸟教程的说法：background-Origin属性指定background-position属性应该是相对位置

    下面的div初始的html和css代码都是一样的。如下
    html

    <div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

div
{
    border:10px dashed black;
    padding:35px;
    background:url('logo.png') no-repeat,#ccc;
    background-position:0px 0px;
}

    background-size:这个相信很好理解，就是制定背景的大小

    反射: 这个也可以说是倒影，用起来也挺有趣的。

    -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片

    文字换行：

    语法：word-break: normal|break-all|keep-all;

    image.png

    语法：word-wrap: normal|break-word;
    栗子和运行效果

    image.png

    单行超出省略号
    这个其实有三行代码，禁止换行，超出隐藏，超出省略号
    html

        overflow:hidden;
    white-space:nowrap; 
    text-overflow:ellipsis;

    多行超出省略号：现在css3提供了多行省略号的方法！遗憾就是这个暂时只支持webkit浏览器！

    <!DOCTYPE html>
<html>    
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    width:400px;
    margin:0 auto;
    overflow : hidden;
    border:1px solid #ccc;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>

<div>这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏</div>


</body>
</html>
    image.png

    这样发现边框贴着难看，要撑开一点，但是撑开上下边框不要使用padding!因为会出现下面这个效果

    image.png

    正确姿势是这样写

    <style> 
div
{
    width:400px;
    margin:0 auto;
    overflow : hidden;
    border:1px solid #ccc;
    text-overflow: ellipsis;
    padding:0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height:30px;
    height:60px;
}
</style>
    image.png

    这样写，就算在不是webkit内核的浏览器，也可以优雅降级（高度=行高*行数（webkit-line-clamp））！

    image.png

    文字阴影
    语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
    栗子：text-shadow: 0 0 10px #f00;
    效果

    image.png

    hsla
    h:色相”，“s：饱和度”，“l：亮度”，“a：透明度”
    这个我姿势了解过，没用过，这里简单给一个例子

    color: hsla( 112, 72%, 33%, 0.68);
    background-color: hsla( 49, 65%, 60%, 0.68);

    image.png

    Filter（滤镜）
    css3的滤镜也是一个亮点，功能强大，写法也灵活。

    多列布局
    这一块，我也是了解过，我觉得多列应该还是挺有用的。虽然我没在项目中用过，下面我简单说下！举个例子！这个属性，建议加私有前缀，兼容性有待提高！
    html

    <div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

    css

    .newspaper
{
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-rule:2px solid #000;
    -webkit-column-rule:2px solid #000;
    -moz-column-rule:2px solid #000;
}
    image.png

    媒体查询
    媒体查询，就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！不过由于我最近的项目都是使用rem布局。所以媒体查询就没怎么用了！但是，媒体查询，还是很值得一看的！说不定哪一天就需要用上了！

    栗子代码如下

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
body {
    background-color: pink;
}
@media screen and (max-width: 960px) {
    body {
        background-color: darkgoldenrod;
    }
}
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>

<h1>重置浏览器窗口查看效果！</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 960 px ，背景颜色将改变。</p>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>

</body>
</html>

    相关文章

      网友评论

          本文标题：CSS3新特性总结

          本文链接：https://www.haomeiwen.com/subject/czewpxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS3新特性总结|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！