HTML5 特效

最新推荐文章于 2024-02-15 12:31:15 发布
最新推荐文章于 2024-02-15 12:31:15 发布
阅读量149 收藏 1
点赞数 1
文章标签： html5 safari firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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;
            background-image: -webkit-linear-gradient(left, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
            background-image: linear-gradient(left, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
        }

        .ch{
            width: 500px;
            height: 300px;
            background-image: -webkit-radial-gradient(center bottom, transparent 30%, purple,deepskyblue,cyan,greenyellow,gold,orange,tomato,transparent 50%);
        }
    </style>
</head>
<body>
<p>千山鸟飞绝</p>
<div class="yy"></div>
<div class="bg"></div>
<div class="ch"></div>
</body>
</html>

案例2

<!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>case02</title>
    <style>
        /* 定义帧动画 */
        @keyframes bean_roll1 {
            from {transform: rotate(0);}
            to {transform: rotate(45deg);}
        }
        @keyframes bean_roll2 {
            from {transform: rotate(0);}
            to {transform: rotate(-45deg);}
        }
        /* @keyframes bean_roll1 {
            0% {transform: rotate(0);}
            50% {transform: rotate(45deg);}
            100% {transform: rotate(0);}
        }
        @keyframes bean_roll2 {
            0% {transform: rotate(0);}
            50% {transform: rotate(-45deg);}
            100% {transform: rotate(0);}
        } */
        @keyframes dou_move{
            from{left: 200px;}
            to{left: 80px;}
        }
        .bean{
            width: 200px;
            height: 200px;
            background-color: #333;
            position: relative;
        }
        .bean .cdr{
            width: 0;
            height: 0;
            border: 50px solid gold;
            border-right-color: transparent;
            border-radius: 50%;
            position: absolute;
            left: 30px;
            top: 50px;
            
        }
        .cdr:nth-of-type(1){
            /* animation: 动画名称  动画执行时间  [延迟时间  动画曲线  执行次数  是否反向]*/
            animation: bean_roll1 2s linear infinite alternate;
        }
        .cdr:nth-of-type(2){
            /* animation: 动画名称  动画执行时间  [延迟时间  动画曲线  执行次数   是否反向]*/
            animation: bean_roll2 2s linear infinite alternate;
        }
        .eye{
            width: 16px;
            height: 16px;
            background-color: #333;
            position: absolute;
            left: 80px;
            top: 66px;
            border-radius: 50%;

        }
        .dou{
            width: 16px;
            height: 16px;
            background-color: gold;
            position: absolute;
            left: 200px;
            top: 92px;
            border-radius: 50%;
            animation: dou_move 2s infinite;
        }
        
    </style>
</head>
<body>
    <div class="bean">
    <div class="cdr"></div>
    <div class="cdr"></div>
    <div class="eye"></div>
    <div class="dou"></div>
    </div>
</body>
</html>

 

案例3 

<!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>case03</title>
    <style>
        @keyframes roll {
            from{
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            to{
                transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
            }
        }
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .wrap{
            margin: 100px;
            animation: roll 4s linear infinite;
            /* 开启3d */
            transform-style: preserve-3d;
        }
        .wrap div{
            line-height: 200px;
            text-align:center;
            font-size: 100px;
            color: #fff;
        }
        /* 左右 */
        .wrap div:nth-of-type(1){
            transform: rotateY(-90deg) translateZ(100px);
            background-color: hotpink;
        }
        .wrap div:nth-of-type(2){
            transform: rotateY(90deg) translateZ(100px);
            background-color: deepskyblue;
        }
        /* 上下 */
        .wrap div:nth-of-type(3){
            transform: rotateX(90deg) translateZ(100px);
            background-color: gold;
        }
        .wrap div:nth-of-type(4){
            transform: rotateX(-90deg) translateZ(100px);
            background-color: greenyellow;
        }
         /* 前后 */
        .wrap div:nth-of-type(5){
            transform: translateZ(100px);
            background-color: pink;
        }
        .wrap div:nth-of-type(6){
            transform: rotateX(180deg) translateZ(100px);
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
    </div>
</body>
</html>

 案例4

<!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>case09</title>
    <style>
        @keyframes roll {
            from {transform: rotate(0);}
            to {transform: rotate(360deg);}
        }
        .bg{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .clock{
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 4px solid #fff;
            position: absolute;
            left: 50px;
            top: 50px;
            border-radius: 50%;
        }
        .z1, .z2{
            position: absolute;
            width: 8px;
            height: 50px;
            background-color: #fff;
            left: 96px;
            top: 50px;
            transform-origin: center bottom;
        }
        .z2{
            height: 30px;
            top: 70px;
            animation: roll 12s linear infinite;
        }
        .z1{
            animation: roll 2s linear infinite;
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="clock"></div>
        <div class="z1"></div>
        <div class="z2"></div>
    </div>
</body>
</html>

 案例5

<!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>轮播图</title>
    <style>
        /* @keyframes move {
            0% {left: 0;}
            25% {left: -400px;}
            50% {left: -800px;}
            75% {left: -1200px;}
            100%{left: -1600px;}
        }  */
        @keyframes move {
            0% {left: 0;}
            24% {left: 0;}
            26%{left: -400px;}
            49%{left: -400px;}
            51% {left: -800px;}
            74% {left: -800px;}
            76% {left: -1200px;}
            98% {left: -1200px;}
            100%{left: -1600px;}
        } 
        @keyframes dot{
            0% {opacity: 1;}
            24% {opacity: 1;}
            25% {opacity: .7;}
            100% {opacity: .7;}
        }
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }
        .wrap .move{
            width: 2000px;
            height: 300px;
            position: absolute;
            animation: move 8s linear infinite;
        }
        .wrap .move img{
            width: 400px;
            height: 300px;
            float: left;
        }
        .wrap .dots{
            position: absolute;
            width: 160px;
            height: 16px;
            border-radius: 8px;
            background-color: rgba(0, 0, 0, .75);
            bottom: 16px;
            left: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .wrap .dots .dot{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            opacity: .7;
            animation: dot 8s linear infinite;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <div class="move">
           <img src="../img/1.jpg" alt="">
           <img src="../img/2.jpg" alt="">
           <img src="../img/3.jpg" alt="">
           <img src="../img/4.jpg" alt="">
           <img src="../img/1.jpg" alt="">
        </div>
        <div class="dots">
            <div class="dot"></div>
            <div style="animation-delay: 2s;" class="dot"></div>
            <div style="animation-delay: 4s;" class="dot"></div>
            <div style="animation-delay: 6s;" class="dot"></div>
        </div>
    </div>
</body>
</html>

案例6 

<!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>work02</title>
    <style>
        @keyframes roll {
            0% {transform: translateX(0);}
            25% {transform: translateX(128px);}
            50% {transform: translateX(128px) translateY(128px);}
            75% {transform: translateX(0) translateY(128px);}
            100% {transform: translateX(0) translateY(0);}
        }
        @keyframes cub{
            0%{top: 100px;; opacity: 0;}
            50%{top:50px; opacity: .5;}
            100%{top: 0; opacity: 1;}
        }
        .bg{
            width: 400px;
            height: 400px;
            background-color: #666;
            position: relative;
        }
        .cube{
            width: 100px;
            height: 100px;
            background-color: transparent;
            border: 2px solid #fff;
            position: absolute;
            top: 148px;
            left: 148px;
            overflow: hidden;
        }
        .cub{
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: absolute;
            top: 104px;
            opacity: 0;
            animation: cub 4s linear infinite;
        }
        .big{
            box-sizing: border-box;
            width: 124px;
            height: 124px;
            border: 2px solid transparent;
            background-color: transparent;
            position: absolute;
            top: 132px;
            left: 132px;
            transform-style: preserve-3d;
            animation: roll 2s linear infinite;
        }
        .roll{
            width: 8px;
            height: 8px;
            background-color: #fff;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="cube">
            <div class="cub"></div>
        </div>
        <div class="big">
        <div class="roll"></div>
        </div>
    </div>
</body>
</html>

 

章鱼Cc_yoo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5之新增标签，CSS3，js特效
08-27
HTML5发展如火如荼，是近十年来Web标准巨大的飞跃，随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟，未来 HTML5 必将改变创建 Web 应用程序的方式，它将Web带入一个成熟的...
html5 比较 特效,8款HTML5特效推荐
weixin_39725403的博客
06-04 1285
HTML5是构建Web内容的一种语言描述方式。HTML5成功问世之后，我们不得不承认HTML5非常强大，很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果，这在HTML5应用中也是比较消耗本地资源的，尤其是CPU，但是有些HTML5粒子效果确实能给用户带来不一样的惊艳用户体验。本文就来和大家分享8款效果惊艳的HTML5特效，快来收藏一波吧。1、HTML5 Canvas粒子模拟效果这...
分享84个html5特效，总有一款适合您
最新发布
zy0412326的专栏
02-15 1090
知识付费甚欢喜，为咱码农谋福利。jQuery+html5+CSS3手机端右侧弹出3D导航菜单特效。html5+three.js+css科幻地球仪3D旋转动画特效。TweenMax.js+H5 Canvas动态水彩画板涂色特效。mimic.css+h5动画库样式表制作各种酷炫文字动画特效。html5+css3图文内容全屏层叠移动鼠标切换显示代码。h5+css3仿迅雷会员活动页面全屏红包雨动画特效。jQuery+H5响应式手机端触屏滑动图片轮播插件。jQuery+css3+H5输入框焦点事件动画特效。
HTML5特效（shadow、gradient、transition、transform、filter）
hcx的博客
05-29 1266
文章目录阴影（shadow）、渐变（gradient）、过渡（transition）、变形（transform）、滤镜（filter）
16款最佳HTML5超酷动画演示及源码
weixin_34174105的博客
05-29 4123
1、HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效，像HTML5 3D图片折叠特效、HTML5 3D旋转图片相册等应用。今天我们来分享一款既炫酷又实用的HTML5图片选择特效，当图片被选中时，图片上就会覆盖一个半透明的层，上面有一个勾，并且在选中的时候图片出现弹跳的动画效果。 在线演示 源码下载 2、HTML5/CSS3折叠动画登录表单...
html5有哪些小特效,超级惊艳 10款HTML5动画特效推荐
weixin_42378094的博客
06-05 1834
今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效，有一些是基于 CSS3 和 jQuery 的，比较实用，特别是前几个 HTML5 动画，简直酷毙了，现在将它们分享给大家，也许你能用到这些 HTML5 动画和 jQuery 应用。1、HTML5 Canvas 发光 Loading 动画之前我们分享过很多基于 CSS3 的 Loading 动画效果，相信大家都很喜欢。今天我们要来分享一款基...
彩色霓虹灯爱心HTML5特效
07-24
彩色霓虹灯爱心HTML5特效是一款彩色线条发光移动的爱心形状动画特效。
HTML5特效集合，集合了几十种HTML5特效
10-13
HTML5特效集合，集合了几十种HTML5特效。
html5 特效
12-19
包含各种比较酷炫的html5特效合集
HTML5进度条特效
09-28
主要介绍了HTML5进度条特效,需要的朋友可以参考下
黑色html5特效表白模板
04-02
黑色html5特效表白模板
HTML5翻页特效
09-13
HTML5翻页特效
HTML5爱心飘落特效
03-16
html5使用DreamWear编写的爱心飘落特效,其中壁纸是鼠标随手画的随便改
HTML5 Cavnas实现连线题特效
09-03
HTML5 Cavnas实现连线题特效 如果做连线 还是不错的 可以摘取一些代码
10款炫酷的HTML5动画特效，附源码
热门推荐
web前端开发
07-10 4万+
HTML5确实非常强大，很多时候我们可以利用HTML5中的新技术实现非常炫酷效果时，这些效果也非常消耗电脑的CPU，但是这些HTML5效果确实能给用户带来不一样的用户体验...
HTML特效推荐,超级惊艳 10款HTML5动画特效推荐[转]
weixin_36081187的博客
06-05 2875
ylbtech_html5_democss今天咱们要来推荐 10 款超级惊艳的 HTML5 动画特效，有一些是基于 CSS3 和 jQuery 的，比较实用，特别是前几个 HTML5 动画，简直酷毙了，如今将它们分享给你们，也许你能用到这些 HTML5 动画和 jQuery 应用。html一、HTML5 Canvas 发光 Loading 动画html5以前咱们分享过不少基于 CSS3 的 Loa...
HTML5之特效
weixin_30840253的博客
07-31 95
2D转换 在二维的平面上做一些变化，使用transform属性 1. 2D转换之移动（translate） 案例： div{ width: 200px; height: 200px; background-color: #090; position: absolute...
10款炫酷的html5动画特效附源码,10款炫酷的HTML5动画特效，附源码
weixin_32465003的博客
06-04 3040
10款炫酷的HTML5动画特效，附源码HTML5确实非常强大，很多时候我们可以利用HTML5中的新技术实现非常炫酷效果时，这些效果也非常消耗电脑的CPU，但是这些HTML5效果确实能给用户带来不一样的用户体验。今天我要跟大家分享一些HTML5实现的惊艳特效，希望你可以喜欢。1、HTML5 Canvas粒子模拟效果这是一款利用HTML5 Canvas模拟出来的30000个粒子动画，当你用鼠标在can...
html5好玩的特效代码
05-29
以下是几个有趣的 HTML5 特效代码，供您参考： 1. 粒子效果 ```html <!DOCTYPE html> <html> #particles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值