CSS3使用过度动画和缓动效果案例讲解

2024-07-28 18:44:37

transition过渡：

四个小属性

属性	意义
transition-property	哪些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线（缓动效果）
transition-delay	延迟时间

transition过度属性是CSS3浓墨重彩的特性，过度可以为一个元素在不同样式之间变化自动添加“补间动画”

兼容性IE10开始兼容，移动端兼容良好
曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用CSS3过度
优点：动画更细腻，内存开销小
transition属性有4个要素：
transition：width 1s linear 0s;（什么属性要过度、动画时长、变化速度曲线、延迟时间）

<!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>
        .box {
            width: 200px;
            height: 200px;
            background-color: black;
            transition: width 5s linear 0s;
        }
        .box:hover {
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

就是需要过渡的的加属性值transition，第一个值为变化的属性

哪些属性可以参与过渡

所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius
背景颜色和文字颜色都可以被过渡
所有变形（包括2D和3D）都可以被过渡

all：

所有的属性都要参与过渡，可以写all
transition：all 5s linear 0s;

<!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>
        .box {
            width: 200px;
            height: 200px;
            background-color: black;
            transition: width 5s linear 0s;
        }
        .box:hover {
            width: 500px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: blue;
            transition: all 5s linear 0s;
        }
        .box1:hover {
            width: 400px;
            height: 200px;
            background-color: greenyellow;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>

过渡的缓动效果：

缓动参数

transition的第三个参数就是缓动参数，也就是变化速度曲线
transition：width 1s linear 0s;

常用的缓动参数

子属性

transition-timing-function：ease；

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            border:1px solid black;
        }
        .box1 p{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: relative;
            left: 0;
            margin-bottom: 10px;
            transition: left 5s linear 0s;
        }
        .box1 p:nth-child(2) {
            transition-timing-function: ease;
        }
        .box1 p:nth-child(3) {
            transition-timing-function: ease-in;
        }
        .box1 p:nth-child(4) {
            transition-timing-function: ease-out;
        }
        .box1 p:nth-child(5) {
            transition-timing-function: ease-in-out;
        }
        .box1:hover p {
            left: 100px;

        }
    </style>
</head>
<body>
    <div class="box1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

贝塞尔曲线：

网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数

到此这篇关于CSS3使用过度动画和缓动效果案例讲解的文章就介绍到这了,更多相关CSS3使用过度动画和缓动效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解CSS故障艺术

概述本文的主题是 Glitch Art,故障艺术. 什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式.它有一种魔幻的感觉,看起来具有闪烁.震动的效果,很吸引人眼球. 故障艺术它模拟了画面信号出现故障导致成像错误的感觉.青色色块与红色色块无法重合就是这种故障的体现.从胶片时代开始到今天的数码时代,这种故障一直是观众非常熟悉的现象.即使抖音的 LOGO 只是静态的,大脑也会自己补完整个效果,甚至还会自己脑补信号干扰的噪音. 使用混合模式实现抖音 LOGO 首先从静态的开始,
Vue3 style CSS 变量注入的实现

目录摘要基础示例动机设计细节编译细节采用策略实践提示绑定恰当的属性注意 style 的更新参考资料摘要在单文件组件样式中支持使用组件状态驱动的 CSS 变量( CSS 自定义属性). 基础示例 <template> <div class="text">hello</div> </template> <script> export default { data() { return { color: '
JS、CSS和HTML实现注册页面

一个用HTML和CSS实现的注册页面模板,废话不多说了,上代码! 更新:使用JavaScript实现用户名和密码表单校验功能. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; bo
js与css的阻塞问题详析

目录 DOMContentLoaded和load js 阻塞了什么 css 阻塞了什么优化总结 DOMContentLoaded和load 我们先了解两个事件,有助于后面的分析. load事件:load 应该仅用于检测一个完全加载的页面当一个资源及其依赖资源已完成加载时,将触发load事件.也就是说,页面的html.css.js.图片等资源都已经加载完之后才会触发 load 事件. DOMContentLoaded事件:当初始的 HTML 文档被完全加载和解析完成之后,DOMContent
React引入antd-mobile+postcss搭建移动端

安装antd-mobile 全局引入 npm install antd-mobile --save 在App.js引入css import 'antd-mobile/dist/antd-mobile.css'; 在jsx使用antd组件 import React from 'react'; import { Button } from 'antd-mobile'; const index = () => { return ( <div> <Button type="pri
浅谈CSS不规则边框的生成方案

需求背景,给不规则图形添加边框在我们日常开发中,时长会遇到一些非矩形.非圆形的图案.类似下面这些: 使用纯 CSS,搭配一些技巧,是可以制作出上面的图形的,当然这只是需求的第一步. 紧接着,可能会有要给上述图形添加边框的诉求,这个时候,CSS 就很难办到了. 尝试使用 drop-shadow 添加边框第一种方法,我们可以尝试使用 drop-shadow,给不规则的图形,添加一个外阴影. 我们以一个箭头图形为例使用 CSS 简单实现它的其中一种方式如下: <div class="arro
vue3实现CSS无限无缝滚动效果

本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下 template 双层div嵌套,进行隐藏滚动显示 <div class="list-container"> <div class="marquee" id="carList"> <template v-for="(item, index) in dataMap.list" :key="index
带你了解CSS基础知识,样式

目录什么是CSS 在HTML页面中嵌套使用CSS的两种方式三种方式代码展示链入外部样式表文件以下是常用的样式总结什么是CSS CSS(Cascading Style Sheet):层叠样式表语言. CSS的作用是: 修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看. 在HTML页面中嵌套使用CSS的两种方式第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式.语法格式: <标签 style="样式名:样式值;样式名
CSS3使用过度动画和缓动效果案例讲解

transition过渡: 四个小属性属性意义 transition-property 哪些属性要过渡 transition-duration 动画时间 transition-timing-function 动画变化曲线(缓动效果) transition-delay 延迟时间 transition过度属性是CSS3浓墨重彩的特性,过度可以为一个元素在不同样式之间变化自动添加"补间动画" 兼容性IE10开始兼容,移动端兼容良好曾几何时,网页上的动画特效基本都是由JavaScript
Vue3.0 自己实现放大镜效果案例讲解

需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏. css中的cursor https://www.runoob.com/cssref/pr-class-cursor.html 鼠标跟随效果如何实现: (子绝父相)绝对定位 + 修改top,left控制移动在@vueuse中,有一个工具方法:useMouseInElement <template> <div ref="target"> <h1>H
Nuxt的路由动画效果案例

路由的动画效果,也叫作页面的更换效果.Nuxt.js提动两种方法为路由提动动画效果,一种是全局的,一种是针对单独页面制作. 全局路由动画全局动画默认使用page进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果.我们可以先在根目录的assets/css下建立一个main.css文件. /assets/css/main.css .page-enter-active,.page-leave-active{ transition: opacity 2s; } .page-ente
Vue 过渡（动画）transition组件案例详解

Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果

Animated Opening Type(教程) 漂亮的文字翻开效果,很有意思. 查看演示 Direction-Aware Hover Effect With Css3 And Jquery(教程) 鼠标跟随悬停效果教程,话说以前看到这个很流行呢. 查看演示 Css3 Hover Effects With Websymbols Tutorial(教程) 查看演示 Magnifying Glass For Image Zoom Using Jquery And CSS3 通过Jquery 和 C
BootStrap的JS插件之轮播效果案例详解

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <ol class
JS+CSS3制作炫酷的弹窗效果

昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让
CSS3+JavaScript实现翻页幻灯片效果

先上效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position
javascript 45种缓动效果非常酷

参数类型说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 duration number 可选,缓动效果持续时间,默认是500ms.建议取300~1000ms. field string 必需,要发生变化的样式属性.请在top,left,bottom,right,width与height中选择. ftp number 可选,每秒进行多少帧动画,默认50帧,保证流畅播放.一些参考资料,日本动画1秒36帧,中
JavaScript Tween算法及缓动效果第1/2页

我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果. Tween Tween类型: Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce ease类型: easeIn easeOut easeInOut /* 算法来源:http://www.robertpenner.com/easing/ */ var Tw