美文网首页
前端笔记6

前端笔记6

作者: 明日计划 | 来源:发表于2018-06-11 21:49 被阅读0次

    图片的修复

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ie6png的修复</title>
<style type="text/css">
    .box1{
        width: 200px;
        height: 200px;
        background-image: url(img/3_1.png);
        background-repeat: no-repeat;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-image: url(img/3.png);
        background-repeat: no-repeat;
    }
</style>
</head>
<body style="background-color: #bfa;">
<!-- 
在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示
解决方法：
    1.可以使用png8来代替png24，即可解决问题，但是使用png8代替png24以后，图片的清晰图会有所下降
    2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件，然后在写一下简单的JS代码，来处理该问题
 -->
<div class="box1"></div>
<div class="box2"></div>
<img src="img/3.png" alt="大脸猫">

<!-- 在body标签的最后引入外部的JS文件 -->
<!--再创建一个新的script标签，并且编写一些js代码 -->

<!-- 以下代码只会在IE6中执行，其他浏览器中无效 -->
<!--[if IE 6]>
    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix("div,img");
    </script>
<![endif]-->
</body>
</html>

    效果：


    image.png

    条件

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件Hack</title>
<link rel="stylesheet" type="text/css" href="css/style-normal.css">
<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="css/style-ie8.css">
<![endif]-->
</head>
<body>
<!-- 
有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，这时就可以使用CSS Hack来解决该问题
CSS Hack实际上指的是一种特殊的代码，这段代码只在某些浏览器中可以识别，而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码
 -->

<!-- 
条件Hack
    它只对IE浏览器有效，其它的浏览器都会将它识别为注释
    IE10及以上的浏览器已经不支持这种方式
 -->

<!-- 以下内容只会出现在IE6中 -->
<!--[if IE 6]>
    <p>为了您和家人的健康，请远离IE6！！</p>
<![endif]-->

<!--[if IE 8]>
    <p>当前浏览器是IE8！！</p>
<![endif]-->

<!--[if lt IE 9]>
    <p>该标签会在IE9以下的浏览器中显示</p>
<![endif]-->

<!--[if gte IE 9]>
    <p>该标签会在IE9及以上的浏览器中显示</p>
<![endif]-->

<!--[if lte IE 9]>
    <p>该标签会在IE9及以下的浏览器中显示</p>
<![endif]-->

<!--[if ! IE 6]>
    <p>你的浏览器不是IE6</p>
<![endif]-->
</body>
</html>

    属性

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性Hack</title>
<style type="text/css">
    body{
        background-color: #bfa;
        /*
        假设在IE6中需要将背景颜色设置为黄色才能达到和其它浏览器相同的效果
        */
        /*
        希望黄色背景只在IE6中生效
            在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
        */
        /*_background-color: yellow;*/
        /*添加了*的样式只有IE7及以下的浏览器认识*/
        /**background-color: yellow;*/
        /*在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别*/
        /*background-color: yellow\0;*/
        /*
        CSS Hack不到万不得已的情况尽量不要使用
        */
    }
</style>
</head>
<body>
</body>
</html>

    选择符

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择符</title>
<style type="text/css">
    /*
    在选择器前添加* html 则该选择器只有IE6可以识别
    */
    * html body{
        background-color: #bfa;
    }
</style>
</head>
<body>
</body>
</html>

    过渡动画

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3过渡动画</title>
<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        background-color: gold;
        /*在哪产生动画、动画的时间、运动曲线、延迟*/
        /*transition: border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/
        transition: all 500ms ease;
    }
    .box:hover{
        width: 500px;
        height: 300px;
        background-color: red;
        border-radius: 50px;
    }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

    圆角、阴影、透明度

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3圆角 阴影 透明度</title>
 <style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        border: 2px solid #000;
        background-color: gold;
        margin: 50px auto 0;
        /*border-top-left-radius: 100px 50px;左上角为椭圆圆角*/
        /*border-top-left-radius: 100px;
        border-top-right-radius: 100px;左、右上角为正圆圆角*/
        /*border-radius: 40px;曲率半径为40的圆角矩形*/
        /*border-radius: 20%;最大200px，20%即40px*/
        border-radius: 50%;/*正圆*/
    }
    .box1{
        width: 200px;
        height: 40px;
        background-color: gold;
        margin: 100px auto 0;
        /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色*/
        box-shadow: 10px 10px 10px 0px #bfa;
    }
    .box2{
        width: 200px;
        height: 40px;
        background-color: gold;
        margin: 100px auto 0;
        /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影*/
        box-shadow: 0px 0px 20px 2px red inset;
    }
    body{
        background-color: cyan;
    }
    .box3{
        width: 200px;
        height: 200px;
        /*background: url(images/location_bg.jpg);*/
        background-color: gold;
        margin: 50px auto 0;
        border: 2px solid #000;
        border-radius: 50%;
        /*透明度30%，文字也透明了*/
        opacity: 0.3;
        filter: alpha(opacity=30);/*兼容IE*/
        text-align: center;
        line-height: 200px;
    }
    .box4{
        width: 200px;
        height: 200px;
        /*背景色变透明，但文字不会透明*/
        background-color: rgba(255,215,0,0.3);
        margin: 50px auto 0;
        /*边框透明*/
        border: 2px solid rgba(0,0,0,0.3);
        border-radius: 50%;
        text-align: center;
        line-height: 200px;
    }
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">床前明月光</div>
<div class="box4">床前明月光</div>
</body>
</html>

    效果：


    image.png

    运动曲线

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动曲线</title>
<style type="text/css">
    div{
        width: 50px;
        height: 50px;
        background-color: gold;
        margin-bottom: 20px;
    }
    div:nth-child(1){
        /*匀速*/
        transition: all 1s linear;
    }
    div:nth-child(2){
        /*开始和结束慢速，中间加速*/
        transition: all 1s ease;
    }
    div:nth-child(3){
        /*开始慢速，结尾突然停止*/
        transition: all 1s ease-in;
    }
    div:nth-child(4){
        /*突然开始，结束时慢速*/
        transition: all 1s ease-out;
    }
    div:nth-child(5){
        /*开始和结束时慢速*/
        transition: all 1s ease-in-out;
    }
    div:nth-child(6){
        /*贝塞尔（贝兹）曲线*/
        /*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/
        /*超出再缩回的弹性效果*/
        transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);
    }
    div:hover{
        width: 1000px;
    }
</style>
</head>
<body>
<div>linear</div>
<div>ease</div>
<div>ease-in</div>
<div>ease-out</div>
<div>ease-in-out</div>
<div>bezier</div>
</body>
</html>

    效果：


    image.png

    图片文字遮罩

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片文字遮罩</title>
<style type="text/css">
    .box{
        width: 200px;
        height: 300px;
        margin: 50px auto 0;
        border: 1px solid #000;
        position: relative;
        /*默认文字不可见*/
        overflow: hidden;
    }
    .box img{
        width: 200px;
        height: 300px;
    }
    .box .pic_info{
        width: 200px;
        height: 200px;
        background-color: rgba(0,0,0,0.5);
        color: #fff;
        /*定位使色块在图片正下方*/
        position: absolute;
        left: 0;
        top: 300px;
        transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);
    }
    .box:hover .pic_info{
        /*色块上移*/
        top:150px;
    }
    /*间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小*/
    .box .pic_info p{
        margin: 20px;
        line-height: 30px;
    }
</style>
</head>
<body>
<div class="box">
    <img src="img/location_bg.jpg" alt="玫瑰花">
    <div class="pic_info">
        <p>图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花</p>
    </div>
</div>
</body>
</html>

    效果：


    image.png

    变形

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变形</title>
<style type="text/css">
    .box,.box2,.box3,.box4{
        width: 200px;
        height: 200px;
        background-color: gold;
        margin: 50px auto 0;
        transition: all 1s ease;
    }
    .box:hover{
        /*box的动画不会影响到box2*/
        /*位移*/
        transform: translate(50px,50px);
    }
    .box2:hover{
        /*沿Z轴旋转360度*/
        transform: rotate(360deg);
    }
    .box3:hover{
        /*缩放*/
        transform: scale(0.5,0.2);
    }
    .box4:hover{
        /*斜切*/
        /*transform: skew(45deg,0);*/
        transform: skew(0,45deg);
    }
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

    效果：


    image.png

    元素旋转

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素旋转</title>
<style type="text/css">
    /*旋转方向判断
    1、X轴向右、Y轴向下、Z轴向屏幕外
    2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/
    .box{
        width: 300px;
        height: 300px;
        background-color: gold;
        margin: 50px auto 0;
        transition: all 500ms ease;
        /*设置盒子按3D空间显示*/
        transform-style: preserve-3d;
        transform: perspective(800px) rotateY(0deg);
    }
    .box:hover{
        /*默认沿Z轴旋转*/
        /*transform: rotate(45deg);*/
        /*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
        /*transform: perspective(800px) rotateX(45deg);*/
        transform: perspective(800px) rotateY(-45deg);
    }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

    效果：


    image.png

    变形中心点

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变形中心点</title>
<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background-color: gold;
        float: left;
        margin: 30px;
        transition: all 500ms ease;
    }
    div:hover{
        transform: rotate(-90deg);
    }
    div:nth-child(1){
        /*设置变形的中心点*/
        transform-origin: left center;
    }
    div:nth-child(2){
        transform-origin: left top;
    }
    div:nth-child(3){
        transform-origin: 50px 50px;
    }
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

    效果：


    image.png

    背面可见

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背面可见</title>
<style type="text/css">
    .con{
        width: 300px;
        height: 300px;
        margin: 50px auto 0;
        border: 1px solid #000;
    }
    .box{
        width: 300px;
        height: 300px;
        background-color: gold;
        text-align: center;
        line-height: 300px;
        font-size: 50px;
        transition: all 500ms ease;
        /*设置盒子按3d空间显示*/
        transform-style: preserve-3d;
        /*设置透视距离、三维旋转的初始角度*/
        transform: perspective(800px) rotateY(0deg);
        /*设置盒子背面是否可见*/
        backface-visibility: hidden;
    }
    .con:hover .box{
        transform: rotateY(180deg);
    }
</style>
</head>
<body>
<div class="con">
    <div class="box">div元素</div>
</div>
</body>
</html>

    效果：


    image.png

    图片背面

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片翻面</title>
<style type="text/css">
    .con{
        width: 300px;
        height: 272px;
        margin: 100px auto 0;
        position: relative;
        /*
        以下两句是为了演示图片和文字层重叠的效果
        transform-style: preserve-3d;
        transform: perspective(800px) rotateY(45deg);初始旋转45度
        */
    }
    .pic, .info{
        width: 300px;
        height: 272px;
        position: absolute;
        left: 0;
        top: 0;
        /*图片和文字背面不可见，文字初始已翻转，所以隐藏露出底层图片*/
        backface-visibility: hidden;
        transform-style: preserve-3d;
        transform: perspective(800px) rotateY(0deg);
        transition: all 500ms ease;
    }
    .info{
        background-color: gold;
        text-align: center;
        line-height: 272px;
        /*transform: translateZ(10px);初始文字浮起10像素方便查看图片与文字分层的效果*/
        /*初始文字翻转，鼠标移入时才翻正显示*/
        transform: translateZ(2px) rotateY(180deg);
    }
    /*鼠标移入时图片翻为背面隐藏*/
    .con:hover .pic{
        transform: perspective(800px) rotateY(180deg);
    }
    /*鼠标移入时文字翻为正面显示*/
    .con:hover .info{
        transform: perspective(800px) rotateY(0deg);
    }
</style>
</head>
<body>
<div class="con">
    <div class="pic">
        <img src="img/location_bg.jpg" alt="玫瑰花">
    </div>
    <div class="info">玫瑰花的文字说明</div>
</div>
</body>
</html>

    图片翻面

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片翻面</title>
<style type="text/css">
    .con{
        width: 300px;
        height: 272px;
        margin: 100px auto 0;
        position: relative;
        /*
        以下两句是为了演示图片和文字层重叠的效果
        transform-style: preserve-3d;
        transform: perspective(800px) rotateY(45deg);初始旋转45度
        */
    }
    .pic, .info{
        width: 300px;
        height: 272px;
        position: absolute;
        left: 0;
        top: 0;
        /*图片和文字背面不可见，文字初始已翻转，所以隐藏露出底层图片*/
        backface-visibility: hidden;
        transform-style: preserve-3d;
        transform: perspective(800px) rotateY(0deg);
        transition: all 500ms ease;
    }
    .info{
        background-color: gold;
        text-align: center;
        line-height: 272px;
        /*transform: translateZ(10px);初始文字浮起10像素方便查看图片与文字分层的效果*/
        /*初始文字翻转，鼠标移入时才翻正显示*/
        transform: translateZ(2px) rotateY(180deg);
    }
    /*鼠标移入时图片翻为背面隐藏*/
    .con:hover .pic{
        transform: perspective(800px) rotateY(180deg);
    }
    /*鼠标移入时文字翻为正面显示*/
    .con:hover .info{
        transform: perspective(800px) rotateY(0deg);
    }
</style>
</head>
<body>
<div class="con">
    <div class="pic">
        <img src="img/location_bg.jpg" alt="玫瑰花">
    </div>
    <div class="info">玫瑰花的文字说明</div>
</div>
</body>
</html>

    效果：


    image.png
    image.png

    animation动画

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation动画</title>
<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        background-color: gold;
        /*动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态
        infinite不限制次数
        alternate动画结束后返回，返回也算次数
        animation-fill-mode 动画前后的状态
            forwards动画完成保持在最后一帧
            backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）
            both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）
        */
        animation: moving 1s ease 1s 5 alternate both;
        /*动画暂停*/
        /*animation-play-state: paused;*/
    }
    .box:hover{
        /*动画运行*/
        /*animation-play-state: running;*/
    }
    /*定义一个动画，名称为moving*/
    @keyframes moving{
        /*初始状态*/
        from{
            width: 200px;
        }
        /*结束状态*/
        to{
            width: 500px;
        }
    }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

    效果：


    image.png

    人走路动画

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人物走路动画</title>
<style type="text/css">
    .box{
        width: 120px;
        height: 182px;
        border: 1px solid #000;
        margin: 50px auto 0;
        overflow: hidden;
        position: relative;
    }
    .box img{
        position: absolute;
        left: 0;
        top: 0;
        /*steps动画步数，图片有8帧，所以设置为8步*/
        animation: walking 1s steps(8) infinite;
    }
    @keyframes walking{
        from{
            left: 0px;
        }
        to{
            left: -960px;
        }
    }
</style>
</head>
<body>
<div class="box">
    <img src="img/walking.png" alt="人物走路">
</div>
</body>
</html>

    效果：


    image.png

    多帧动画

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多帧动画</title>
<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        background-color: gold;
        margin: 50px auto 0;
        animation: moving 1s ease 1s both;
    }
    @keyframes moving{
        0%{
            /*位移动画*/
            transform: translateY(0px);
            background-color: cyan;
        }
        50%{
            transform: translateY(400px);
            background-color: gold;
            border-radius: 0px;
        }
        100%{
            transform: translateY(0px);
            background-color: red;
            border-radius: 50px;
        }
    }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

    效果：


    image.png

    loading动画

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading动画</title>
<style type="text/css">
    .box{
        width: 300px;
        height: 125px;
        border: 1px solid #000;
        margin: 200px auto 0;
    }
    .box p{
        text-align: center;
        width: 100%;
    }
    .box div{
        width: 30px;
        height: 70px;
        float: left;
        background-color: gold;
        margin: 15px;
        border-radius: 10px;
    }
    .box div:nth-child(1){
        background-color: red;
        animation: loading 500ms ease 0s infinite alternate;
    }
    .box div:nth-child(2){
        background-color: green;
        animation: loading 500ms ease 100ms infinite alternate;
    }
    .box div:nth-child(3){
        background-color: pink;
        animation: loading 500ms ease 200ms infinite alternate;
    }
    .box div:nth-child(4){
        background-color: greenyellow;
        animation: loading 500ms ease 300ms infinite alternate;
    }
    .box div:nth-child(5){
        background-color: cyan;
        animation: loading 500ms ease 400ms infinite alternate;
    }
    @keyframes loading{
        from{
            transform: scaleY(1);
        }
        to{
            transform: scaleY(0.5);
        }
    }
</style>
</head>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <p>loading...</p>
</div>
</body>
</html>

    效果：


    image.png

    浏览器前缀

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器前缀</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="box"></div>
</body>
</html>

    相关文章

      网友评论

          本文标题：前端笔记6

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

          延伸阅读

          深度阅读

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

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|前端笔记6|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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