css 特效

最新推荐文章于 2024-08-31 09:24:27 发布

奋斗的小小骚年

最新推荐文章于 2024-08-31 09:24:27 发布

阅读量1.1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_41654985/article/details/79773278

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*  div
        {
            width: 300px;
            height: 300px;
            text-shadow: 5px 5px 3px red;
            border: 1px solid #FF0000;
            box-shadow: 5px 5px 10px 5px deepskyblue inset;
        }*/
        button
        {
            width: 70px;
            height: 25px;
            text-shadow: 3px 3px 3px #AAAAAA;
            background-color: yellowgreen;
            box-shadow: 3px 3px 5px 1px #AAAAAA;
        }
        button:hover
        {
            box-shadow: 3px 3px 10px 1px #000000 inset;
        }
        .imgs:hover
        {

            box-shadow:3px 3px 10px 1px #000000 inset;

        }
        .imgs
        {
            width: 59px;
            height: 58px;
            background-image: url("img/psd9802_07.png");
            float: left;
            margin-left: 5px;
        }
        #gradient
        {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            box-shadow:0px 0px 30px 10px yellow ;
            /*
            linear-gradient 线性渐变，必须写在background中
                          （to 目标方向,第一个色彩,第二个色彩,第三个色彩。。）
                          每个目标用空格空开
            radial-gradient 放射型渐变 ，必须写在background中
                            （颜色1，颜色2。。。）正中心放射渐变色彩
                            (circle at 圆心方向，颜色1，颜色2。。。) 重订放射中心位置

            */
            /*background:linear-gradient(to right bottom,red,orange,yellow)*/
            /*background: radial-gradient(red,orange);*/
            background: radial-gradient(circle at center,red,orange);
        }
        /*
           deg  角度
             transform-origin  旋转圆心点
                           50px 50px  固定位置
                           bottom right  右下
             transform rotate(角度deg);
                        skew(水平角度deg，垂直角度deg)
                        translate(水平平移，垂直平移)
                        scale(水平缩放，垂直缩放)
        */
        i
        {
            width: 0;
            height:0;
            display: inline-block;
            border-top: 5px solid #000000;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            transition: all 1s;
        }
        i:hover
        {
            transform: rotate(180deg);
        }
        #imgRotate
        {
            width: 59px;
            transition: all 1s;
        }
        #imgRotate:hover
        {
            /*transform-origin: right bottom;*/
            /*transform: rotate(360deg);*/
            /*transform: translate(30px,-30px);*/
            transform: scale(2,2);
        }
        #effDiv
        {
            width: 385px;
            height: 172px;
            position: relative;
            overflow: hidden;
        }
        #effDiv img
        {
            width: 385px;
            height: 172px;
            transition: all 1s;
        }
        #effDiv div
        {
            width: 385px;
            height: 40px;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            position: absolute;
            bottom: -40px;
            line-height: 40px;
            color: #FFFFFF;
            transition: all 1s;
        }
        #effDiv:hover>img
        {
            transform: scale(1.5,1.5);
        }
        #effDiv:hover>div
        {
            transform:translate(0,-40px);
        }
        #skew
        {
            width: 200px;
            height: 100px;
            background-color: orange;
            transform: skew(0,30deg);
        }
        #rotate3D
        {
            width: 385px;
            height: 172px;
            perspective: 500px;
        }
        #rotate3D img
        {
            width: 385px;
            height: 172px;
            transform: rotateX(0deg);
            transition: all 2s;
        }
        #rotate3D:hover img
        {
            transform: rotateX(180deg);
        }
    </style>
</head>
<body>
    <!--<div>这个文字很好看</div>-->
    <!--<button>按钮</button>-->
    <!--<div class="imgs"></div>
    <div class="imgs"></div>
    <div class="imgs"></div>
    <div class="imgs"></div>-->
<!--<div id="gradient"></div>-->
    <!--<div><i></i></div>-->
    <!--<div id="imgRotate"><img src="img/psd9802_07.png"></div>-->
   <div id="effDiv">
        <img src="img/psd9802_03.png">
        <div>图片1</div>
    </div>
    <div id="skew"></div>
    <div id="rotate3D">
        <img src="img/psd9802_03.png">
    </div>
</body>
</html>