首页澳门新葡亰官方网站 › 纯CSS3完结牛奶般剔透的3D开关特效,css3剔透3d特效

纯CSS3完结牛奶般剔透的3D开关特效,css3剔透3d特效

HTML代码:

<div>
    <div>
        <input type="checkbox">

        +
    </div>
    <div>
        <input type="checkbox" checked>

        –
    </div>
</div>

HTML代码很简单,我们可以看出每个checkbox下面均定义了2个span,通过对这两个span样式的定义,我们就可以模拟出checkbox选中的动画效果了。

软舰实训分享的大家可以看懂?

HTML5/CSS3
就是在写网页里可以用到的按钮特效,很实用的,如果看不太明白,可以先了解一下htmlhe和css的关系,这是编程的知识
 

怎利用CSS3制作3D效果文字具体实现样式

复制代码代码如下:.example-class{text-shadow: [X offset] [Y offset]
[Blur size]
[Colour];}译者注:X表示x轴上的位移,可为负值;Y表示y轴上的位移,可为负值;Blur表示投影的宽度,不能为负值;Color为投影的颜色。堆叠多层CSS投影虽然我们没有必要堆叠多层投影,但通过堆叠多层投影会有更好的3D效果开始创建3D文字你可能会选择比文字更深的颜色来作为投影的颜色,所以这个例子中我就用白色的文字,用深一点的灰色作为投影颜色,这个例子中我将H2的文字渲染3D效果,css代码如下:复制代码代码如下:h2{text-shadow:1px
1px 0 #CCC,2px 2px 0 #CCC, /* end of 2 level deep grey shadow */3px
3px 0 #444,4px 4px 0 #444,5px 5px 0 #444,6px 6px 0 #444; /* end of
4 level deep dark shadow
*/}效果如下:好了,到这里你已经创建了基本的3D文字,然而,让我们进一步来实现鼠标滑过的文字放大效果,并用css的transision属性实现圆滑的淡入淡出效果。首先用transform属性实现滑过字体放大复制代码代码如下:h2:hover{/*
CSS3 Transform Effect */-webkit-transform: scale(1.2); /* Safari &
Chrome */-moz-transform: scale(1.2); /* Firefox */-o-transform:
scale(1.2); /* Opera
*/}效果如下:然后利用transition属性实现淡入淡出效果复制代码代码如下:h2{/*
CSS3 Transition Effect */-webkit-transition: all 0.12s ease-out; /*
Safari & Chrome */-moz-transition: all 0.12s ease-out; /* Firefox
*/-o-transition: all 0.12s ease-out; /* Opera
*/}到此,我们就用CSS3实现了3D效果的文字,并且在鼠标滑过是让字体放大,且有淡入淡出的效果,这一切是用纯CSS实现的哦。
 

CSS3对于不可以适用的浏览器应该怎办

目前主流浏览器对于CSS3支持情况的依次是:Chrome、safari、firefox 、 opera
& IE9
,firefox甚至连CSS3的选择器都不是全部支持的,而其他的都支持。除了Chrome&safari以外,其他的对于倒影/翻转等样式的支持都是很有限的,opera甚至不支持背景颜色的渐变和transform动画(太土了)。IE678就不要奢求太多了,即使部分支持CSS3的IE8,支持程度尚不足1/10.

CSS3在不支持的浏览器上面就相当于随便写的一组样式表定义:div{
haha:huhu;},对页面样式不会产生作用的。

不支持就是不支持没有什么怎么办的,对于CSS3中的圆角、倒影、倾斜(旋转)等定义在不支持的浏览器上面通常直接使用背景图片代替。动画等效果就只能用javascript来实现了。
 

纯CSS3实现牛奶般剔透的3D按钮特效,css3剔透3d特效

今天我们要来看一款非常特别的纯CSS3
3D按钮,它的外观酷似纯白剔透的牛奶,点击按钮的时候还会出现一种很柔和的弹力效果。按钮按下时,按钮会轻轻的弹动一下,非常逼真。本文我们在观赏演示的同时,也将源代码分享出来一起学习。

图片 1

你也可以在这里查看在线演示

接下来我们来分析一下实现这款CSS3
3D按钮的步骤及其代码,总体而言,这款CSS3
3D按钮主要由HTML代码和CSS代码组成。实现原理是用两个span来替代checkbox选中和不选中两个状态的样式。

纯css3实现的3D按钮,css33d按钮

前面已经为大家介绍了好多纯css3实现的按钮。今天要再给大家带来一款纯css3实现的3D按钮。在实例中给出了五种颜色的3D按钮。效果图如下:

图片 2

在线预览   源码下载

实现的代码。

html代码:

 <h1>

            CSS 
                3D 
                    Buttons
    </h1>
    <p>
        <a href="#" class="s3-btn s3-btn1">s3-btn1</a>
    </p>
    <p>
        <a href="#" class="s3-btn s3-btn2">s3-btn2</a>
    </p>
    <p>
        <a href="#" class="s3-btn s3-btn3">s3-btn3</a>
    </p>
    <p>
        <a href="#" class="s3-btn s3-btn4">s3-btn4</a>
    </p>
    <p>
        <a href="#" class="s3-btn s3-btn5">s3-btn5</a>
    </p>

css3代码:

        body
        {
            font-family: 'Open Sans' , sans-serif;
            background-image: url(blurred-background-images-photos-0322125813.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            background-attachment: fixed;
        }
        h1
        {
            text-align: center;
        }
        p
        {
            margin: 1em;
            padding: 1em;
            text-align: center;
        }
        .s3-btn1, .s3-btn2, .s3-btn3, .s3-btn4, .s3-btn5, a.s3-btn1, a.s3-btn2, a.s3-btn3, a.s3-btn4, a.s3-btn5
        {
            outline: none;
            text-decoration: none !important;
            margin: 0 auto;
            padding: 1em 3em;
            border-radius: 5px;
            -webkit-transition: all 100ms linear;
            transition: all 100ms linear;
            touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: pointer;
            position: relative;
            text-align: center;
        }
        .s3-btn1
        {
            color: #ffffff;
            background: -webkit-linear-gradient(top, #c03718 0%, #e44a27 100%);
            background: linear-gradient(to bottom, #c03718 0%, #e44a27 100%);
            border: 1px solid #a93115;
            box-shadow: 0px 4px 0px 0px #a93115, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
        }
        .s3-btn1:hover
        {
            background: -webkit-linear-gradient(top, #c03718 0%, #d73e1b 100%);
            background: linear-gradient(to bottom, #c03718 0%, #d73e1b 100%);
        }
        .s3-btn1:hover:active
        {
            border: none !important;
            top: 4px;
            box-shadow: 0px 2px 0px 0px #a93115, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
        }
        .s3-btn2
        {
            color: #ffffff;
            background: -webkit-linear-gradient(top, #6fbdbf 0%, #92cdcf 100%);
            background: linear-gradient(to bottom, #6fbdbf 0%, #92cdcf 100%);
            border: 1px solid #5db5b8;
            box-shadow: 0px 4px 0px 0px #5db5b8, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
        }
        .s3-btn2:hover
        {
            background: -webkit-linear-gradient(top, #6fbdbf 0%, #80c5c7 100%);
            background: linear-gradient(to bottom, #6fbdbf 0%, #80c5c7 100%);
        }
        .s3-btn2:hover:active
        {
            border: none !important;
            top: 4px;
            box-shadow: 0px 2px 0px 0px #5db5b8, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
        }
        .s3-btn3
        {
            color: #ffffff;
            background: -webkit-linear-gradient(top, #a8e427 0%, #baea54 100%);
            background: linear-gradient(to bottom, #a8e427 0%, #baea54 100%);
            border: 1px solid #9bd71a;
            box-shadow: 0px 4px 0px 0px #9bd71a, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
        }
        .s3-btn3:hover
        {
            background: -webkit-linear-gradient(top, #a8e427 0%, #b1e73d 100%);
            background: linear-gradient(to bottom, #a8e427 0%, #b1e73d 100%);
        }
        .s3-btn3:hover:active
        {
            border: none !important;
            top: 4px;
            box-shadow: 0px 2px 0px 0px #9bd71a, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
        }
        .s3-btn4
        {
            color: #ffffff;
            background: -webkit-linear-gradient(top, #70df9e 0%, #9ae8ba 100%);
            background: linear-gradient(to bottom, #70df9e 0%, #9ae8ba 100%);
            border: 1px solid #5cda8f;
            box-shadow: 0px 4px 0px 0px #5cda8f, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
        }
        .s3-btn4:hover
        {
            background: -webkit-linear-gradient(top, #70df9e 0%, #85e3ac 100%);
            background: linear-gradient(to bottom, #70df9e 0%, #85e3ac 100%);
        }
        .s3-btn4:hover:active
        {
            border: none !important;
            top: 4px;
            box-shadow: 0px 2px 0px 0px #5cda8f, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
        }
        .s3-btn5
        {
            color: #ffffff;
            background: -webkit-linear-gradient(top, #161616 0%, #2f2f2f 100%);
            background: linear-gradient(to bottom, #161616 0%, #2f2f2f 100%);
            border: 1px solid #090909;
            box-shadow: 0px 4px 0px 0px #090909, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
        }
        .s3-btn5:hover
        {
            background: -webkit-linear-gradient(top, #161616 0%, #222222 100%);
            background: linear-gradient(to bottom, #161616 0%, #222222 100%);
        }
        .s3-btn5:hover:active
        {
            border: none !important;
            top: 4px;
            box-shadow: 0px 2px 0px 0px #090909, 0px 5px 12px 0px rgba(0, 0, 0, 0.6), inset 0px 0px 10px -5px #000000;
        }

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

怎利用CSS3制作3D效果文字具体实现样式解答

复制代码代码如下:.example-class{text-shadow: [X offset] [Y offset]
[Blur size]
[Colour];}译者注:X表示x轴上的位移,可为负值;Y表示y轴上的位移,可为负值;Blur表示投影的宽度,不能为负值;Color为投影的颜色。
堆叠多层CSS投影
虽然我们没有必要堆叠多层投影,但通过堆叠多层投影会有更好的3D效果
开始创建3D文字
你可能会选择比文字更深的颜色来作为投影的颜色,所以这个例子中我就用白色的文字,用深一点的灰色作为投影颜色,这个例子中我将H2的文字渲染3D效果,css代码如下:
复制代码代码如下:h2{text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444; /* end of 4 level deep dark shadow
*/}效果如下:好了,到这里你已经创建了基本的3D文字,然而,让我们进一步来实现鼠标滑过的文字放大效果,并用css的transision属性实现圆滑的淡入淡出效果。
首先用transform属性实现滑过字体放大
复制代码代码如下:h2:hover{/* CSS3 Transform Effect */
-webkit-transform: scale(1.2); /* Safari & Chrome */
-moz-transform: scale(1.2); /* Firefox */
-o-transform: scale(1.2); /* Opera
*/}效果如下:然后利用transition属性实现淡入淡出效果
复制代码代码如下:h2{/* CSS3 Transition Effect */
-webkit-transition: all 0.12s ease-out; /* Safari & Chrome */
-moz-transition: all 0.12s ease-out; /* Firefox */
-o-transition: all 0.12s ease-out; /* Opera
*/}到此,我们就用CSS3实现了3D效果的文字,并且在鼠标滑过是让字体放大,且有淡入淡出的效果,这一切是用纯CSS实现的哦。
 

文本3D效果,css3文本3d 代码如下: ! DOCTYPE
html html head style h1 { color : #3D3D3D ; font-size : 200px ;
text-shadow : 0px -1px 0px #858585, 0px 1px 10px rgba(0...

怎利用CSS3制作3D效果文字具体实现样式解答

复制代码代码如下:.example-class{text-shadow: [X offset] [Y offset]
[Blur size]
[Colour];}译者注:X表示x轴上的位移,可为负值;Y表示y轴上的位移,可为负值;Blur表示投影的宽度,不能为负值;Color为投影的颜色。
堆叠多层CSS投影
虽然我们没有必要堆叠多层投影,但通过堆叠多层投影会有更好的3D效果
开始创建3D文字
你可能会选择比文字更深的颜色来作为投影的颜色,所以这个例子中我就用白色的文字,用深一点的灰色作为投影颜色,这个例子中我将H2的文字渲染3D效果,css代码如下:
复制代码代码如下:h2{text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444; /* end of 4 level deep dark shadow
*/}效果如下:好了,到这里你已经创建了基本的3D文字,然而,让我们进一步来实现鼠标滑过的文字放大效果,并用css的transision属性实现圆滑的淡入淡出效果。
首先用transform属性实现滑过字体放大
复制代码代码如下:h2:hover{/* CSS3 Transform Effect */
-webkit-transform: scale(1.2); /* Safari & Chrome */
-moz-transform: scale(1.2); /* Firefox */
-o-transform: scale(1.2); /* Opera
*/}效果如下:然后利用transition属性实现淡入淡出效果
复制代码代码如下:h2{/* CSS3 Transition Effect */
-webkit-transition: all 0.12s ease-out; /* Safari & Chrome */
-moz-transition: all 0.12s ease-out; /* Firefox */
-o-transition: all 0.12s ease-out; /* Opera
*/}到此,我们就用CSS3实现了3D效果的文字,并且在鼠标滑过是让字体放大,且有淡入淡出的效果,这一切是用纯CSS实现的哦。
 

下面的例子展示了在HTML5中你如何使用CSS建立不可选的文字。 Html代码
!DOCTYPEHTML html head title Cr...

转载本站文章请注明出处:澳门新葡亰官方网站 http://www.radioritmo-bl.com/?p=288

上一篇:

下一篇:

相关文章