HTML5 特效

最新推荐文章于 2024-02-15 12:31:15 发布

章鱼Cc_yoo

最新推荐文章于 2024-02-15 12:31:15 发布

阅读量156

点赞数 1

文章标签： html5 safari firefox

本文链接：https://blog.csdn.net/Cc200171/article/details/124481255

版权

一、渐变

1、线性渐变

语法：background-image：linear-gradient

方向：上、下、左、右、角度

默认的是top、to bottom、180deg

如果要添加方向，则必须使用浏览器的内核识别标识

-webkit- ： safari & chrome

-moz- ： firefox

-ms- ： IE

-o- ： opera

2、径向渐变

语法：background-image：radial-gradient

形状：circle / ellipse

终点：closest-side / closest-corner / farthest-side / farthest-corner

二、过渡

transition 在不适用动画的情况下变换状态

transition：all 1s 0.1s linear 顺序：属性名时间延迟时间速度曲线

transition-property 设置过渡的属性

transition-duration 定义过渡时间

transition-delay 定义延时执行时间

transition-timing-function 过渡效果的时间曲线

（linear 匀速 ease 慢、快、慢 ease-in 慢、快 ease-out 快、慢 ease-in-out 慢、快、慢）

三、倒影

box-reflect

语法：box-reflect：方向偏移量蒙版或渐变

值：none 默认值 below above left right

四、变形

transform

平移 translate 旋转 rotate 伸缩 scale 拉伸 skew

3d效果 transform-style：preserved-3d

五、动画

关键帧 keyframes

动画

animation-name 动画属性名

animation-duration 动画持续时间

animation-delay 动画延续时间

animation-timing-function 动画速度曲线

animation-iteration-count 定义循环次数（ infinite无限循环）

animation-play-state 动画状态（值：paused running）

animation-fill-mode forwards保留最后一帧动画

六、第三方动画库

eg animation.css

使用第三方动画库可以帮助我们快速实现一些复杂动画

案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gradient</title>
    <style>
        body{
            background-color: #666;
        }
        p{
            width: 400px;
            height: 100px;
            font-size: 60px;
            line-height: 100px;
            text-align: center;
            background-color: gold;
            color: transparent;
            background-image: -webkit-linear-gradient(135deg, transparent 15%, #fff 17%, transparent 19%);
            /* 过渡 */
            transition: 3s;
            /* 背景剪裁 */
            -webkit-background-clip: text;
        }
        p:hover{
            background-position: 400px 0;
        }

        .yy{
            width: 384px;
            height: 216px;
            background-image: url(../img/rjl.jpg);
            background-size: cover;
            mask-image:  linear-gradient(left, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
            -webkit-mask-image: -webkit-linear-gradient(left, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
            transition: 3s;
        }
        .yy:hover{
            background-position: 384px 0;
        }
        .bg{
            width: 384px;
            height: 216px

最低0.47元/天解锁文章

章鱼Cc_yoo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 特效

一、渐变1、线性渐变语法：background-image：linear-gradient方向：上、下、左、右、角度默认的是top、to bottom、180deg如果要添加方向，则必须使用浏览器的内核识别标识 -webkit- ： safari & chrome -moz- ： firefox -ms- ： IE -o- ： opera2、径向渐变语法：background...
复制链接

扫一扫