精华内容
下载资源
问答
  • css3实现鼠标移入div图片后按钮飞入动画效果 纯css3实现鼠标移入div图片后按钮飞入动画效果
  • 这是一款基于CSS3 transform图片飞入动画特效,仿唱吧首页图片从左右两边飞入动画效果。 文章来自 陌佑网 ym.tenpic.cn 转载请注明出处,谢谢!!!
  • 简单明了div边框css动画简单明了div边框css动画简单明了div边框css动画
  • div CSS3动画带有的按钮_css3样式表属性动画按钮
  • div css3 transform时钟动画_时钟动画下载_网页时钟 div css3 transform时钟动画_时钟动画下载_网页时钟 div css3 transform时钟动画_时钟动画下载_网页时钟
  • CSS3-购物车飞入动画

    千次阅读 2017-06-12 22:36:36
     购物车飞入动画: .con{ width: 1000px; height: 700px; border: 1px solid transparent; position:relative; } .che{
    

    购物车飞入动画:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    
        <style>
            .con{
                width: 1000px;
                height: 700px;
                border: 1px solid transparent;
                position:relative;
            }
    
            .che{
                width: 200px;
                height:200px;
                background-image: url("img/c.jpg");
                background-repeat: no-repeat;
                margin-top: 100px;
                margin-right: 100px;
                position: absolute;
                right: 0px;
                top: 0px;
            }
    
            .cont{
                height: 280px;
                margin-top: 50%;
            }
    
            .wu1{
                width: 200px;
                height: 250px;
                margin: 10px;
                background-image: url("img/10.png");
                background-repeat: no-repeat;
                -webkit-transition: all 1s;
                float: left;
            }
    
            .wu1:active{
                transform: translate(350%,-180%) scale(0.3);
                opacity:0
            }
    
            .wu2{
                width: 200px;
                height: 250px;
                margin: 10px;
                background-image: url("img/12.png");
                background-repeat: no-repeat;
                -webkit-transition: all 1s;
                float: left;
            }
    
            .wu2:active{
                transform: translate(250%,-180%) scale(0.3);
                opacity:0
            }
    
            .wu3{
                width: 200px;
                height: 250px;
                margin: 10px;
                background-image: url("img/13.png");
                background-repeat: no-repeat;
                -webkit-transition: all 1s;
                float: left;
            }
    
            .wu3:active{
                transform: translate(140%,-180%) scale(0.3);
                opacity:0
            }
    
            .wu4{
                width: 200px;
                height: 250px;
                margin: 10px;
                background-image: url("img/13.png");
                background-repeat: no-repeat;
                -webkit-transition: all 1s;
                float: left;
            }
    
            .wu4:active{
                transform: translate(30%,-180%) scale(0.3);
                opacity:0
            }
        </style>
    </head>
    <body>
    <div class="con">
        <div class="che"></div>
    
        <div class="cont">
            <div class="wu1"></div>
            <div class="wu2"></div>
            <div class="wu3"></div>
            <div class="wu4"></div>
        </div>
    </div>
    
    
    </body>
    <html>
    

    运行结果:



    展开全文
  • <div class="gallery-header-center-right-links" id="filter-all">All</div> <div class="gallery-header-center-right-links" id="filter-studio">Studio</div> <div class="gallery-header-center-right-links...
  • 学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果。下面会介绍我在项目中实现抛物运动的简单方法。 知识点:css3动画(抛物线运动)、vue动态绑定事件(控制小球出现)、vue...

    学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果。下面会介绍我在项目中实现抛物运动的简单方法。

    知识点:css3动画(抛物线运动)、vue动态绑定事件(控制小球出现)、vue过渡效果组件(小球进入和消失的过渡效果)、vue过渡效果组件中声明 JavaScript 钩子(控制小球消失)

    效果图如下: 点击“添加购物车”,小球出现飞入到购物车,小球消失
    在这里插入图片描述

    一、用css3动画实现小球抛物线运动

    css3动画(抛物线运动)
    想要用css3动画实现一个抛物线运动并不容易,后来发现了一个在线工具,能够在线生成代码。
    这里介绍一个在线生成运动效果的工具stylie http://jeremyckahn.github.io/stylie/
    在线生成小球运动动画效果后,可以直接把生成的代码复制粘贴到自己项目中。(在线生成的代码有点多)
    在这里插入图片描述
    注意上图标出来的。在线生成的代码中播放次数是无数次的,所以复制到自己项目代码中的时候记得要修改
    animation-iteration-count 属性定义动画的播放次数 infinite 规定动画应该无限次播放

    二、控制小球出现

    vue动态绑定事件(控制小球出现)
    在组件中给【加入购物车】按钮添加一个事件方法,点击,小球出现
    在这里插入图片描述

    三、添加过渡效果

    使用Vue中提供的 transition 组件 ,详情看文档
    把小球div用 transition 组件包起来
    在这里插入图片描述
    css中:
    在这里插入图片描述
    这里要注意,要设置好小球过渡中的透明度

    四、控制小球消失

    可以在transition属性中声明 JS钩子,详情看文档
    在这里插入图片描述
    小球飞入购物车就这么实现啦~

    为了展示效果,使用了gif 截图,顺便分享刚刚使用的一个方便好用的工具 LICEcap
    项目中使用的图标来源于阿里巴巴矢量图标,轮播图的图片来源于百度。

    展开全文
  • jQuery css3鼠标悬停div容器显示光标动画特效 jQuery css3鼠标悬停div容器显示光标动画特效 jQuery css3鼠标悬停div容器显示光标动画特效
  • 主要为大家详细介绍了CSS3+DIV实现漂亮的动画彩色标签,鼠标移动会有动画 ,很神奇的动画效果,感兴趣的小伙伴们可以参考一下
  • css3页面滚动div元素动画特效是一款基于aos.js插件实现的页面滚动元素动画
  • css3页面滚动div元素动画特效是一款基于aos.js插件实现的页面滚动元素动画
  • 利用CSS3实现div页面淡入动画特效

    千次阅读 2017-11-08 15:46:00
    利用CSS3实现页面淡入动画特效 摘要  利用CSS3动画属性“@keyframes ”可实现一些动态特效,具体语法和参数可以网上自行学习。这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效。 在火狐24版、...

    利用CSS3实现页面淡入动画特效

     
    摘要

      利用CSS3动画属性“@keyframes ”可实现一些动态特效,具体语法和参数可以网上自行学习。这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效。 在火狐24版、chrome29版、IE10中测试通过。IE9及以下浏览器不支持此特效。   另外,可针对页面某部分延长显示时间,同理,可对页面不同的部分设定不同的淡入显示时间,实现分段显示。

     

    利用CSS3动画属性“@keyframes ”可实现一些动态特效,具体语法和参数可以网上自行学习。这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版、chrome29版、IE10中测试通过。IE9及以下浏览器不支持此特效。

    淡入代码:

    1. @keyframes fade-in {  
    2.     0% {opacity: 0;}/*初始状态 透明度为0*/  
    3.     40% {opacity: 0;}/*过渡状态 透明度为0*/  
    4.     100% {opacity: 1;}/*结束状态 透明度为1*/  
    5. }  
    6. @-webkit-keyframes fade-in {/*针对webkit内核*/  
    7.     0% {opacity: 0;}  
    8.     40% {opacity: 0;}  
    9.     100% {opacity: 1;}  
    10. }  
    11. #wrapper {    
    12.     animation: fade-in;/*动画名称*/  
    13.     animation-duration: 1.5s;/*动画持续时间*/  
    14.     -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
    15. }  

    直接将上述代码添加到主题style样式文件中,并修改其中 #wrapper 为你的主题ID或类的名称即可。

    另外,可针对页面某部分延长显示时间,比如侧边栏,再加上一句:

    1. #sidebar {    
    2.     animation: fade-in;  
    3.     animation-duration: 4s;  
    4.     -webkit-animation:fade-in 1.5s;  
    5. }  

    同理,可对页面不同的部分设定不同的淡入显示时间,实现分段显示。

    转载于:https://www.cnblogs.com/riji/p/7804412.html

    展开全文
  • 这是一款非常实用的基于aos.js插件实现的css3页面滚动div元素动画特效代码。
  • css文字飞入效果

    千次阅读 2019-09-14 18:18:28
    二、CSS样式(主要是CSS3) body{ overflow: hidden; /*此处需要设置溢出隐藏,否则文字起始位移超过页面大小就会在页面下方出现横的滚动条*/ } .company{ width: 400px; margin: 0 auto; border: 1px #999999 ...

    一、页面的主体布局

    复制代码
    复制代码
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>左右淡入的企业介绍</title> <link type="text/css" rel="stylesheet" href="css/animate.css" /> </head> <body> <div class="company"> <h2 class="company_name">上海世茂集团企业招聘</h2> <h5 class="company_introduce">世茂集团,是以房地产开发为主的国际化企业集群,房地产界领袖企业之一。</h5> </div> </body> </html> 上面就不用说了吧~~~~就四句话布局就完成了~~~我实在太懒了,一个多余的美观性布局我都不愿意写QAQ,最直接的代码是为了方便我以后复制。 二、CSS样式(主要是CSS3) body{ overflow: hidden; /*此处需要设置溢出隐藏,否则文字起始位移超过页面大小就会在页面下方出现横的滚动条*/ } .company{ width: 400px; margin: 0 auto; border: 1px #999999 solid; } /*定义一个名字为lefteaseinAnimate动画,实现从页面的左边淡入页面效果*/ @keyframes lefteaseinAnimate{ 0%{ transform: translateX(-2000px); opacity: 0;} /*在0%时设置文字在想X轴-2000px位移处(左边),透明度为0,也就是看不见文字*/ 100%{ transform: translateX(0px); opacity: 1;} /*在100%时设置文字在想X轴0px位移处,也就是原始布局的位置,透明度为1,也就是文字可以看见了*/ } @-webkit-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;} } @-o-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;} } @-ms-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;} } @-moz-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;} } .company_name{ animation: lefteaseinAnimate 1s ease 1; /*调用已定义好的动画lefteaseinAnimate,全程运行时间1S,进入的速度曲线为ease,只播放一次*/ -webkit-animation: lefteaseinAnimate 1s ease 1; -ms-animation: lefteaseinAnimate 1s ease 1; -o-animation: lefteaseinAnimate 1s ease 1; -moz-animation: lefteaseinAnimate 1s ease 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; } /*定义一个名字为righteaseinAnimate动画,实现从页面的右边淡入页面效果*/ @keyframes righteaseinAnimate{ 0%{ transform: translateX(2000px); opacity: 0;} /*在0%时设置文字在想X轴2000px位移处(右边),透明度为0,也就是看不见文字*/ 100%{ transform: translateX(0px); opacity: 1;} /*在100%时设置文字在想X轴0px位移处,也就是原始布局的位置,透明度为1,也就是文字可以看见了*/ } @-webkit-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;} } @-o-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;} } @-ms-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;} } @-moz-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;} } .company_introduce{ animation: righteaseinAnimate 1s ease 1; /*调用已定义好的动画righteaseinAnimate,全程运行时间1S,进入的速度曲线为ease,只播放一次*/ -webkit-animation: righteaseinAnimate 1s ease 1; -moz-animation: righteaseinAnimate 1s ease 1; -ms-animation: righteaseinAnimate 1s ease 1; -o-animation: righteaseinAnimate 1s ease 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; }
    复制代码

    需要注意的是刚开始就要给body添加一个overflow: hidden; 设置溢出隐藏,否则文字起始位移超过页面大小就会在页面下方出现横的滚动条

    复制代码
    展开全文
  • css3飞入效果

    千次阅读 2018-03-16 10:02:40
    &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...text/css"&gt; .oDiv1{ position: absolute; height:
  • CSS3之ToolTip------飞入动画提示框

    千次阅读 2016-06-03 17:32:54
    (1)首先整个效果由两部分组成,即两个div,底部为容器,蓝色部分为其子元素 (2)通过position:absolute将tooltip定位于灰色区域的顶部 (3)使用transform: translateY()和transition属性实现平移的过渡动画效果 (4...
  • DIV+CSS Loading动画弹出

    2016-10-26 14:24:32
    刚刚毕业开始工作,昨天接触了一个工作,点击弹出DIV遮罩层中的Loading动画并且在5S后自动关闭,经过自己找多方资料终于解决,很简单的小东西,分享大家
  • css3 移移出动画

    千次阅读 2017-06-01 17:27:00
    /*css3 鼠标移移出动画 底部出现阴影层文字叙述*/ *{margin: 0;padding: 0} .div1{width:300px;height: 300px;text-align: center; background: pink;position: relative;float: left;overflow: hidden;}...
  • div css3样式属性透明的环形星星发光动画效果代码
  • div css3 transform和transition属性鼠标滑过动画效果 div css3 transform和transition属性鼠标滑过动画效果
  • DIV+CSS制作有趣的页面滚动让猫奔跑的动画
  • CSS3 实现 div 上下滑滑出效果

    万次阅读 2019-03-05 23:17:01
    CSS3 实现 div 上下滑滑出效果 本篇内容: 1,首先需要用的是 CSS3 的 target 选择器,配合a标签指定id选择器切换目标元素,用于选取当前活动的目标元素。 (当然也可以不用 a 便签,页面加载的时候自动滑动) 2,...
  • css3 div从左到右滑

    千次阅读 2020-08-13 17:11:30
    css3 div从左到右滑 实现div从左到右滑,代码如下: // lToR定义一个动画 @keyframes lToR { from {width: 0px;} } @-moz-keyframes lToR /* Firefox */ { from {width: 0px;} } @-webkit-keyframes ...
  • div平行移动的方法 使 div 元素匀速向下移动: @keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes ...
  • css做的页面加载之后div回弹动画

    千次阅读 2017-10-11 16:33:45
    页面一打开,div会延迟加载个小回弹动画。 以前都是用的js写,这次用了css3,感觉挺好的。 以下是简化版demo div{ transition: all 5s;  -ms-transition: all 1s; /* Safari 和 Chrome */  -webkit-...
  • css3样式动画

    2018-09-10 15:14:57
    常用的div动画库,需要IE10及以上版本、chrome、firefox等支持css3的浏览器
  • CSS3墓穴僵尸动画404错误页,DIV+CSS布局,CSS动画,墓穴里爬出来的僵尸动画

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,315
精华内容 36,526
关键字:

cssdiv飞入动画