CSS3过渡案例

最新推荐文章于 2021-11-15 23:04:33 发布
最新推荐文章于 2021-11-15 23:04:33 发布
阅读量467 收藏 2
点赞数 1
分类专栏： HTML 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/simple5960/article/details/108563743
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
            /* transition-property: left;
            transition-duration: 2s; */
            /* transition-timing-function: linear; */
            /* transition-delay: 0.5s; */ 
            /* 多个效果添加transition */
            transition: left 2s linear 0s, background-color 5s linear 0s;
            /* 为所有样式添加过渡效果 */
            /* transitio：all */
        }
        div:active
        {
            left: 1200px;
            background-color: blue;
        }
       
    </style>
</head>
<body>
    <div></div> 
</body>
</html>

2.过渡手风琴菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .menu{
            width: 200px;
            height: auto;
            margin: 100px auto;
        }
        .item{

            width: 100%;
            height: auto;
            background-color: #7DFFE7;
            color: orange;



        }
        .item>h3{
            height: 40px;
            line-height:40px;
            border-bottom: 2px solid #ccc;
            padding-left: 10px;
        }
        .item>.itembox{
            width: 100%;
            height: 0;
            overflow: hidden;
            /* 注意！！过渡效果只能对具体的值生效，对display的none  block无效 */
            /* display: none; */
            /*无效代码 transition: display 1s ; */
            /* 添加过渡效果 */
            transition: height 1s ;
        }
        .item>.itembox>ul{
            list-style: none;
            background-color: #eaffb6;
            padding: 10px;

        }
        /* 为item添加hover伪类 */
        .item:hover>.itembox{
            /* display: block; */
           height: 110px;
        
        }
         
    </style>
</head>
<body>
  <div class="menu">
    <div class="item">
        <h3> news</h3>
            <div class="itembox">
                <ul>
                    <li>文件查看编辑选择运行</li>
                    <li>文件查看编辑选择运行</li>
                    <li>文件查看编辑选择运行</li>
                    <li>文件查看编辑选择运行</li>
                    
                </ul>
            </div>
       
    </div>
    <div class="item">
     <h3>news</h3>
         <div class="itembox">
             <ul>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 
             </ul>
         </div>
     
 </div>
 <div class="item">
     <h3>news</h3>
         <div class="itembox">
             <ul>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 
             </ul>
         </div>
     
 </div>
 <div class="item">
     <h3>news</h3>
         <div class="itembox">
             <ul>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 
             </ul>
         </div>
     
 </div>

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

3.transform2D转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0cm;
        }
        div{
            width: 100px;
            height: 100px;
            margin: 10px auto;
            background-color: red;
            transition: transform 2s,background-color 2s;
            
        }
        div:first-of-type:active{
            /* 如果只有一个参数X方向，如果两个参数X。Y方向 
            移动参照元素的左上角
            */
            transform:translate(500px,400px);
            background-color:salmon
        }
        
        div:nth-of-type(2):active{
            transform: scale(2);
            background-color:sandybrown;
        }
        div:nth-of-type(3):active{
            /* 围绕Z轴转的 */
            transform: rotate(90deg);
            background-color:seagreen;
            /* 同样的可以设置默认圆心不在中心的 */
            transform-origin: 0 0;
        }
        div:nth-of-type(4):active{
            /* 单个参数XY方向同，双参数XY方向不同 */
            /* 如果角度为正，则往当前轴负方向斜切 */
            transform: skew(-50deg,-30deg);
            background-color:slategray;
        }
    </style>
</head>
<body>
    <div>移动</div>
    <div>缩放</div>
    <div>旋转</div>
    <div>斜切</div>
   
</body>
</html>

4.transform旋转轴心案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0cm;
        }
        .poker{
            width: 100px;
            height: 260px;
            position: relative;
            margin: 340px auto;
        }
        div{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0 ;
            top: 0;
            background-color: springgreen;
            margin-top: 5px;
            /* 添加过渡效果 */
            transition: transform 2s,background-color 2s;
            transform-origin: right top;
        }
        /* 添加鼠标上移效果 */

        .poker:hover>div:nth-of-type(1)
        {
            transform: rotate(60deg);
            background-color: steelblue;
        }
        .poker:hover>div:nth-of-type(2)
        {
            transform: rotate(120deg);
            background-color:teal;
        }
        .poker:hover>div:nth-of-type(3)
        {
            transform: rotate(180deg);
            background-color:violet;
        }
        .poker:hover>div:nth-of-type(4)
        {
            transform: rotate(240deg);
            background-color:yellow;
        }
        .poker:hover>div:nth-of-type(5)
        {
            transform: rotate(300deg);
            background-color:red;
        }
        .poker:hover>div:nth-of-type(6)
        {
            transform: rotate(360deg);
            background-color:saddlebrown;
        }
    </style>
</head>
<body>
   <section class="poker">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
   </section>
</body>
</html>

5.同时添加多个transform属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0cm;
        }
        div{
            width: 100px;
            height: 100px;
            margin: 10px auto;
            background-color: red;
            transition: transform 2s,background-color 2s;
            
        }
        div:first-of-type:active{
            /* 如果只有一个参数X方向，如果两个参数X。Y方向 
            移动参照元素的左上角
            */
            transform:translate(500px,400px);
            background-color:salmon
        }
        
        div:nth-of-type(2):active{
            transform: scale(2);
            background-color:sandybrown;
        }
        div:nth-of-type(3):active{
            /* 围绕Z轴转的 */
            transform: rotate(90deg);
            background-color:seagreen;
            /* 同样的可以设置默认圆心不在中心的 */
            transform-origin: 0 0;
        }
        div:nth-of-type(4):active{
            /* 单个参数XY方向同，双参数XY方向不同 */
            /* 如果角度为正，则往当前轴负方向斜切 */
            transform: skew(-50deg,-30deg);
            background-color:slategray;
        }
        div:nth-of-type(5):active
        {
            /* 注意先旋转会旋转坐标系 */
            transform: rotate(90deg)  translate(60px,70px);
            background-color:slategray;
        }
        div:nth-of-type(6):active
        {
            /* 注意先旋转会旋转坐标系 */
            transform: translate(60px,70px) rotate(90deg);
            background-color:slategray;
        }
    </style>
</head>
<body>
    <div>移动</div>
    <div>缩放</div>
    <div>旋转</div>
    <div>斜切</div>
    <div>旋转加移动</div>
    <div>移动加旋转</div>
   
</body>
</html>

6.利用transform实现任意元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0em;
        }

        .box{
            width: 400px;
            height: 400px;
            border-radius: 200px;
            background-color: #cccccc;
            margin: 200px auto;
            position: relative;
            
        }
        .rect{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
            position: absolute;
            left: 50%; 
            top: 50%;
            /* 下面这个百分比参照的是元素本身  */
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="box">

        <div class="rect">

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

7.3D变换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div
        {
            width: 100px;
            height: 100px;
            background-color:red;
            margin-left: 200px;
            margin-top: 10px;
            transition: transform 2s;
        }
        div:first-of-type:active{
            /* XYZ Z轴是与屏幕垂直的轴，看不出来移动的效果 */
            /* rotate3d(x,y,z,angel)   其中xyz是向量矢量,只要大于一都一样的效果*/
            transform: translate3d(400px,200px,30px) scale3d(2,2,2) rotate3d(3,1,1,60deg);
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>
</html>
Simple_IDE
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS3】渐变、过渡和动画用法
qq_45677671的博客
12-30 3042
css 渐变、过渡、动画属性解析及使用方法和案例
CSS3（前端案例）
weixin_55765992的博客
07-31 152
css3新特性 （文章转载自乐字节） 圆角 使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。 border-top-left-radius:10px; border-top-right-radius:6px; border-bottom-left-radius:8px; border-bottom-right-radius:12px border-radius:10px 6px 8px 12px; border-radius:10px 6px 8px; border-r
css3实例小项目,CSS3实现小案例
weixin_35588980的博客
08-03 366
今天在学习一些css3的属性，其中比较有意思的就是transform和backface-visibility。transform属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。我相信大家对translate和rotate以及scale是比较熟悉的。它们分别实现平移，旋转和缩放功能。但是今天我们用到的是skew属性，它可以实现倾斜转换。backface-visibility属性定义当元素不面向...
CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）
weixin_34258838的博客
08-01 517
1.前言 在自己的专栏上写了十几篇文章了，都是与js有关的。暂时还没有写过关于css3的文章。css3，给我的感觉就是，不难，但是很难玩转自如。今天，就用css3来实现三个特效，希望这三个特殊能让大家受到启发，利用css3做出更好，更炫的动画效果，并且对比这三个特效和JS特效的对比，希望能帮助到是大家学到CSS3的一些知识。今天这三个案例...
CSS3过渡动画实现hover人物弹出炫酷效果案例
qq_38836435的博客
06-18 1937
目标 我们要实现的目标效果如下 过渡如何使用 可以清楚地看出效果图中的效果用到了css3中的过渡transition，先来了解一下transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果 过渡共有四个属性，分别是： transition-property： 规定应用过渡的 CSS 属性的名称 transition-duration： 定义过渡效果花费的时间。默认是 0 transition-timing-function： 规定过渡效果的时间曲线。默认是 “ease” transi
CSS3实战与案例
01-24
《CSS3实战与案例》是一本专注于实际应用和案例解析的CSS3技术指南。通过这本书，读者将深入了解CSS3的最新特性和强大的设计能力。标签“css3 实战 案例 源码”表明内容包括了CSS3的实际操作、实例演示以及源代码...
css3过渡实例.html
09-03
简单的过渡小实例，对属性的展示
CSS3过渡效果飞机案列
05-24
【CSS3过渡效果飞机案例详解】 在Web前端开发中，CSS3引入了许多强大的特性，其中“过渡（Transition）”和“变换（Transform）”是两个关键的元素，它们极大地提升了用户体验，使网页交互更加平滑和生动。在这个...
CSS3、1000+案例.zip
05-12
在这个压缩包中，包含的1000多个CSS3案例涵盖了各种不同的设计模式和效果，可以帮助学习者深入理解和掌握CSS3的各种功能。 1. **css3高度灵活的模拟扑克牌切换图片效果**：这个案例展示了如何利用CSS3的transform...
CSS3平滑过渡案例.pdf
07-10
案例3则引入了`transition-delay`属性，用于指定过渡效果开始之前的延迟时间。在案例3中，延迟时间设置为2秒，这意味着当鼠标悬停在div上时，2秒后才会开始颜色的过渡动画。这个特性可以用于创建更复杂的交互效果，...
20个CSS3动画实战案例开发
06-18
本套课程，大喵将手把手带着大家上手精选20个纯CSS3动画项目精选案例项目实战，让小伙伴们能够轻松上手，企业公司项目开发过程中遇到的页面动画交互效果需求实现，以及一些更加炫酷创意动画想法的实现，成为一名酷酷哒前端开发工程师。 本课程为20套CSS3动画实战课程，所集合构成的一套实战课程。适合热爱前端动画的小伙伴们，课程的主要内容包括： 01.3D文字效果制作、02.雪花飘落效果、03.图文模糊效果、04.文字卡片折叠效果、05.六角形效果、06.?进度条颜色跟随效果、07.?动态视频背景效果、08.?按键文字跳动效果、09.?弹跳小球效果、10. 3D翻折菜单导航效果、11. 3D圆环层叠动画效果、12.?水波浪球起伏效果、13.?遮罩透明滤镜文字效果、14.?阴阳无极八卦阵效果、15.?文字双屏进入进出效果、16.?炫酷光影加载效果、17.?文字背景水波浪效果、18.?炫酷发光倒影按钮、19.?扁平预加载动画效果、20.?烟囱冒烟动画效果
css3案例分析,CSS3动画/动画库以及案例分析（上）
weixin_30127493的博客
08-03 238
在这html5遍天下的年代，越来越多的网页也用到了css3的动画效果，这让原本我们静态的页面有了更多的活力。最近也一直在做这方面的页面，有些小小的心得，和诸位分享下。CSS3的动画绝对是很赞的，不仅支持PC还支持移动端，但也有限制，比如说浏览器的限制，虽然有这方面的限制，用它的人还是很多的。 CSS3 过渡(transform)通过 CSS3，我们可以在不使用 Flash 动画或 Javas cr...
过渡效果实战
weixin_54527223的博客
08-26 88
<!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&gt...
18个强大的纯CSS3动画案例分享
热门推荐
web前端开发
08-12 1万+
编辑整理 | web前端开发在之前，我也分享过很多关于CSS3,HTML5的动画案例，今天我要与你分享的这18个动画案例，也是比较炫酷的，可以实现很多交互，这些CSS3动...
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1362
Document
CSS3中transition过渡属性的简单应用实例
刘鹏博的博客
12-07 3812
我们在很多网站上看到一些当鼠标悬浮时，商品图片有一种放大的效果、盒子有上升、下降效果或者文字会偏移等等。这些其实都是增加用户体验的方式，那么，今天就以transition过渡属性来写一个比较通用且简单易懂的过渡效果。 先看效果图：         其实，我们给图片、文字或者盒子设置鼠标悬浮hover属性，就会有一些悬浮效果。但是，那样不用过渡属性的话，用户体验很是不好，响应过于生硬，剧
CSS3的过渡属性简单实例
viser123的博客
11-28 3588
在一周的实际上班过程中觉得用到js的地方不算很多，C3倒是很多，这里先简单的巩固下自己的C3的新特性之渐变。 #d1{ width:200px; height:200px; border:1px solid purple; } } 这是一个简单的紫边正方形，我再写下面的代码 #d1:hover{ background:purple; } 它的效果就是我鼠标移入就会突变成紫
css怎么实现过渡效果,CSS3 transition实现过渡效果示例
weixin_26720271的博客
08-03 1932
transition是css3的一个属性了我们可以利用它来做过渡效果了，今天我们就一起来看一篇关于CSS3 transition实现过渡效果示例，希望文章能够帮助到各位朋友。浏览器支持：Internet Explorer 10 及以上版本、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。Internet Explorer ...
多种过渡变形动画（定位）组合案例
DcTbnk的博客
03-08 595
1. 2.
css transitation 过渡案例
最新发布
09-07
以下是一个使用CSS transition实现的简单过渡案例： HTML部分： ```html 我是一个盒子 ()">改变颜色 ``` CSS部分： ```css .box { width: 200px; height: 200px; background-color: blue; transition: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值