css3文字模糊代码（详解）

来源：互联网发布：html5网站源码编辑：程序博客网时间：2024/06/05 16:46

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>文字模糊效果</title>    <style>    .con {        width: 510px;        margin: 0 auto;        list-style-type: none;        margin-top: 20px;    }    .con li {        width: 150px;        height: 150px;        background: #fff;        margin: 10px;        float: left;        box-shadow: 2px 2px 2px #999;        -webkit-transition: 0.5s all ease;    }    .con .fuzzy {        -webkit-transform: scale(0.9);        box-shadow: 0 0 10px 4px white;        text-shadow: 0 0 10px black;        opacity: 0.8;        color: rgba(0, 0, 0, 0);    }    .con .amplification {        -webkit-transform: scale(1.1);    }   /*　其中：-webkit-transition:0.5s all ease;是会在0.5秒的时间执行li的所有指定的动画，text-shadow:0 0 10px black;这个是对文字设置黑色的阴影*/   /*opacity:0.8;这个是整体的透明度color:rgba(0,0,0,0);这个是设置文字的颜色为黑色，然后是指其透明度为全部透明*/    </style></head><body>    <ul class="con">        <li class="fuzzy">            <h2>我是box1</h2></li>        <li>            <h2>我是box2</h2></li>        <li>            <h2>我是box3</h2></li>    </ul></body></html>

效果如下图：

阅读全文

0 0