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

白色玫瑰 程序猿

时间: 2023-05-22 阅读: 1 字数:12750

html5 css 前端
{}
阴影（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...

目录

<a href="#%E9%98%B4%E5%BD%B1%EF%BC%88shadow%29">阴影（shadow)</a>

<a href="#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0box-shadow%E3%80%81text-shadow"> box-shadow、text-shadow</a>

<a href="#%E5%AE%9E%E4%BE%8B%EF%BC%9A%E5%AE%9E%E7%8E%B0%E6%95%88%E6%9E%9C">实例：实现效果</a>

<a href="#text-stroke%3A">text-stroke:</a>

<a href="#%E6%B8%90%E5%8F%98%EF%BC%88gradient%EF%BC%89">渐变（gradient）</a>

<a href="#%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0linear-gradient%E3%80%81radial-gradient"> linear-gradient、radial-gradient</a>

<a href="#%E8%BF%87%E6%B8%A1%EF%BC%88transition%EF%BC%89">过渡（transition）</a>

<a href="#%E5%8F%98%E5%BD%A2%EF%BC%88transform%EF%BC%89">变形（transform）</a>

<a href="#%E6%BB%A4%E9%95%9C%EF%BC%88filter%EF%BC%89">滤镜（filter）</a>

<hr id="hr-toc">

​​​​​​​

阴影（shadow)

box-shadow、text-shadow

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

<!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>

实例：实现效果

代码：

<!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:

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

渐变（gradient）

linear-gradient、radial-gradient

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

<!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属性

  transition-duration：定义过渡时间


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


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

transition-timing-function:值：

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

<!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）

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

<!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）

<table> <tbody> <tr> <td>属性</td> <td>取值</td> <td>作用</td> </tr> <tr> <td>filter:blur(4px);</td> <td>大于0</td> <td>模糊</td> </tr> <tr> <td>filter:brightness(2)</td> <td>正自然数</td> <td>亮度</td> </tr> <tr> <td>filter:contrast(2)</td> <td>正自然数</td> <td>对比度</td> </tr> <tr> <td>filter:drop-shadow()</td> <td>同box-shadow</td> <td>阴影</td> </tr> <tr> <td>filter:grayscale(1)</td> <td>[0,1]</td> <td>灰度</td> </tr> <tr> <td>filter:hue-rotate(deg)</td> <td>deg</td> <td>色相旋转</td> </tr> <tr> <td>filter:invert(1)</td> <td>[0,1]</td> <td>反转图像</td> </tr> <tr> <td>filter:opacity(1)</td> <td>[0,1]</td> <td>透明度</td> </tr> <tr> <td>filter:saturate(1)</td> <td>正自然数</td> <td>饱和度</td> </tr> <tr> <td>filter:sepia(1)</td> <td>[0,1]</td> <td>褐色</td> </tr> </tbody> </table>nn``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>filter过滤</title> <style type="text/css"> div{ width: 200px; height: 200px; background-image: url(../2.2.3/img/icon/4.png); background-size: cover;

/* 模糊 / / filter: blur(10px); / / 亮度 / / filter: brightness(2); / / 对比度 / / filter: contrast(.5); / / 阴影 / / filter: drop-shadow(5px 5px 5px tomato); / / 灰度 / / filter: grayscale(1); / / 色相转变 / / filter: hue-rotate(70deg); / / 反转 / / filter: invert(1); / / 透明度 / / filter: opacity(.25); / / 饱和度 / / filter: saturate(4); / / 褐色 / / filter: sepia(1); / } section{ width: 200px; height: 200px; background-color: red; / filter: hue-rotate(90deg); */ transition: 2s; } section:hover{ filter: hue-rotate(360deg); } </style> </head> <body> <div></div> <section></section> </body>

</html>

```

原文地址：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

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号