CSS实现一些效果

最新推荐文章于 2024-10-12 11:10:56 发布

小雪Margain

最新推荐文章于 2024-10-12 11:10:56 发布

阅读量258

点赞数

分类专栏：学习文章标签： CSS实现一些效果

本文链接：https://blog.csdn.net/qq_42862581/article/details/99320413

版权

学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1、CSS滑动门技术

核心技术：Css的精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不同字段的数的导航栏。
一般的经典布局

<li>
	<a href="#">
		<span> 导航内容</span>
	</a>
</li>

总结：
1，a设置背景左侧，padding撑开合适的宽度。
2，span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度。
3，之所以a包含span就是因为整个导航是可点击的。

2、鼠标经过显示边框

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div img {
        width: 300px;
        height: 200px;
      }
      div{
        width: 300px;
        height: 200px;
        position: relative;
        margin: 20px auto;
      }
      div:hover::before{ /*鼠标经过之后 前面插入一个伪元素*/
        content: "";
        border: 10px solid rgba(255,255,255,.4);
        width: 100%;
        height: 100%;
        display: block; /*伪元素是行内元素 要转换成块级元素 才可以有宽高*/
        position: absolute;
        top:0;
        left: 0;
        box-sizing: border-box; /*设置box-sizing为border-box值 把padding和border都算入width里面*/
      }
    </style>
</head>
<body>
    <div>
      <img src="https://img10.360buyimg.com/pop/s590x470_jfs/t1/66632/27/5867/97611/5d400157E85345d78/d506e622fb78c807.jpg.webp" alt=""/>
    </div>
</body>
</html>

效果：
在这里插入图片描述

3、过度动画

translate：要过度的属性花费时间运动曲线何时开始；如果有多组属性变化，用逗号隔开。

属性	描述	CSS
translation	简写属性，用于在一个属性中设置四个过度属性	3
translation-property	规定应用过度的CSS属性的名称	3
translation-duration	定义过渡效果花费的时间，默认是0	3
translation-timing-function	规定过渡效果的时间曲线。默认是“ease"	3
translation-delay	规定过渡效果何时开始	3

translation-duration 花费时间单位是秒
过渡效果时间曲线有：linear匀速 ease逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out先加速后减速
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        width: 200px;
        height: 100px;
        background-color: pink;
        transition: width 0.6s ease 0s,height 0.3s ease 0s; /*注意过渡动画要写在div中而不是hover*/
      }
      div:hover{ /*鼠标经过变换大小*/
        width: 600px;
        height: 300px;
      }
    </style>
</head>
<body>
  <div></div>
</body>
</html>

开门大吉例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      section{
        width: 600px;
        height: 400px;
        margin: 100px auto;
        background-image: url("https://img10.360buyimg.com/pop/s590x470_jfs/t1/66632/27/5867/97611/5d400157E85345d78/d506e622fb78c807.jpg.webp");
        position: relative;
        border: 1px solid #000;
        perspective: 1500px;/*透视距离 就是眼睛与电脑的距离*/
      }
      .door-l,.door-r{
        width: 50%;
        height: 100%;
        position: absolute;
        top :0;
        background: red;
        transition: all 1s; /*所有的动画效果 在1秒内完成*/
      }
      .door-l{
        border-right: 1px solid #000000;
        left: 0;
        transform-origin: left; /*让左边的盒子绕着左边的线旋转*/
      }
      .door-r{
        border-left: 1px solid #000000;
        right: 0;
        transform-origin: right;/*让右边的盒子绕着右边的线旋转*/
      }
      .door-l::before,.door-r::before{
        content: "";
        position: absolute;
        top:50%;
        width: 20px;
        height: 20px;
        border: 1px solid #000000;
        border-radius: 50%;
        transform:translateY(50%);/*垂直居中*/
      }
      .door-l::before{
        right: 5px;
      }
      .door-r::before{
        left: 5px;
      }
      section:hover .door-l{
        transform: rotateY(-130deg);/*绕着Y轴旋转130度*/
      }
      section:hover .door-r{
        transform: rotateY(130deg);
      }
    </style>
</head>
<body>
  <section>
    <div class="door-l"></div>
    <div class="door-r"></div>
  </section>
</body>
</html>

在这里插入图片描述