css3的阴影、透明和动画

最新推荐文章于 2022-07-22 21:51:45 发布
最新推荐文章于 2022-07-22 21:51:45 发布
阅读量339 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzhexiongfen/article/details/84653886
版权

阴影效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .box {
                width: 400px;
                height: 400px;
                background: pink;
                //box-shadow:默认外阴影或inset内阴影，水平偏移，垂直偏移，模糊半径，扩展半径;
                box-shadow:3px 3px 15px 3px gray;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

透明效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxOutside {
                width: 410px;
                height: 410px;
                position: relative;
                background: rgba(200, 200, 200, 0.3);
            }
            .boxInside {
                width: 400px;
                height: 400px;
                position: absolute;
                background: pink;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="boxOutside">
            <div class="boxInside"><div>
        </div>
    </body>
</html>

动画效果：

 1.transition

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxOutside {
                width: 500px;
                height: 500px;
                position: relative;
                background: rgba(200, 200, 200, 0.3);
            }
            .boxInside {
                width: 400px;
                height: 400px;
                position: absolute;
                background: pink;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                transition: 1s width ease, 1s 1s height ease;
            }
            .boxInside:hover {
                width: 500px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div class="boxOutside">
            <div class="boxInside"><div>
        </div>
    </body>
</html>

2.animation

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
        <style type="text/css">
            .boxOutside {
                width: 500px;
                height: 500px;
                position: relative;
                background: rgba(200, 200, 200, 0.3);
            }
            .boxInside {
                width: 400px;
                height: 400px;
                position: absolute;
                background: #c00;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
               
            }
            .boxInside:hover {
                -webkit-animation: 1s 1s rainbow 3;
                animation: 1s 1s rainbow 3;
            }
            @-webkit-keyframes rainbow {
                0%{background: #c00;}
                50%{background: orange;}
                100%{background: yellowgreen;}
            }
            @keyframes rainbow {
                0%{background: #c00;}
                50%{background: orange;}
                100%{background: yellowgreen;}
            }
        </style>
    </head>
    <body>
        <div class="boxOutside">
            <div class="boxInside"><div>
        </div>
    </body>
</html>

wangzhexiongfen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现透明度变化的动画 （淡入淡出效果）
lin123_00的博客
04-29 1万+
本文我们将使用CSS来实现透明度发生变化的动画，可以获得淡入和淡出效果。 要实现CSS中透明度更改的动画，需要使用的是transition属性。由于transition属性是CSS3中的新增属性，因此有必要在一些可支持的浏览器上运行时加上前缀。 像是Chrom，Safari编写为“-webkit-transition”，为FireFox编写“-moz-transition”，为Internet...
animation css 透明度逐渐_CSS3 - 实现背景颜色、透明度动态过渡变化效果（关键帧动画）...
weixin_39720510的博客
12-24 2547
有时我们想要让某个元素的背景能够逐渐改变颜色， 使其更加醒目，可以通过 CSS3关键帧动画来实现。下面通过样例进行演示。1，背景色动态变化(1)效果图页面上 div初始背景色为黄色，然后逐渐变成橙色(整个过程持续2 秒)接着又从橙色逐渐变为黄色(整个过程持续 2秒)不断重复上面两个动画效果。(2)样例代码hangge.combody {padding: 20px;}#block {width: 1...
css3动画--css3阴影--css3渐变
qq_42589571的博客
02-23 255
css3动画 @keyframes 规则是用于创建动画的，在规则中必须设置： 1.动画时长 2.动画名称 后续需要通过动画的名称来绑定到特定的选择器上实现效果。 @keyframes { 0% {background: red;} 100%{background: yellow;} } 什么是动画？ 动画是使元素从一种样式逐渐变化为另一种样式的效果 0%开始动画，100%结束动画，在这之间可以...
html动画代码博客,CSS动画简介
weixin_32259855的博客
06-09 116
现在，我很少写介绍CSS的文章，因为感觉网站开发的关键还是在服务器端。但是，CSS动画除外，它实在太有用了。本文介绍CSS动画的两大组成部分：transition和animation。我不打算给出每一条属性的详尽介绍，那样可以写一本书。这篇文章只是一个简介，帮助初学者了解全貌，同时又是一个快速指南，当你想不起某一个用法的时候，能够快速地找到提示。我的主要参考资料是，2013年10月，Lea Ver...
CSS3渐变、过渡、转换、动画
lizixuan2001的博客
11-21 1759
CSS3渐变 什么是渐变？ CSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3渐变的分类 线性渐变（LinearGradients）-向下/向上/向左/向右/对角方向 径向渐变（radial-gradient）-由它们的中心定义 1、从上到下 下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色： #grad{background-image:linear-gradient(#e66465,#9198e5);} 2.对角 下面的实例演示了
css3阴影和动画
m0_72738258的博客
07-21 249
c3动画
使用CSS3实现圆角,阴影,透明
09-25
CSS3是一种强大的样式表语言，用于定义HTML或XML（包括SVG、XHTML等）文档的呈现方式。...透明、阴影和圆角只是CSS3众多功能的一小部分，还有诸如渐变、动画、多列布局等更多高级特性等待开发者探索和使用。
CSS3实现跳动的动画效果
12-02
在CSS3中，我们可以利用各种新的属性和方法来创建丰富的动画效果。本示例中，我们将探讨如何通过CSS3实现一个跳动的动画效果。这个效果由两部分组成：元素的阴影部分（`::before`伪元素）和元素本身（`::after`伪...
CSS3火警提示图标动画特效
07-24
CSS3动画允许开发者通过关键帧（@keyframes）定义一个动画的过程，从开始到结束的各个阶段，然后应用到元素上，使得元素能够按照预定的轨迹和时间进行变化。在这个火警提示图标动画特效中，开发者可能定义了从静止的...
CSS3实现文字标题动画效果
最新发布
11-09
本文将深入探讨如何使用CSS3和JQuery来实现文字标题的动画效果，提升网页的交互性和吸引力。 首先，CSS3（Cascading Style Sheets Level 3）是样式表语言的最新版本，它包含了一系列新特性和功能，如阴影、渐变、...
CSS3窗外闪电下雨动画特效
07-28
在本项目中，"CSS3窗外闪电下雨动画特效"是一个利用HTML5和CSS3技术创建的动态效果，它模拟了窗外雷电交加、雨水倾盆的场景。这个特效不仅增添了网页的视觉吸引力，还能为用户提供更为沉浸式的浏览体验。接下来，...
css 动画
彭良维的专栏
10-12 304
css动画 第一部分：CSS Transition 在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。 img{ height:15px; width:15px; } img:hover{ height: 450px; width: 450px; } //也可以单独指定高 img{ t
如何取消html加载的圆圈,HTML5 Loading动画加载 五彩的圆环Loading
weixin_39669133的博客
05-31 586
本文作者html5tricks，转载请注明出处今天我们要分享一款基于下面分享一下这款HTML5 Loading动画的实现过程，主要是HTML代码和CSS3代码，以及初始化的JS代码。首先是HTML代码，只定义一个Loading容器，非常简单。接下来是CSS代码，主要是定义每一个圆圈的动画效果：@-webkit-keyframes spin {from {-webkit-transform: rot...
CSS3：透明阴影效果
Owen的博客
02-11 4160
box-shadow: 0 0 .25rem rgba(95, 95, 95, .48);
html阴影怎么调透明度,css box-shadow 怎么设置透明度
weixin_33817140的博客
06-18 4151
用户提问1、首先需要打开html页面，找到并打开，新建个标签添加类设置为：rgba。 2、然后在标签创建，在标签里设置rgba为(rgba(R,G,B,A))，透明度为由0.1。 3、最后，保存后使用浏览器查看，可以看到当透明度已经设置好了，这样操作即可解决问题。推荐答案1、首先需要打开html页面，找到并打开，新建个标签添加类设置为：rgba。2、然后在标签创建，在标签里设置rgba为(rgba...
CSS3阴影 box-shadow的使用和技巧总结
热门推荐
freshlover的专栏
05-28 71万+
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩
css3实现透明度依次递减的动画效果
string佳佳的博客
10-09 634
html部分： <div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </di.
今日笔记总结
weixin_49766373的博客
07-22 226
脱离了文档流，不脱离文本流，半脱离。
animation css 透明度逐渐_CSS实现透明度变化的动画 （淡入淡出效果）
weixin_32722049的博客
12-24 2820
本文我们将使用CSS来实现透明度发生变化的动画，可以获得淡入和淡出效果。要实现CSS中透明度更改的动画，需要使用的是transition属性。由于transition属性是CSS3中的新增属性，因此有必要在一些可支持的浏览器上运行时加上前缀。像是Chrom，Safari编写为“-webkit-transition”，为FireFox编写“-moz-transition”，为Internet Exp...
CSS3新特性：HSLA声明与透明度控制
例如，CSS3支持边框半径（border-radius）创建圆角，阴影效果（box-shadow和text-shadow）增加立体感，以及渐变（linear-gradient和radial-gradient）和动画（@keyframes）等高级视觉效果。此外，还有媒体查询...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值