a超链接、target目标元素、平移的简单介绍、动画播放的状态暂停属性

最新推荐文章于 2024-04-18 13:44:35 发布

琴～～

最新推荐文章于 2024-04-18 13:44:35 发布

阅读量258

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/109404208

版权

一、HTML

a超链接

<a href="目标地址">内容</a>

href=“id名称box” 指向id为box的元素

<a href="#box">内容</a>
<div id="box">被a所指向的元素</div>

a默认带有下划线

a默认带有颜色

a默认鼠标样式为小手

》案例展示：

<!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>
        div{
            height:100px;
            border:1px solid #000;
        }
        /* 元素:target{}表示被指向目标元素 */
        div:target{
            background-color:red;
        }
    </style>
</head>
<body>
    <!-- a  超链接
            href="目标元素的id名"
    -->
    <a href="#box1">a1</a>
    <a href="#box2">a2</a>
    <a href="#box3">a3</a>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
</body>
</html>

》案例展示（手风琴效果—新浪微博积分）：

<!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>
        .waikuang{
            width:556px;
            /*块水平方向居中*/
            margin-left:auto;
            margin-right:auto;
            margin-top:10px;
        }
        .box{
            margin-bottom:5px;
            /* 在盒子内部的顶部产生一定的距离*/
            padding-top:50px;
            /* 相对定位 */
            position:relative;
        }
        .box_hd{
            width:556px;
            height:50px;
            background-color:#555555;
           
            /* 字体的设置 */
            font-size:14px;
            text-indent:20px;
            line-height:50px;
            color:white;
            /* 绝对定位 */
            position:absolute;
            top:0px;
            left:0px;
        }
        .bg{
            width:14px;
            height:10px;
            background-image: url("小箭头.png");
            background-repeat: no-repeat;
            /* 绝对定位 */
            position:absolute;
            top:20px;
            right:19px;
            /* 过渡 */
            transition:0.5s;
        }
        .box_bd{
            height:0px;
            border:1px solid black;
            background-color:#e4e4e4;
            /* 1.隐藏bd内容 */
            overflow: hidden;
           
            transition:0.5s;
            
        }
        .text{
            margin-top:20px;
            margin-left:20px;
            margin-right:30px;
            color:black;
            font-size:12px;
            line-height:24px;

        }
        /* 2.被指向的那一个.box_bd高度变回原来的180px */
        .box_bd:target{
            height:180px;
     }
       .box_hd a{
         color:white;
         text-decoration: none;
         /* 转化成块 */
         display: block;
         width:100%;
         height:49px;
          
        }
        /* 3.先改变结构先后顺序，利用相邻选择器，选择当前展开的一个，后面紧着的.box_hd*/
        .box_bd:target+.box_hd{
            background-color:black;
        }
        /* 4.变成黑色的这一个.box-hd内部的.bg，旋转90deg */
        .box_bd:target+.box_hd .bg{
            transform: rotate(90deg);}
    </style>
</head>
<body>
    <div class="waikuang">
        <!-- 第一个 -->
        <div class="box">
            <div class="box_bd" id="wenzi1">
                <div class="text">
                    积分是新浪游戏对于用户的一种奖励。用户可以通过完善个人资料、登录签到、参加活动等方式获得积分，新浪游戏积分可以在游戏新浪游戏商城兑换游戏激活码，超值礼包以及实物奖品。
                </div>
            </div>
            <div class="box_hd">
                <a href="#wenzi1">什么是新浪积分商城</a>
                <div class="bg"></div>
            </div>
        </div>
        <!-- 第二个 -->
        <div class="box">
           
            <div class="box_bd" id="wenzi2">
                <div class="text" >
                    积分是新浪游戏对于用户的一种奖励。用户可以通过完善个人资料、登录签到、参加活动等方式获得积分，新浪游戏积分可以在游戏新浪游戏商城兑换游戏激活码，超值礼包以及实物奖品。
                </div>
            </div>
            <div class="box_hd">
                <a href="#wenzi2">什么是新浪积分商城</a>
                <div class="bg"></div>
            </div>
        </div>
        <!-- 第三个 -->
        <div class="box">
            <div class="box_bd" id="wenzi3">
                <div class="text" >
                    积分是新浪游戏对于用户的一种奖励。用户可以通过完善个人资料、登录签到、参加活动等方式获得积分，新浪游戏积分可以在游戏新浪游戏商城兑换游戏激活码，超值礼包以及实物奖品。
                </div>
            </div>
            <div class="box_hd">
                <a hre="#wenzi3">什么是新浪积分商城</a>
                <div class="bg"></div>
            </div>
        </div>
    </div>
</body>
</html>

二、css

1、目标元素

元素：target

div:target{} 被指向的那一个div

2、元素内容与边界之间的距离

padding-top内部顶部的距离

3、清除a的默认下划线

a{text-decoration:none;}

4、平移（沿x轴，水平方向平移）

transform:translate(长度值px)

正值　向右
负值　向左

（沿z轴平移）

transform:translateZ(长度值)

正值向前越近
负值向后越远

5、嵌套子元素以3d空间呈现

transfrom-style:preserve-3d

加给父盒子

6、动画播放的状态

animation-play-state:paused 暂停

》案例展示(图片的平移)：

<!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>
        .waikuang{
            height:200px;
            width:600px;

            margin-left:auto;
            margin-right:auto;
            margin-top:100px;
            border:10px solid black;
            overflow: hidden;

        }
        .tupiankuang{
            width:2000px;
            animation:move 10s infinite linear;
            
        }
        .imgbox{
            width:200px;
            height:200px;
            float:left;

        }
        img{
            width:200px;
            height:200px;
        }
         @keyframes move {
             0%{transform:translate(0px);}
             100%{transform:translate(-1400px);}
         }
         .waikuang:hover .tupiankuang{
             /*动画播放状态：暂停*/
             animation-play-state:paused;
         }

    </style>
</head>
<body>
<div class="waikuang">
    <div class="tupiankuang">
        <div class="imgbox">
            <img src="pic01.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="pic02.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="pic03.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="pic04.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="pic05.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="pic06.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="pic07.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="pic08.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="pic09.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="pic10.jpg" alt="">
        </div>
    </div>
</div>
</body>
</html>

》案例展示（筛子转动）：

<!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>
        .box{
            width:750px;
            height:700px;
            margin-left: auto;
            margin-right:auto;
            margin-top:10px;
            border:1px solid black;
        }
        .shaizi{
            width:200px;
            height:200px;
            margin-left:auto;
            margin-right:auto;
            margin-top:250px;
            position:relative;
            /* 调用动画 */
            animation:mv 2s infinite;
            /* 使嵌套子元素以3d空间呈现 */
            transform-style: preserve-3d;
              
        }
         .shaizi div{
            width:200px;
            height: 200px;
             
            position:absolute;
            top:0px;
            left:0px;
            background-color:black;
           
        }
        .shaizi div:nth-child(1){
             
            /* 沿着z轴平移*/
            transform: translateZ(100px);
            background-image: url("bg_01.png");
            background-repeat: no-repeat;
        }
        .shaizi div:nth-child(2){
             /* 首先沿着x旋转90度，之后再沿着z轴平移 */
            transform: rotatex(90deg) translateZ(100px);
            background-image: url("bg_02.png");
            background-repeat: no-repeat; 
            
        }
        .shaizi div:nth-child(3){
             /* 首先沿着y旋转90度，之后再沿着z轴平移 */
            transform: rotatey(90deg) translateZ(100px);
            background-image: url("bg_03.png");
            background-repeat: no-repeat; 
             
        }
        .shaizi div:nth-child(4){
            /* 首先沿着x旋转90度，之后再沿着z轴平移 */
            transform: rotatex(90deg) translateZ(-100px);
            background-image: url("bg_04.png");
            background-repeat: no-repeat;
            
        }
        .shaizi div:nth-child(5){
            /* 首先沿着y旋转90度，之后再沿着z轴平移 */
            transform: rotatey(90deg) translateZ(-100px);
            background-image: url("bg_05.png");
            background-repeat: no-repeat; 
        }
        .shaizi div:nth-child(6){
             
            transform: translateZ(-100px);
            background-image: url("bg_06.png");
            background-repeat: no-repeat;
        }
        @keyframes mv{
            0%{
                transform:rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="shaizi">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

琴～～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
a超链接、target目标元素、平移的简单介绍、动画播放的状态暂停属性

一、HTMLa超链接<a href="目标地址">内容</a>href=“id名称box” 指向id为box的元素<a href="#box">内容</a><div id="box">被a所指向的元素</div>a默认带有下划线a默认带有颜色a默认鼠标样式为小手》案例展示：<!DOCTYPE html><html lang="en"><head> <me
复制链接

扫一扫