❤ css动画animation

林太白

已于 2024-03-15 10:29:27 修改

阅读量239

点赞数

分类专栏：前端原生文章标签： css 前端

于 2023-07-09 12:45:58 首次发布

林太白

本文链接：https://blog.csdn.net/weixin_43615570/article/details/131621020

版权

前端原生专栏收录该内容

11 篇文章 0 订阅

订阅专栏

❤ css常用小技巧

vue之中使用

background-image: url("@/assets/images/loginbg.png");
// 会报图片路径不对的错误,因为vue2.5及以下版本这种写法没问题;vue2.6及以上版本,用的是webpack4.0就会导致这种错误，需要换一种写法:
background-image: url("~@/assets/images/loginbg.png");
// 带~的路径会被webpack解析为require(src/assets/images/loginbg.png)

（13）css box-shadow

网站

https://getcssscan.com/css-box-shadow-examples?ref=producthunt

推荐：
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

（14）使用视频作为背景图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有开发问题可联系作者</title>
</head>
<body>
    <div class="login">
    	<!--
           autoplay: 视频在就绪后马上播放
           loop: 循环播放
           muted: 静音播放
           source标签type属性支持的类型有: video/ogg，video/mp4，video/webm
		-->
		<video class="video-background" autoplay="autoplay" loop="loop" muted="muted">
			<source src="../images/orange_animate.mp4" type="video/mp4" />
		</video>
    </div>   
</body>
<style>
	
.login{
	width: 100%;
	height: 100%;
	display:flex;
	align-items: center;
}

.video-background {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100%;
    width: auto;
    object-fit: cover;
 }

</style>
</html>

（11）实现多行文本省略

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 这里是超出几行省略 */

/* 文字省略部分 */
/* 单行文字 */
.txtellipse1{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 多行省略 */
.txtellipse2{
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 2; //行数
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
.txtellipse3{
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 3; //行数
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

uniapp样式文本省略

width: 250rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #999999;
		line-height: 33rpx;
		float: left;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		display: -webkit-box; //特别显示模式
		-webkit-line-clamp: 2; //行数
		line-clamp: 2;
		-webkit-box-orient: vertical; //盒子中内容竖直排列

（3）实现滑块效果的样式修改

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
	width: 16px;
	height: 16px;
	background-color: #F5F5F5;
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

（4）css禁止文章内容复制

user-select:none;

（5）css动画animation

过渡transition

过渡transition （作用）将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”

transition属性
语法:{transition:属性名持续时间过渡方法}

语法： {transition：属性名持续时间过渡方法}

transition-property    属性的名字（如果是一个属性就带有这个属性的名字；如果是多个属性，属性名之间用逗号隔开；如果是所有属性，用all表示即可。）表示对哪个属性进行变化。
transition-duration     变化持续的时间长度（秒或是毫秒）
transition-timing-function   过渡实现的方式（比如说，先慢后快/先快后慢），具体实现的时候是以函数来实现的。
transition-delay    过渡开始前等待的时间，单位为秒或是毫秒。
transition-timing-function  属性取值

linear 匀速（线型过渡）
ease   先慢后快再慢
ease-in  先慢后快
ease-out 先快后慢
ease-in-out  开头慢结尾慢，中间快

动画animation

在这里插入图片描述

animation 

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}
// 或者
@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}


animation-name：设置需要绑定到元素的动画名称；
animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
animation-timing-function：设置动画的速度曲线，默认为 ease； 
// linear 匀速 
// ease 默认值，动画以低速开始，然后加快，在结束前变慢
// ease-in 动画以低速开始
// ease-out 动画以低速结束
// ease-in-out 动画以低速开始，并以低速结束
// cubic-bezier(n, n, n, n)  使用 cubic-bezier() 函数来定义动画的播放速度，参数的取值范围为 0 到 1 之间的数值


animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
animation-delay：设置动画开始之前的延迟时间，默认为 0；
animation-iteration-count：设置动画被播放的次数，默认为 1；
animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
animation-play-state：设置动画是正在运行还是暂停，默认是 running；
animation：所有动画属性的简写属性。

animation: name(动画名称) duration(完成动画所需要花费的时间) timing-function() delay() iteration-count() direction fill-mode;

name：动画的名称，对应于 @keyframes 规则中定义的动画序列。
duration：动画的持续时间，指定为一个时间值，比如 2s 或 500ms。
timing-function：动画的时间函数，控制动画播放速度的变化，有多种可选值，如 linear、ease-in、ease-out 等。
delay：动画开始前的延迟时间，指定为一个时间值，比如 1s 或 250ms。
iteration-count：动画的迭代次数，可以是一个数字，也可以是 infinite 表示无限循环。
direction：动画的播放方向，可以是 normal（正常顺序播放）或 reverse（反向播放）。
fill-mode：动画完成后元素的样式，可以是 forwards（保持动画结束时的状态）或 backwards（使用动画开始时的状态）。

左右摇晃效果

animation延迟效果

transition: all 2s;
transform: scale(1);
animation: shake 0.5s;

  @keyframes shake {
        0% { transform: translate(0, 0); }
        25% { transform: translate(10px, 0); }
        50% { transform: translate(0, 0); }
        75% { transform: translate(-10px, 0); }
        100% { transform: translate(0, 0); }
}

淡入淡出切换

class="donghua"

.donghua{
  animation:myfirst 2s;
  -webkit-animation:myfirst 2s; /* Safari and Chrome */
}
@keyframes myfirst {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

左右滑动效果

.moveheng {
  width: 2400px;
  height: 220px;
  white-space: nowrap;
  animation-play-state: paused;
  display: flex;
  /* animation: scrollheng 40s linear infinite; */
}

/* 横向动画 */
@keyframes scrollheng {
  0% {
    transform: translateX(-1200px);
    /* 初始位置 */
  }

  100% {
      transform: translateX(1200px);
      /* 回到初始位置，实现无限循环 */
  }
}

鼠标移动进去短暂停止

实现思路
利用鼠标的hover伪类实现动画的暂停css

animation-play-state 的默认值是 running

第一种：
div:hover {
	animation-play-state:paused;
}


第二种：
animation清除动画
div:hover {
	animation-duration: 0s;
}

（6） css 属性- calc() 计算宽高

场景需求：有时候遇到需要动态计算百分比，左侧一个图片占据200px,右侧占据满

<div class="left"></div>
<div class="right"></div>

.left{
	width:200px;
	float:left;
	height:100vh;
	position:fixed;
	background:#ccc;
}
.right{
	width:calc(100% - 200px);
	float:left;
	height:100vh;
	position:fixed;
	background:#000;
}

（7）CSS-visibility 属性

visibility:visible
　　visible：visible属性值定义的元素是可见显示的，是默认的属性值。

visibility:hidden
　　hidden：hidden属性值定义的元素是不可见不显示的，但是元素还会占据原有的空间。

visibility:collapse
　　collapse：collapse属性值定义不同的元素有不同的效果。
　　用在表格元素时：会删除一行或一列，不会影响表格的布局；
　　用在非表格元素上时：和hidden属性值的效果一样；

visibility:inherit
inherit：inherit属性值定义的元素会继承父元素的visibility属性值，就是父元素的visibility属性值是什么，该元素的visibility属性值就是什么。
————————————————

（8）CSS 绘制图形篇

工作中我们也会经常遇见绘制一些图形

① 三角形

左

在这里插入图片描述

 .sanjiao {
        border-left: 1px solid rgba(0, 0, 0, .2);
        width: 0;
        height: 0;
        border-width: 50px;
        border-style: solid;
        border-color: transparent #0099CC transparent transparent;
    }

利用阴影绘制

在这里插入图片描述

 cursor: default;
    margin-left: -11px;
    float: left;
    width: 0;
    height: 0;
    position: absolute;
    box-shadow: 0px 3px 4px #d2d2d2;
    transform: rotate(45deg);
    width: 20px;
    height: 20px;
    border-radius: 4px;
    margin-top: 10px;
    z-index: -1;

仅仅左侧有圆角和阴影的三角形

在这里插入图片描述
思路：
一个圆角正方形，上面一个三角形覆盖

正方形
在这里插入图片描述

三角形
在这里插入图片描述

 <div class="sanjiao1"></div> 
 <div class="sanjiao2"></div>

 .sanjiao1 {
      cursor: default;
      position: absolute;
      box-shadow: -4px 4px 4px #ccc;
      transform: rotate(45deg);
      width: 20px;
      height: 20px;
      border-radius: 4px;
      margin-top: 20px;
      background: #b40e0e;
      visibility: visible;
    }

    .sanjiao2 {
      cursor: default;
      position: absolute;
      margin-top: 13px;
      margin-left: 9px;
      width: 0;
      height: 0;
      border: 17px solid;
      border-color: transparent transparent transparent #ccc;
}

（9）css定位position

绝对定位absolute
相对定位 relative

（12）CSS-var属性

var是一种在CSS中定义和使用的变量，也称为自定义属性。

使用CSS变量var可以将值赋给一个变量，并在代码的不同地方重复使用这个变量。

CSS变量以"–"开头，后面跟着变量的名称，然后是冒号和变量的值。

例如，定义一个名为"primary-color"的CSS变量，并将值设为"blue"：

:root {
  --primary-color: cardblue; //定义一个蓝色
}

h1 {
  color: var(--primary-color);//使用这个蓝色
}

13、 css 英文换行

word-wrap: break-word;

14、好看的渐变色

神秘紫蓝渐变
background: linear-gradient(135deg, #c850c0, #4158d0);


天空蓝渐变
background: linear-gradient(135deg, #a1c4fd, #c2e9fb);


瑰丽紫红渐变
background: linear-gradient(135deg, #ff9a9e, #fad0c4);

温暖阳光渐变
background: linear-gradient(135deg, #f6d365, #fda085);


自然绿意渐变
background: linear-gradient(135deg, #a8e063, #56ab2f);


神秘暗夜渐变
background: linear-gradient(135deg, #292a3a, #536976);


多彩糖果渐变
background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);


星空夜幕渐变
background: linear-gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee);



金属质感渐变
background: linear-gradient(135deg, #272727, #4a4a4a, #6d6d6d, #909090, #b3b3b3, #d6d6d6, #f9f9f9);

雪山冰川渐变
background: linear-gradient(135deg, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7);


热带夏日渐变
background: linear-gradient(135deg, #ffbe0c, #ffda0c, #fff70c, #c2ff0c, #7aff0c);