每日一点前端-9-H5视觉特效-优快云博客

本文链接：https://blog.youkuaiyun.com/zhonghua_csdn/article/details/89877801

使用h5的一些新特性，可以很简单的制作很多好看而且有意思的效果出来而且代码量也是极少的。

过渡效果.gif

H5的视觉特效

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视觉特效</title>
    <style>
        .transition{
            width:100px;
            height:100px;
            background:red;
            transition:all 2s ease-in;
            -webkit-transition:all 2s ease-in; /* Safari */
        }
        .transition:hover{width: 300px;background:blue;color: white;}
    </style>
</head>
<body>
<div style="width: 500px;margin: 0px auto;padding-bottom: 100px;">
    <h1>border-radius给元素设置圆角</h1>
    <div style="border: 1px solid yellow;border-radius:10px;width: 100px;height: 100px;
    background-color: #00AA88;margin: 0px auto;"></div>
    <h1>RGBA支持</h1>
    <div style="background-image: url(../img/test.jpg);width: 500px; height: 200px;
    background-size:100%; display:flex;">
        <div style="height: 100px;width: 300px;background-color: rgba(0,0,0,0.5);
    line-height: 100px;vertical-align: middle;text-align: center;margin: auto;color: red;">
            RGBA支持
        </div>
        
    </div>
    <h1> box-shadow设置元素的阴影效果</h1>
    <div style="box-shadow: 0px 0px 5px red;">box-shadow设置元素的阴影效果box-shadow: 0px 0px 5px red</div>
    <br/>
    <div style="box-shadow: 2px 2px 5px red;">box-shadow设置元素的阴影效果box-shadow: 2px 2px 5px red</div>
    <br/>
    <div style="box-shadow: 2px -2px 5px red;">box-shadow设置元素的阴影效果box-shadow: 2px -2px 5px red</div>
    <br/>
    <div style="box-shadow: 0px 0px 5px red inset;">box-shadow设置元素的阴影效果box-shadow: 0px 0px 5px red inset</div>
    <br/>
    <div style="box-shadow: 0px 0px 5px red inset,2px 2px 5px blue;">box-shadow设置元素的阴影效果box-shadow: 0px 0px 5px
        red inset,2px 2px 5px blue;</div>
    <h1>旋转</h1>
    <div style="transform: rotate(45deg);background-color: #00FF00;width: 200px;height: 100px;margin-left: 100px;">
        style="transform: rotate(45deg);background-color: #00FF00"</div>
    <h1>渐变</h1>
    <div style="background-image:-webkit-linear-gradient(top,red,blue);
    background-image:-moz-linear-gradient(top,red,blue);background-image:linear-gradient(to bottom,red,blue);
    width: 100px;height: 100px;"></div>
    <h1>过渡</h1>
    <div class="transition">将鼠标放入</div>
</div>

</body>
</html>

公众号.png