css3特效：阴影、渐变、过渡、变形、滤镜可查看

9 阅读 · 0 评论 · 0 收藏 · 2023-05-22 · 28791 字 · 96 分钟阅读

阴影（shadow)\n\nbox-shadow、text-shadow\n\n 格式：阴影：横向偏移量纵向偏移量模糊距离阴影颜色\n\n\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset=\utf-8\>\n\t\t<title>shadow</title>\n\t\t<style type=\text/css\>\n\t\t\tdi...

阴影（shadow)

box-shadow、text-shadow

实例：实现效果

text-stroke:

渐变（gradient）

linear-gradient、radial-gradient

过渡（transition）

变形（transform）

滤镜（filter）

阴影（shadow)

box-shadow、text-shadow

text

       格式：      阴影：横向偏移量 纵向偏移量 模糊距离 阴影颜色

text

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>shadow</title>
        <style type="text/css">
            div{
   width: 300px;
   height: 300px;
   background-color: cyan;
   box-shadow: 50px 50px 100px tomato;
            }
            p{
   font-size: 2em;
   text-shadow: 5px 5px 5px gray;
            }
            section{
   width: 100px;
   height: 100px;
   background-color: pink;
            }
            section:hover{
   cursor: pointer;
   box-shadow: 0 8px 10px  gray;
            }
        </style>
    </head>
    <body>
        <div></div>
        
感谢感谢感谢感谢

        <section></section>
    </body>
</html>

实例：实现效果

代码：

text

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>静夜思</title>
        <style type="text/css">
            *{
   margin: 0;
   padding: 0;
   list-style: none;
            }
            html{
   font-size: 62.5%;
            }
            p{
   height: 100px;
   width: 500px;
   line-height: 100px;
   text-align: center;
   margin: 0 auto;
   font-size: 7rem;
            }
            p:nth-of-type(1){
   background-color: #d5d2d2;
   color: transparent;
   -webkit-text-stroke:1px black;
            }
            p:nth-of-type(2){
   background-color: #454545;
   color: #333;
   text-shadow: -1px -1px 0 #cecece,1px 1px 0 #5c5c5c;
            }
            p:nth-of-type(3){
   background-color: #000;
   color: #fff;
   text-shadow:-5px -5px 8px #cd12c8,
   5px -5px 8px #cd12c8,
   -5px 5px 8px #cd12c8,
   5px 5px 8px #cd12c8;
            }
            p:nth-of-type(4){
   background-color: #ccc;
   color: #fff;
   text-shadow:0 1px 0 #eee,
   0 2px 0 #bcbcbc,
   0 3px 0 #aaa,
   0 4px 0 #999,
   0 5px 0 #787878,
   0 6px 0 #666;
   
            }
            p:nth-of-type(5){
   background-color: #eee;
   color: rgba(255,255,255,0);
   text-shadow:0 0 10px hotpink;
            }
        </style>
    </head>
    <body>
        
静夜思

        
床前明月光

        
疑是地上霜

        
举头望明月

        
低头思故乡

    </body>
</html>

text-stroke:

text

  字体边框，有些游览器不兼容

渐变（gradient）

linear-gradient、radial-gradient

背景图：渐变(方向, 颜色1 百分比, 颜色2 百分比 ,…)

text

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>gradient</title>
        <style type="text/css">
            div{
   width: 500px;
   height: 200px;
   background-color: tomato;
   margin-bottom: 100px;
            }
            div:nth-of-type(1){
   background-image: -webkit-linear-gradient(left,cyan 20%,gold 50%,tomato,hotpink);
   background-image: linear-gradient(left,cyan 20%,gold 50%,tomato,hotpink);
            }
            div:nth-of-type(2){
   background-image: radial-gradient(left top,cyan ,gold ,orange,hotpink);
   background-image: -webkit-radial-gradient(left top,cyan ,gold,orange ,hotpink);
            }
            .ch{
   background-image: -webkit-radial-gradient(center bottom,purple,deepskyblue,cyan,green,yellow,orange);
   background-image: radial-gradient(center bottom,purple,deepskyblue,cyan,green,yellow,orange);
   
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div class="ch"></div>
    </body>
</html>

过渡（transition）

在不适用动画的情况下变换状态

transition:all 1s 0.1s linear 顺序：属性名时间延迟时间速度曲线

transition-property:设置过渡的属性

值全部css属性

text

1 2 3 4 5 6 7

  transition-duration：定义过渡时间


  transition-delay：定义延时执行时间


  transition-timing-function:过渡效果的时间曲线

transition-timing-function:值：

值	属性	等比
linear	匀速	cublic-bezier(0,0,1,1)
ease	快、慢、快	cublic-bezier(0.25,0.1,0.25,0.1)
ease-in	man、快	cublic-bezier(0.42,0,1,1)
ease-out	快、慢	cublic-bezier(0,0,0.58,1)
ease-in-out	慢、快、慢	cublic-bezier(0.42,0,0.58,1)
cublic-bezier(n,n,n,n)	定义自己的值	值的范围在0~1

text

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>过渡transition</title>
        <style type="text/css">
            div{
   width: 100px;
   height: 200px;
   background-color: cyan;
   transition: .3s;
            }
            div:hover {
   /* 光标 */
   cursor: pointer;
   width: 300px;
   height: 400px;
   background-color: pink;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

变形（transform）

属性	状态	作用	单位
translate	平移	x，y，z	px
rotate	旋转	x，y，z	deg
scale	收缩	x，y，z	数值
skew	拉扯	x，y	deg
transform-style:preserve-3d	3D效果

text

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>变形transform</title>
        <style type="text/css">
            div{
   width: 200px;
   height: 200px;
   background-image: url(../2.2.3/img/pic/7.jpg);
   background-size: cover;
   transition: .5s;
            }
            div:hover{
   /* 平移 */
   /* transform:translateY(100px); */
   /* 旋转   deg turn grad */
   /* transform: rotate(180deg); */
   /* transform: rotate(.5turn); */
   /* transform: rotate(200grad); */
   /* 缩放 */
   /* transform: scale(.2); */
   /* transform: scale(2); */
   /* 倾斜 */
   transform: skew(30deg);
            }
            section{
   width: 200px;
   height: 200px;
   line-height: 200px;
   color: white;
   text-align: center;
   background-color: deeppink;
   margin-left: 100px;
   transform-origin: left top;
   transition: .5s;
            }
            section:hover{
   transform: rotate(-360deg);
            }
        </style>
    </head>
    <body>
        <div></div>
        
知了堂

        <section>Hello</section>
    </body>
</html>

滤镜（filter）

属性	取值	作用
filter:blur(4px);	大于0	模糊
filter:brightness(2)	正自然数	亮度
filter:contrast(2)	正自然数	对比度
filter:drop-shadow()	同box-shadow	阴影
filter:grayscale(1)	[0,1]	灰度
filter:hue-rotate(deg)	deg	色相旋转
filter:invert(1)	[0,1]	反转图像
filter:opacity(1)	[0,1]	透明度
filter:saturate(1)	正自然数	饱和度
filter:sepia(1)	[0,1]	褐色

nn``` filter过滤

```

原文地址：https://blog.csdn.net/weixin_51264427/article/details/119510501?ops_request_misc=&request_id=&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-10-119510501-null-null.142^v87^koosearch_v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址: https://www.sjxi.cn/detil/8af15d5882764fabada68d01ee4b4be9

打赏作者

本站为非盈利网站，如果您喜欢这篇文章，欢迎支持我们继续运营！

css3特效：阴影、渐变、过渡、变形、滤镜可查看

阴影（shadow)

box-shadow、text-shadow

实例：实现效果

text-stroke:

渐变（gradient）

linear-gradient、radial-gradient

过渡（transition）

变形（transform）

滤镜（filter）

打赏作者

推荐阅读

CSS3新增特效

CSS3样式特效

Markdown自定义CSS样式

好用的css特效

纯CSS3流光边框特效

css（划过浮动阴影特效）

评论

css3特效：阴影、渐变、过渡、变形、滤镜 可查看

阴影（shadow)

box-shadow、text-shadow

实例：实现效果

text-stroke:

渐变（gradient）

linear-gradient、radial-gradient

过渡（transition）

变形（transform）

滤镜（filter）

打赏作者

推荐阅读

CSS3新增特效

CSS3样式特效

Markdown自定义CSS样式

好用的css特效

纯CSS3流光边框特效

css（划过浮动阴影特效）

评论

登录后即可评论

css3特效：阴影、渐变、过渡、变形、滤镜可查看