transition&transform

最新推荐文章于 2021-09-01 13:07:17 发布

涛痕

最新推荐文章于 2021-09-01 13:07:17 发布

阅读量735

点赞数 1

分类专栏： css 涛痕世界文章标签： css3 web前端动画实例

本文链接：https://blog.csdn.net/iamcgt/article/details/71774248

版权

本文详细介绍了CSS3中的transition和transform属性。transition用于实现动态过渡效果，包括属性、持续时间、动画类型和延迟。transform则用于转换元素，如位移、旋转、拉伸和缩放。通过实例展示了如何结合两者创建各种动画效果。

摘要由CSDN通过智能技术生成

transition

属性

定义：动态过渡效果实现

取值：transition:properties duration timing delay

说明：属性持续时间动画类型延迟

注意：定义给需要添加过渡效果的对象上

实例

拉帘

效果

思路

给div设置伪类hover，为div添加两个伪元素，用transition实现动画过渡。

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拉帘</title>
    <style type="text/css">
        div{
            position: relative;
            margin: 100px auto;
            width: 400px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 60px;
            color: #88f;
            text-shadow: 3px -3px 1px #44f;
            box-shadow:-9px 13px 23px grey;
            overflow: hidden;
        }
        div::before,div::after{
            position: absolute;
            content: "";
            width: 220px;
            height: 200px;
            top:

最低0.47元/天解锁文章

涛痕

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
transition&transform

transition属性定义：动态过渡效果实现取值：transition:properties duration timing delay说明：属性持续时间动画类型延迟注意：定义给需要添加过渡效果的对象上实例拉帘效果思路给div设置伪类hover，为div添加两个伪元素，用transition实现动画过渡。源码<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录