返回
软件
分类

那5个开关鼠标经过的时候有超炫的动漫片效果,Portals纯CSS3 完结的时光隧道效果

日期: 2019-11-22 03:21 浏览次数 : 149

5个基于css3超炫的鼠标滑动按钮动画,css3超炫滑动按钮

今天给大家分享5个基于css3超炫的鼠标滑动按钮动画。这5个按钮鼠标经过的时候有超炫的动画效果。这5个按钮适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下:

必赢备用网址 1

在线预览   源码下载

实现的代码。

html代码:

<div id="wrap">
        <a href="#" class="btn-slide"><i class="fa fa-rocket"></i>
            火箭 带你飞 </a><a href="#"
                class="btn-slide2"><i class="fa fa-download"></i>下载 点击下载 </a>
    </div>
    <link rel="stylesheet" type="text/css" href="css/btn2.css">
    <div class="container1">
        <div class="con_down1">
            <i class="fa fa-download fa-2x"></i>
            <h4>
                Download Now</h4>
        </div>
        <div class="con_sizes1">
            <div class="sizes1">
                <h5 class="size1">
                    34.5 MB</h5>
                <div class="sizes_abs1">
                </div>
            </div>
        </div>
    </div>
    <div class="container2">
        <div class="con_down2">
            <i class="fa fa-download fa-2x"></i>
            <h4>
                Download now</h4>
        </div>
        <div class="con_sizes2">
            <div class="sizes2">
                <h5 class="size2">
                    34.5 MB</h5>
                <div class="sizes_abs2">
                </div>
            </div>
        </div>
    </div>
    <div>
        <br />
        <br />
    </div>
    <link rel="stylesheet" type="text/css" href="css/btn3.css">
    <div class="center">
        <a class="spinningeffect" href="#" target="_blank">
            <img src="img/blogger-logo1.jpg" />
        </a>
    </div>
    <div>
        <br />
    </div>
    <link rel="stylesheet" type="text/css" href="css/focus.css">
    <div class="center">
        <a class="zoomeffect" href="#" target="_blank">
            <img src="img/addfocus.jpg" /></a>
    </div>
    <div>
        <br />
    </div>
    <link rel="stylesheet" type="text/css" href="css/btn4.css">
    <div class="mudwnpbutton center">
        <a href="#" target="blank" rel="nofollow">预览</a>
    </div>
    <link rel="stylesheet" type="text/css" href="css/btn5.css">
    <div class="whitebuttondemo">
        <a href="#">button</a> message
    </div>
    <div>
        <br />
        <br />
    </div>
    <div class="whitebutton">
        <a href="#">button</a> top message 1.6MB
            .rar 
    </div>
    <div>
    </div>

via:

今天给大家分享5个基于css3超炫的鼠标滑动按钮动画。这5个按钮鼠标经过的时候有超...

必赢备用网址 ,分享10款web前端基于css3和jquery的源码预览,css3jquery

1.基于jquery和css3实现的摩天轮式分享按钮

之前分享了很多css3实现的按钮。今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮。这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮挂在摩天轮上。

必赢备用网址 2

在线演示

源码下载

2.纯css3实现的动画加载导航

之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航。该导航出现的时候以动画的形式出现。

必赢备用网址 3

在线演示

源码下载

3.纯css3实现的鼠标经过图片显示描述特效

今天要给大家带来一款纯css3实现的鼠标经过图片显示描述特效。在此特效中有两种切换特效,效果还是相当不错。

必赢备用网址 4

在线演示

源码下载

4.基于jquery带百分比的响应式进度加载条

今天要给大家带来一款基于jquery带百分比的响应式进度加载条。这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色。而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美支持。

必赢备用网址 5

在线演示

源码下载

5.基于javascript的3D玻璃破碎特效

之前为大家介绍了一款 html5 canvas实现图片玻璃碎片特效。今天要给大家带来一款基于javascript的3D玻璃破碎特效。

必赢备用网址 6

在线演示

源码下载

6.纯css3实现的3D按钮

纯css3实现的3D按钮

必赢备用网址 7

在线演示

源码下载

7.基于jquery滑动后固定于顶部的导航

之前已为大家介绍了好多css3实现的导航菜单。今天分享一款基于jquery滑动后固定于顶部的导航。这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部。

必赢备用网址 8

在线演示

源码下载

8.纯css3实现的超炫动画背画特效

之前为大家介绍了很多款由纯css3实现的特效。今天要再给大家带来一款纯css3实现的超炫动画背画特效。代码非常简单,没有引用任何其它js代码。css代码也不多。效果非常炫。

必赢备用网址 9

在线演示

源码下载

9.javascript实现的超炫的下拉选择框

今天为给大家带来一款javascript实现的超炫的下拉选择框。下拉的列表由半用透明的幽灵按钮组成。显示下拉的时候,列表项由左右两侧飞入。消息时飞向左右两侧。

必赢备用网址 10

在线演示

源码下载

10.由css3和jquery实现的响应式设计导航

2014年响应式设计成为设计主流。今天要给大家带来一款由css3和jquery实现的响应式设计导航。当显示器为pc时,导航为横条。当客户端为移动端时,呈现坚形导航。

必赢备用网址 11

在线演示

源码下载

一款纯css3实现的超炫动画背画特效,css3超炫

之前为大家介绍了很多款由纯css3实现的特效。今天要再给大家带来一款纯css3实现的超炫动画背画特效。代码非常简单,没有引用任何其它js代码。css代码也不多。效果非常炫。一起看下效果图:

必赢备用网址 12

在线预览   源码下载

实现的代码。

html代码:

 <div class='fake-gif'>









    </div>

css3代码:

        body{
    background: #000;
    -webkit-perspective:35px;
   -moz-perspective:35px;
    -ms-perspective:35px;
     -o-perspective:35px;
        perspective:35px;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    -moz-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    -ms-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    -o-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    }


    .fake-gif {
  position: relative;
  margin: 10rem auto 0 auto;
  width: 20rem;
  height: 20rem;


}
.fake-gif .stripe {
  position: absolute;
  border-radius: 50%;
  -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
.fake-gif .stripe:nth-child(odd) {
  left: 0;
  width: 100%;
  height: 5%;
background-color: rgba(109, 60, 209, 0.5);
box-shadow: 0px 6px 40px #5800FF, inset 0px 2px 5px #DF00FF;

}
.fake-gif .stripe:nth-child(even) {
  top: 0;
  width: 5%;
  height: 100%;
 background-color: rgba(0, 240, 40, 0.5);
box-shadow: 0px 6px 40px #007D35, inset 0px 2px 5px #7CFFB5;
}
.fake-gif .stripe:nth-child(4n+1) {
  z-index: 3;
}
.fake-gif .stripe:nth-child(4n+2) {
  z-index: 4;
}
.fake-gif .stripe:nth-child(4n+3) {
  z-index: 1;
}
.fake-gif .stripe:nth-child(4n) {
  z-index: 2;
}
.fake-gif .stripe:nth-child(2) {
  left: 4.7%;
  -webkit-animation: move-y 2.7s 0.2s infinite;
  animation: move-y 2.7s 0.2s infinite;
}
.fake-gif .stripe:nth-child(4) {
  left: 11.9%;
  -webkit-animation: move-y 2.7s 0.4s infinite;
  animation: move-y 2.7s 0.4s infinite;
}
.fake-gif .stripe:nth-child(6) {
  left: 19.1%;
  -webkit-animation: move-y 2.7s 0.6s infinite;
  animation: move-y 2.7s 0.6s infinite;
}
.fake-gif .stripe:nth-child(8) {
  left: 26.3%;
  -webkit-animation: move-y 2.7s 0.8s infinite;
  animation: move-y 2.7s 0.8s infinite;
}
.fake-gif .stripe:nth-child(10) {
  left: 33.5%;
  -webkit-animation: move-y 2.7s 1s infinite;
  animation: move-y 2.7s 1s infinite;
}
.fake-gif .stripe:nth-child(12) {
  left: 40.7%;
  -webkit-animation: move-y 2.7s 1.2s infinite;
  animation: move-y 2.7s 1.2s infinite;
}
.fake-gif .stripe:nth-child(14) {
  left: 47.9%;
  -webkit-animation: move-y 2.7s 1.4s infinite;
  animation: move-y 2.7s 1.4s infinite;
}
.fake-gif .stripe:nth-child(16) {
  left: 55.1%;
  -webkit-animation: move-y 2.7s 1.6s infinite;
  animation: move-y 2.7s 1.6s infinite;
}
.fake-gif .stripe:nth-child(18) {
  left: 62.3%;
  -webkit-animation: move-y 2.7s 1.8s infinite;
  animation: move-y 2.7s 1.8s infinite;
}
.fake-gif .stripe:nth-child(20) {
  left: 69.5%;
  -webkit-animation: move-y 2.7s 2s infinite;
  animation: move-y 2.7s 2s infinite;
}
.fake-gif .stripe:nth-child(22) {
  left: 76.7%;
  -webkit-animation: move-y 2.7s 2.2s infinite;
  animation: move-y 2.7s 2.2s infinite;
}
.fake-gif .stripe:nth-child(24) {
  left: 83.9%;
  -webkit-animation: move-y 2.7s 2.4s infinite;
  animation: move-y 2.7s 2.4s infinite;
}
.fake-gif .stripe:nth-child(26) {
  left: 91.1%;
  -webkit-animation: move-y 2.7s 2.6s infinite;
  animation: move-y 2.7s 2.6s infinite;
}
.fake-gif .stripe:nth-child(1) {
  top: 3.6%;
  -webkit-animation: move-x 2.7s 0.1s infinite;
  animation: move-x 2.7s 0.1s infinite;
}
.fake-gif .stripe:nth-child(3) {
  top: 10.8%;
  -webkit-animation: move-x 2.7s 0.3s infinite;
  animation: move-x 2.7s 0.3s infinite;
}
.fake-gif .stripe:nth-child(5) {
  top: 18%;
  -webkit-animation: move-x 2.7s 0.5s infinite;
  animation: move-x 2.7s 0.5s infinite;
}
.fake-gif .stripe:nth-child(7) {
  top: 25.2%;
  -webkit-animation: move-x 2.7s 0.7s infinite;
  animation: move-x 2.7s 0.7s infinite;
}
.fake-gif .stripe:nth-child(9) {
  top: 32.4%;
  -webkit-animation: move-x 2.7s 0.9s infinite;
  animation: move-x 2.7s 0.9s infinite;
}
.fake-gif .stripe:nth-child(11) {
  top: 39.6%;
  -webkit-animation: move-x 2.7s 1.1s infinite;
  animation: move-x 2.7s 1.1s infinite;
}
.fake-gif .stripe:nth-child(13) {
  top: 46.8%;
  -webkit-animation: move-x 2.7s 1.3s infinite;
  animation: move-x 2.7s 1.3s infinite;
}
.fake-gif .stripe:nth-child(15) {
  top: 54%;
  -webkit-animation: move-x 2.7s 1.5s infinite;
  animation: move-x 2.7s 1.5s infinite;
}
.fake-gif .stripe:nth-child(17) {
  top: 61.2%;
  -webkit-animation: move-x 2.7s 1.7s infinite;
  animation: move-x 2.7s 1.7s infinite;
}
.fake-gif .stripe:nth-child(19) {
  top: 68.4%;
  -webkit-animation: move-x 2.7s 1.9s infinite;
  animation: move-x 2.7s 1.9s infinite;
}
.fake-gif .stripe:nth-child(21) {
  top: 75.6%;
  -webkit-animation: move-x 2.7s 2.1s infinite;
  animation: move-x 2.7s 2.1s infinite;
}
.fake-gif .stripe:nth-child(23) {
  top: 82.8%;
  -webkit-animation: move-x 2.7s 2.3s infinite;
  animation: move-x 2.7s 2.3s infinite;
}
.fake-gif .stripe:nth-child(25) {
  top: 90%;
  -webkit-animation: move-x 2.7s 2.5s infinite;
  animation: move-x 2.7s 2.5s infinite;
}

@-webkit-keyframes move-y {
  0%, 100% {
    -webkit-transform: translateZ(-25px);
    transform: translateZ(-25px);
  }

  50% {
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px);
  }
}

@-webkit-keyframes move {
  0%, 100% {
    -webkit-transform: rotateX(-25deg) rotateY(-25deg);
    transform: rotateX(-25deg) rotateY(-25deg);
  }

  50% {
    -webkit-transform: rotateX(25px) rotateY(25deg);
    transform: rotateX(25px) rotateY(25deg);
  }
}

@keyframes move-y {
  0%, 100% {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
  }

  50% {
    -webkit-transform: translateY(25%);
    transform: translateY(25%);
  }
}
@-webkit-keyframes move-x {
  0%, 100% {
    -webkit-transform: translateZ(-25px);
    transform: translateZ(-25px);
  }

  50% {
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px);
  }
}
@keyframes move-x {
  0%, 100% {
    -webkit-transform: translateX(-25%);
    transform: translateX(-25%);
  }

  50% {
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
  }
}

注:本文爱编程原创文章,转载请注明原文地址:

web前端 熟练 div+css jquery js css3+html5 后台 熟练java

应该值个3 4 千吧 我上次在招聘会看了一下, 前端不值钱啊,我也是前端的  

让人惊叹的超炫网页演示:这真是CSS3写的

以前很多需要编写复杂的 JavaScript 代码才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。今天这篇文章就向大家分享14个让人惊叹的 CSS3 特性应用演示,让大家感受一下 CSS3 的魅力。Monster使用CSS3 绘制的奇怪生物,移动你的鼠标看看会有什么效果?小心被吃了啊!Tilt ShiftCSS3 实现的文本立体效果和旋转效果,点击文字进入编辑状态,可以输入文字。Leica这是一张相机图片?No!这是纯 CSS3 绘制的莱卡相机,未使用任何图片。Responsive Illustration使用CSS3 Media Query 特性实现的响应式设计(Responsive Design)的示例。Portals纯CSS3 实现的时光隧道效果,让人不敢相信使用 CSS 代码就能写出这样的效果。Bowie惟妙惟肖的眨眼效果,非常的生动!Focus内容焦点效果,鼠标悬浮的地方内容自动聚焦。Rain这个演示模拟的是雨滴下落的效果,鼠标悬浮后移开,字符就会下落。Carve Me文本内阴影效果,可以模拟出雕刻的效果,使用 CSS3 text-shadow 特性实现。Bokeh使用CSS3 渐变特新实现的类似摄影中的散景(Bokeh)效果。Flashlight使用CSS3 特性模拟的非常特别的光照效果。Icons会动的图标,鼠标悬浮即可看到效果。Solar System使用CSS3 特性模拟的太阳系(Solar System)。  

问深圳市内哪儿有WEB前端开发工程师培训的?主要课程是HTML5+CSS3,JQUERY

我也在深圳,貌似目前很少有这种专门针对Web前端开发的培训,毕竟HTML5规范还在完善中,开课报名的人也不会太多,大部分前端开发者还是以自学或相互讨论为主。
不过HTML5在移动终端上的应用已经比较火热了,我现在做的项目也正在使用HTML5跨终端平台开发。如果你要学的话,以后几年之内也主要是运用于移动终端上的应用或游戏开发。
有兴趣讨论可以联系。  

1.基于jquery和css3实现的摩天轮式分享按钮 之前分享了很多css3实现的按钮。今天要给大家...

一个国外超炫的jquery图片切换效果

Direction-Aware Hover Effect with CSS3 and jQuery
How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.

是不是这个例子呢?不知道是否你需要的效果,供参考
参考资料:tympanus.net/...query/  

之前为大家介绍了很多款由纯css3实现的特效。今天要再给大家带来一款纯css3实现的超炫动画...