css3典型动画集合

最新推荐文章于 2024-04-17 16:35:21 发布
最新推荐文章于 2024-04-17 16:35:21 发布
阅读量780 收藏 1
点赞数 2
分类专栏： css 文章标签： html css css3 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37631990/article/details/78316616
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3典型动画集合</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
    <!--边框划过开始-->
    <div id="first" class="div-css3">
        <div class="top common"></div>
        <div class="right common"></div>
        <div class="bottom common"></div>
        <div class="left common"></div>
        <div class="p-text">first over</div>
    </div>
    <!--边框划过结束-->
    <!--边框划过开始-->
    <div id="second" class="div-css3">
        <div class="second-top"></div>
        <div class="second-right"></div>
        <div class="second-bottom"></div>
        <div class="second-left"></div>
        <div class="p-text">sec hover</div>
    </div>
    <!--边框划过结束-->
    <!--边框划过开始-->
    <div id="third" class="div-css3">
        <div class="third-top"></div>
        <div class="third-right"></div>
        <div class="third-bottom"></div>
        <div class="third-left"></div>
        <div class="p-text">third hover</div>
    </div>
    <!--边框划过结束-->
    <!--遮盖层滑过开始-->
    <div id="fourth" class="div-css3">
        <div class="masker fourth-masker"></div>
        <div class="p-text">fourth hover</div>
    </div>
    <!--遮盖层滑过结束-->
    <!--遮盖层滑过开始-->
    <div id="fifth" class="div-css3">
        <div class="masker fifth-masker"></div>
        <div class="p-text">fifth hover</div>
    </div>
    <!--遮盖层滑过结束-->
    <!--遮盖层滑过开始-->
    <div id="sixth" class="div-css3">
        <div class="masker sixth-masker"></div>
        <div class="p-text">sixth hover</div>
    </div>
    <!--遮盖层滑过结束-->
    <!--遮盖层滑过开始-->
    <div id="seventh" class="div-css3" style="background:yellow;">
        <div class="masker seventh-masker"></div>
        <div class="p-text">seventh hover</div>
    </div>
    <!--遮盖层滑过结束-->
    <!--遮盖层滑过开始-->
    <div id="eighth" class="div-css3" style="background:yellow;">
        <div class="masker eighth-masker"></div>
        <div class="p-text">eighth hover</div>
    </div>
    <!--遮盖层滑过结束-->
    <!--遮盖层滑过开始-->
    <div id="ninth" class="div-css3" >
        <div class="masker ninth-masker"></div>
        <div class="p-text">ninth hover</div>
    </div>
    <!--遮盖层滑过结束-->
</div>
</body>

</html>
style.css
html,body{margin:0px;padding:0px;}
.wrap{
    width: 600px;
    margin:0 auto;
}
.div-css3{
    width:150px;
    height:100px;
    border:1px solid #333;
    background: #333333;
    float: left;
    overflow: hidden;
    position: relative;
    margin: 10px;
}
.p-text{
    position: absolute;
    height: 100px;
    width: 150px;
    text-align: center;
    line-height: 100px;
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    text-transform: uppercase;
    z-index: 3;
    letter-spacing: 1px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/*边框动画1*/
#first .common{
    -webkit-transition: width 0.4s;
    -moz-transition: width 0.4s;
    -ms-transition: width 0.4s;
    -o-transition: width 0.4s;
    transition: width 0.4s;
    background: yellow;
    position: absolute;
}
.top,.bottom{
    height: 1px;
    width:0;
}
.right,.left{
    height:0;
    width: 1px;
}
.top{
    top:0;
    left:0;
}
.right{
    top:0;
    right: 0;
}
.bottom{
    bottom:0;
    right: 0;
}
.left{
    bottom: 0;
    left: 0;
}
#first:hover .top,#first:hover .bottom{
    width: 150px;
}
#first:hover .left,#first:hover .right{
    height: 100px;
}

/*边框动画2*/
.second-top,.second-bottom{
    height: 1px;
    background: yellow;
    width: 140px;
    position: absolute;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.second-top{
    top: 30px;
    left: 5px;
}
.second-bottom{
    bottom: 30px;
    left: 5px;
}
.second-right,.second-left{
    width: 1px;
    height: 70px;
    background: yellow;
    position: absolute;
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.second-left{
    left: 20px;
    top: 15px;
}
.second-right{
    right: 20px;
    top: 15px;
}
#second:hover .second-top,#second:hover .second-bottom{
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}
#second:hover .second-left,#second:hover .second-right{
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
}

/*边框动画3*/
.third-top,.third-bottom{
    height:1px;
    background: yellow;
    width:140px;
    position:absolute;
    transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
}
.third-top{
    top:30px;
    left:5px;
    transform:translateX(-150px);
    -moz-transform:translateX(-150px);
    -ms-transform:translateX(-150px);
    -webkit-transform:translateX(-150px);
}
.third-bottom{
    bottom:30px;left:5px;
    transform:translateX(300px);
    -moz-transform:translateX(300px);
    -ms-transform:translateX(300px);
    -webkit-transform:translateX(300px);
}
.third-left,.third-right{
    width:1px;
    height:70px;
    background: yellow;
    position:absolute;
    transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
}
.third-right{
    right:20px;
    top:15px;
    transform:translateY(-100px);
    -moz-transform:translateY(-100px);
    -ms-transform:translateY(-100px);
    -webkit-transform:translateY(-100px);
}
.third-left{
    left:20px;
    top:15px;
    transform:translateY(200px);
    -moz-transform:translateY(200px);
    -ms-transform:translateY(200px);
    -webkit-transform:translateY(200px);
}

#third:hover .third-top,#third:hover .third-bottom{
    transform:translateX(0px);
}
#third:hover .third-right,#third:hover .third-left{
    transform:translateY(0px);
}

/*遮罩动画4*/
.masker{position:absolute;background: rgba(240,255,3,0.8);transition:all 0.4s ease;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;}
.fourth-masker{
    width:200px;
    height:200px;
    margin-left:-100px;
    margin-top:-100px;
    top:50%;left:50%;
    border-radius:50%;
    box-shadow:0 0 20px #ddd;
    transform:scale(0);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
}
#fourth:hover .masker{
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
}
/*遮罩动画5*/

.fifth-masker{
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    top: 50%;
    left: 50%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
#fifth:hover .masker{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/*遮罩动画6*/
.sixth-masker{
    width: 0;
    height: 200px;
    -webkit-transition: width 0.4s;
    -moz-transition: width 0.4s;
    -ms-transition: width 0.4s;
    -o-transition: width 0.4s;
    transition: width 0.4s;
}
#sixth:hover .masker{
    width: 150px;
}

/*遮罩动画7*/
.seventh-masker{
    top: 0;
    left: 0;
    bottom:0;
    right: 0;
    background: #333333;
    border-radius: 50%;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#seventh:hover .masker{
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.eighth-masker{
    top: 0;
    left: 0;
    bottom:0;
    right: 0;
    background: #333333;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#eighth:hover .masker{
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

/*遮罩动画9*/
.ninth-masker{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: yellow;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#ninth:hover .masker{
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}


Mengshi188
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超赞CSS3特效集合-28个
10-07
超赞CSS3特效集合-28个，辛苦搜集，虽然资源不是原创，但日后必有一定作用，望各位笑纳。
osx-css:CSS 中的 OSX 样式窗口
06-18
这个“osx-css”项目显然是一个专门针对CSS样式的集合，旨在模仿苹果公司Mac OS X操作系统的界面元素和窗口样式。这个项目可以帮助开发者创建具有Mac OS X风格的网页界面，从而为用户带来更熟悉的视觉体验。 首先，...
【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-10 4448
一、动画速度曲线设置 二、代码示例 - 动画速度曲线设置 1、代码示例 - 动画匀速执行 2、代码示例 - 动画分 2 步执行 三、代码示例 - 使用动画步长实现打字机效果
28个炫酷的纯CSS特效动画示例（含源代码）
热门推荐
大剑师兰特的GIS世界
01-15 2万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
利用CSS延迟动画，打造令人惊艳的复杂动画效果！
最新发布
邓占勇的博客
04-17 703
动画在前端开发中是经常遇到的场景之一，加入动画后页面可以极大的提升用户体验。
CSS3动画合集:(帧动画)(补间动画)(呼吸动画(由小到大)(由上到小)) 上
weixin_42839080的博客
08-10 8030
首先我们先了解animation这个属性的语法格式: 语法:animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意. 第一:规定动画 @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100% } 比如下面的例子用来规定一个动...
18个强大的纯CSS3动画案例分享
web前端开发
08-12 1万+
编辑整理 | web前端开发在之前，我也分享过很多关于CSS3,HTML5的动画案例，今天我要与你分享的这18个动画案例，也是比较炫酷的，可以实现很多交互，这些CSS3动...
CSS3单选按钮动画特效.zip
10-10
【CSS3单选按钮动画特效】是一个集合了创新与实用性的设计资源，它利用CSS3的强大功能，为传统的HTML单选按钮增添了丰富的视觉效果和动态交互体验。在网页设计中，单选按钮（radio button）通常用于用户在一组互斥...
JS+CSS特效
07-12
本压缩包"JS+CSS特效"包含了四个子文件，分别是jQuery旋转木马特效、jQuery图片放大镜插件制作、CSS3实现的3D图片切换效果以及3D缩略图悬浮效果，这些都是利用JS和CSS构建的典型网页特效。 首先，jQuery旋转木马...
604js_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-03
CSS3提供了更多的选择器、动画、过渡和阴影效果，使得设计更加丰富和动态。自适应布局通常通过媒体查询（media queries）来实现，根据屏幕尺寸改变样式，确保在手机和平板电脑上也有良好的用户体验。 3. JavaScript...
H1063国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip
08-03
"H1063国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip" 是一个集合了多种关键元素的压缩包，它包含了一套完整的网页设计资源，旨在为开发者提供高效、美观且适应多设备的网页构建...
css3动画集合
04-27
html5 css3 动画 html5 css3 动画 html5 css3 动画 html5 css3 动画
12个经典大气的HTML5/CSS3应用动画
08-23
昨天为大家收集了15个华丽的HTML5动画应用，有几个应用还比较实用。今天我们就接着来分享第二波干货，也是基于HTML5和CSS3的动画应用，将涉及到HTML5表单、HTML5图片特效以及HTML5图表等应用领域，希望大家会喜欢。 1、HTML5/CSS3自定义下拉框 3D卡片折叠动画 之前我们分享过一款CSS3带小图标下拉菜单，它更多的是一款菜单，但是今天要分享的一款CSS3自定义下拉框取代了传统的Select样式，用不一样的风格来让select更加美观。这款CSS3下拉框还有3D立体的卡片折叠动画效果，非常酷。 在线演示        源码下载 2、HTML5/CSS3发光搜索表单 超酷CSS3表单 之前我们分享过一款纯CSS3实现的发光登录表单，发光特效非常不错。今天我们要再来分享一款放光表单，是一款CSS3发光搜索表单，表单整体是黑色的风格，搜索框被激活时，输入框就会发光，由于黑色的背景，整个搜索表单就显得格外绚丽光亮。 在线演示        源码下载 3、jquery视差滑块幻灯特效 非常酷的一款jQuery全屏焦点图插件，图很美。[......] 阅读全文>>
css3动画animation属性大全
低调哥的博客
02-28 1万+
animation属性语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;例：animation: myanimation 2s linear 1s infinite forwards;animation 属性是一个简写属性，用于设置动画属性：animati...
这十个css动画案例惊艳众人
frontlab的博客
09-20 3098
十套精美的css动画，还有css源码呦，复制粘贴就能使用
利用css3实现各种动画
ma125120的博客
04-26 1964
利用css3实现各种动画 ======================= Demo: https://ma125120.github.io/ma-animate/test/（因为Demo中的html仅为示范使用，所以使用了不少的es6语法，如果打开后页面一片空白，切换至主流浏览器即可） 在Demo中 分别设置各个动画的启动与停止，或通过层顶层按钮实现所有动画的启动与停止。 通过输入框动...
javascript匀速动画和缓冲动画
fisher
09-16 1689
关于网页中的动画，在css3中我们已经可以使用一些属性快速的做出来，但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。 使用js做动画最重要的一个函数就是setInterval函数，这里不再赘述，不懂可以直接百度用法。本文主要讲动画的原理已经在制作过程中的要点。 老规矩，先上代码，能直接看懂的可以节省时间。 html部分： move
CSS MASK
weixin_41897680的博客
01-26 8202
CSS MASK的简单学习
css3垂直动画特效
08-20
CSS3垂直动画特效是指使用CSS3技术实现的一种垂直方向上的动画效果。CSS3提供了一系列的动画特性，如transform、transition、animation等，可以让开发者通过设置属性值来实现各种各样的动画效果。 常见的CSS3垂直...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值