一些CSS3案例

最新推荐文章于 2021-08-03 20:15:18 发布

Simple_IDE

最新推荐文章于 2021-08-03 20:15:18 发布

阅读量104

点赞数

分类专栏： HTML 文章标签： css3

本文链接：https://blog.csdn.net/simple5960/article/details/108642625

版权

HTML 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

过渡手风琴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .menu{
            width: 200px;
            height: auto;
            margin: 100px auto;
        }
        .item{

            width: 100%;
            height: auto;
            background-color: #7DFFE7;
            color: orange;



        }
        .item>h3{
            height: 40px;
            line-height:40px;
            border-bottom: 2px solid #ccc;
            padding-left: 10px;
        }
        .item>.itembox{
            width: 100%;
            height: 0;
            overflow: hidden;
            /* 注意！！过渡效果只能对具体的值生效，对display的none  block无效 */
            /* display: none; */
            /*无效代码 transition: display 1s ; */
            /* 添加过渡效果 */
            transition: height 1s ;
        }
        .item>.itembox>ul{
            list-style: none;
            background-color: #eaffb6;
            padding: 10px;

        }
        /* 为item添加hover伪类 */
        .item:hover>.itembox{
            /* display: block; */
           height: 110px;
        
        }
         
    </style>
</head>
<body>
  <div class="menu">
    <div class="item">
        <h3> news</h3>
            <div class="itembox">
                <ul>
                    <li>文件查看编辑选择运行</li>
                    <li>文件查看编辑选择运行</li>
                    <li>文件查看编辑选择运行</li>
                    <li>文件查看编辑选择运行</li>
                    
                </ul>
            </div>
       
    </div>
    <div class="item">
     <h3>news</h3>
         <div class="itembox">
             <ul>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 
             </ul>
         </div>
     
 </div>
 <div class="item">
     <h3>news</h3>
         <div class="itembox">
             <ul>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 
             </ul>
         </div>
     
 </div>
 <div class="item">
     <h3>news</h3>
         <div class="itembox">
             <ul>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 <li>文件查看编辑选择运行</li>
                 
             </ul>
         </div>
     
 </div>

  </div>
</body>
</html>

2.轴心旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0cm;
        }
        .poker{
            width: 100px;
            height: 260px;
            position: relative;
            margin: 340px auto;
        }
        div{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0 ;
            top: 0;
            background-color: springgreen;
            margin-top: 5px;
            /* 添加过渡效果 */
            transition: transform 2s,background-color 2s;
            transform-origin: right top;
        }
        /* 添加鼠标上移效果 */

        .poker:hover>div:nth-of-type(1)
        {
            transform: rotate(60deg);
            background-color: steelblue;
        }
        .poker:hover>div:nth-of-type(2)
        {
            transform: rotate(120deg);
            background-color:teal;
        }
        .poker:hover>div:nth-of-type(3)
        {
            transform: rotate(180deg);
            background-color:violet;
        }
        .poker:hover>div:nth-of-type(4)
        {
            transform: rotate(240deg);
            background-color:yellow;
        }
        .poker:hover>div:nth-of-type(5)
        {
            transform: rotate(300deg);
            background-color:red;
        }
        .poker:hover>div:nth-of-type(6)
        {
            transform: rotate(360deg);
            background-color:saddlebrown;
        }
    </style>
</head>
<body>
   <section class="poker">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
   </section>
</body>
</html>

3.添加多个transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0cm;
        }
        div{
            width: 100px;
            height: 100px;
            margin: 10px auto;
            background-color: red;
            transition: transform 2s,background-color 2s;
            
        }
        div:first-of-type:active{
            /* 如果只有一个参数X方向，如果两个参数X。Y方向 
            移动参照元素的左上角
            */
            transform:translate(500px,400px);
            background-color:salmon
        }
        
        div:nth-of-type(2):active{
            transform: scale(2);
            background-color:sandybrown;
        }
        div:nth-of-type(3):active{
            /* 围绕Z轴转的 */
            transform: rotate(90deg);
            background-color:seagreen;
            /* 同样的可以设置默认圆心不在中心的 */
            transform-origin: 0 0;
        }
        div:nth-of-type(4):active{
            /* 单个参数XY方向同，双参数XY方向不同 */
            /* 如果角度为正，则往当前轴负方向斜切 */
            transform: skew(-50deg,-30deg);
            background-color:slategray;
        }
        div:nth-of-type(5):active
        {
            /* 注意先旋转会旋转坐标系 */
            transform: rotate(90deg)  translate(60px,70px);
            background-color:slategray;
        }
        div:nth-of-type(6):active
        {
            /* 注意先旋转会旋转坐标系 */
            transform: translate(60px,70px) rotate(90deg);
            background-color:slategray;
        }
    </style>
</head>
<body>
    <div>移动</div>
    <div>缩放</div>
    <div>旋转</div>
    <div>斜切</div>
    <div>旋转加移动</div>
    <div>移动加旋转</div>
   
</body>
</html>

4.动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *
        {
            padding: 0;
            margin: 0;
        }
        div
        {
            width: 200px;
            height: 200px;
            background-color:red;
            position: absolute;
            /*  animation-name: ;
            1.先将动画制作好，然后加到某个元素上面去
                通过关键帧@keyframes制作动画
             */
            animation-name:moveTest ;
            /* 2.设置动画的总耗时 */
            animation-duration: 2s;
            /* 3.还可以设置动画的播放次数,默认一次,infinite无限次 */
            animation-iteration-count: 2;
            /* 4.还可以设置交替动画 
            alternate：从结束到开始
            */
            /* animation-direction: alternate; */
            /* 5.还可以设置动画的延迟 */
            animation-delay: 2s;
            /* 6.设置动画结束的状态,默认回到原始状态 
            forwards:设置动画结束的状态
            backwards:不会保持动画结束状态，在有延迟情况下。如果动画有初始状态会计算出初始状态
            */
            animation-fill-mode: backwards;
            /* 7.设置动画时间函数 动画的快慢 */
            animation-timing-function: linear;
            /* /8.设置动画的播放状态 */
            /* animation-play-state: running; */

        }
        
        @keyframes moveTest{
            /* 整个动画耗时的百分比  */
            0%{
                transform: translate(0,0) rotate(30deg);
            }
            30%{
                transform: translate(500px,0);
            }
            60%{
                transform: translate(500px,500px);
            }
            100%{
                transform: translate(0px,500px);
            }
        }
    </style>
</head>
<body>
    <div></div>
    <input type="button" value="run" id="run">
    <input type="button" value="pause" id="pause">
</body>
<script>
    var div=document.querySelector("div")
    document.querySelector("#run").onclick=function(){
        div.style.animationPlayState="running"
    }
    document.querySelector("#pause").onclick=function(){
        div.style.animationPlayState="paused"
    }

</script>
</html>

Simple_IDE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一些CSS3案例

过渡手风琴<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ .
复制链接

扫一扫