• 动画 过渡 渐变 文本效果 多媒体查询


    动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> 
            div
            {
                width:100px;
                height:100px;
                background:red;
                animation:myfirst 1s;
                -webkit-animation:myfirst 1s; /* Safari and Chrome */
            }
            
            @keyframes myfirst
            {
                from {background:red;}
                to {background:yellow;}
            }
            
            @-webkit-keyframes myfirst /* Safari and Chrome */
            {
                from {background:red;}
                to {background:yellow;}
            }
            /* @keyframes myfirst
    {
        0%   {background: red; left:0px; top:0px;}
        25%  {background: yellow; left:200px; top:0px;}
        50%  {background: blue; left:200px; top:200px;}
        75%  {background: green; left:0px; top:200px;}
        100% {background: red; left:0px; top:0px;}
    }
     
    @-webkit-keyframes myfirst /* Safari 与 Chrome 
    {
        0%   {background: red; left:0px; top:0px;}
        25%  {background: yellow; left:200px; top:0px;}
        50%  {background: blue; left:200px; top:200px;}
        75%  {background: green; left:0px; top:200px;}
        100% {background: red; left:0px; top:0px;}
    } */
            </style>
    </head>
    <body>
    
        <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    
        <div></div>
    </body>
    </html>
    <!-- 
    @keyframes 规则是创建动画
    @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式
     @keyframes myfirst
        {
            from {background: red;}
            to {background: yellow;}
        }
         
        @-webkit-keyframes myfirst /* Safari 与 Chrome */
        {
            from {background: red;}
            to {background: yellow;}
        }
    
        @keyframes 可以是百分比
    规定动画。
    animation                           所有动画属性的简写属性,除了 animation-play-state 属性。
    animation-name                      规定 @keyframes 动画的名称。
    animation-duration                  规定动画完成一个周期所花费的秒或毫秒。默认是 0。
    animation-timing-function           规定动画的速度曲线。默认是 "ease"。linaer匀速
    animation-fill-mode                 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
    animation-delay                     规定画何时开始。默认是 0。
    animation-iteration-count           规定动画被播放的次数。默认是 1。
    animation-direction                 规定动画是否在下一周期逆向地播放。默认是 "normal"。
    animation-play-state                规定动画是否正在运行或暂停。默认是 "running"。
     -->

    过渡

    <!-- 
       1. 应用于宽度属性的过渡效果,时长为 2 秒:
    div
    {
        transition: width 2s;
        -webkit-transition: width 2s; /* Safari */
    }
    transition
    简写属性,用于在一个属性中设置四个过渡属性。
    transition-property         规定应用过渡的 CSS 属性的名称。
    transition-duration         定义过渡效果花费的时间。默认是 0。
    transition-timing-function  规定过渡效果的时间曲线。默认是 "ease"。
     值                          描述
    linear    规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
    ease    规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
    ease-in    规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
    ease-out    规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
    ease-in-out    规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
    cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
    
    transition-delay            规定过渡效果何时开始。默认是 0。
    简写:transition:left 2s liner 0s;(属性名称,过渡时间,时间函数,延迟)
    全部添加 all 效率低下
     -->

    渐变

    <!-- 
        从上向下默认 
        从左向右 to #
        对角 to bottom right
        角度  逆时针 deg单位
        透明度 transparent   background: linear-gradient(to right, rgba(255,0,0,0.5), rgba(255,0,0,1));
        重复的线性渐变  background: repeating-linear-gradient(red, yellow 10%, green 20%)
                   径向渐变
        background:    radial-gradient(center, shape size, start-color, ..., last-color);
        设置形状        background: radial-gradient(circle, red, yellow, green);
        重复的径向渐变  background: repeating-radial-gradient(red, yellow 10%, green 15%)
        size 参数定义了渐变的大小。它可以是以下四个值:
    closest-side
    farthest-side
    closest-corner
    farthest-corner
     -->

    文本效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <style>
            #boxshadow {
                position: relative;
                -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
                -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
                box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
                padding: 10px;
                background: white;
            }
            
            /* Make the image fit the box */
            #boxshadow img {
                width: 100%;
                border: 1px solid #8a4419;
                border-style: inset;
            }
            
            #boxshadow::after {
                content: '';
                position: absolute;
                z-index: -1; /* hide shadow behind image */
                -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
                -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
                box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
                width: 70%;
                left: 15%; /* one half of the remaining 30% */
                height: 100px;
                bottom: 0;
            }
            </style>
            </head>
            <body>
            
            <div id="boxshadow">
              <img src="./../../../数据库//图片//png图片//百度新闻.png" alt="Norway" width="600" height="400">
            </div>
    </body>
    </html>
    <!--     
        1.文本阴影:text-shadow:offsetX  offsetY blur color
        CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
    实例
    div {
        box-shadow: 10px 10px 5px #888888;
    }
    hanging-punctuation 规定标点字符是否位于线框之外。
    punctuation-trim    规定是否对标点字符进行修剪。
    text-align-last     设置如何对齐最后一行或紧挨着强制换行符之前的行。
    text-emphasis       向元素的文本应用重点标记以及重点标记的前景色。
    text-justify        规定当 text-align 设置为 "justify" 时所使用的对齐方法。
    text-outline        规定文本的轮廓。
    text-overflow       规定当文本溢出包含元素时发生的事情。
    text-shadow         向文本添加阴影。
    text-wrap           规定文本的换行规则。
    word-break          规定非中日韩文本的换行规则。
    word-wrap           允许对长的不可分割的单词进行分割并换行到下一行。
    
    -->

     多媒体查询

     1 <!--  
     2     多媒体查询语法
     3     @media not|only mediatype and (expressions) {
     4     CSS 代码...;
     5 }
     6 not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)
     7 only: 用来定某种特别的媒体类型
     8 all: 所有设备,这个应该经常看到。
     9 
    10 CSS3 多媒体类型
    11 all用于所有多媒体类型设备
    12 print用于打印机
    13 screen用于电脑屏幕,平板,智能手机等。
    14 speech用于屏幕阅读器
  • 相关阅读:
    读书笔记:《与爱因斯坦月球漫步》
    在职工象棋赛上弃子拿下一盘
    桥牌笔记:精准叫牌法摘要
    桥牌笔记:探查牌型分布
    在64位环境下开发程序时常遇到的一个错误:无法加载文件或程序集
    我的记忆图像编码
    【转载】新闻周刊:《2012:31个让你变聪明的方法》
    【转译】希望将来孩子评价父亲的35句话
    桥牌笔记:安全打法,保持将牌控制
    被Html的Button标签耍了一次
  • 原文地址:https://www.cnblogs.com/wxy0715/p/12442197.html
Copyright © 2020-2023  润新知