css3动画应用css3动画应用css3动画应用css3动画应用css3动画应用css3动画应用css3动画应用css3

1、按钮边框

live.csdn.net/v/309354?sp…

首先实现正常边框按钮，其次按钮相对定位，因为旋转的内容需要绝对定位，旋转内容做伪元素处理，z-index设置负数是为了把按钮文字显示出来，定位一半一半是把长方块中心点放按钮正中，在这里插入图片描述

在这里插入图片描述

变形原点默认是形状的正中心 transform-origin修改原点在这里插入图片描述

给按钮设置overflowhidden 再去设置第二个伪类

在这里插入图片描述

after居中，出现缝隙

2、模拟Material文本框

live.csdn.net/v/309411?sp… 在这里插入图片描述

在这里插入图片描述

input撑满红色边框

在这里插入图片描述

兄弟元素在这里插入图片描述

在这里插入图片描述

考虑写文字和没写文字情况，我以为要js监听…… css就能做 input标签加required验证，当require时，使用:valid，即通过验证时

在这里插入图片描述

3、倾斜按钮

在这里插入图片描述

要不直接切图算了…… 首先左上右下圆角，按钮相对定位在这里插入图片描述

加径向渐变，radial-gradient（）表示从中心点开始扩散在这里插入图片描述

修改圆心坐标至左上在这里插入图片描述

圆心右下角是circle at 100% 100% 整个按钮倾斜transform:skew(-30deg) 在这里插入图片描述

假如文字不想倾斜可以反方向skew，或者css有个继承样式的属性，把字体的设置为unset不继承

4、文字边框

在这里插入图片描述其实就是依次写八个方向的阴影，字体颜色是黑色但是阴影交界点不太平滑，且无法支持文字透明使用-webkit-text-stroke:2px #fff;可以在文字透明时使用

img-blog.csdnimg.cn/direct/bd2e…

/* 设置变形原点，我们以元素底部的中心位置为变形原点来旋转。*/
  transform-origin: center bottom;
  /* 景深 40px 旋转 30deg */
  transform: perspective(40px) rotateX(30deg);

5、卡片翻转

live.csdn.net/v/309879?sp…

//截取一半
    <style>
        .card{
            position: relative;
            /*3D效果，定义 3D 元素距视图的距离*/
            perspective: 500px;
        }
        .face{
            position: absolute;
            transition: 0.3s;
            /*背面可见度*/
            backface-visibility: hidden;
        }
        .card:hover .face{
            transform: rotateY(-180deg);
        }
		//背面处理同上
        .back{
            position: absolute;
            transform: rotateY(180deg);
            backface-visibility: hidden;
            transition: 0.3s;
        }
        .card:hover .back{
            transform: rotateY(0);
        }
    </style>
</head>
<body>
    <div class="card">
        <img src="../Desktop/main_level2_pic_1.jpg" alt="" class="face">
        <img src="../Desktop/main_level2_pic_2.jpg" alt="" class="back">
    </div>
</body>

6、圆形放大效果

live.csdn.net/v/309882?sp…

在这里插入图片描述思路是搞个div直接border-radius，border，width从0开始变大

下面是第二种方法在这里插入图片描述中间层就透明度低一点最顶层图片直接继承

 		.avatar::after{
            background: inherit;
            /*裁剪，0%是半径,50% 50%是圆心*/
            clip-path: circle(0% at 50% 50%);
            transition: 0.3s;
        }
        .avatar:hover::after{
            clip-path: circle(50% at 50% 50%);
        }

7、视频文字特效

文字是视频投影在这里插入图片描述关键代码

.txt{
	background-color: #fff;
            /*表示色彩的混合，screen混合方式特点，顶层颜色如果是黑色，呈现的是底层的颜色，就视频；顶层背景颜色是白色，跟后面颜色一混合还是白色。涉及差值算法*/
            mix-blend-mode: screen;
}

8、立体文字特效（这个可以不看）

在这里插入图片描述文字可编辑

9、代码雨

幸好选择了前端。 live.csdn.net/v/310742?sp…

<body>
    <canvas id="bg"></canvas>
    <script src="./1.js"></script>
</body>

const cvs = document.getElementById('bg')
//获取窗口尺寸
const width = window.innerWidth,
        height = window.innerHeight
//设置canvas窗口尺寸
cvs.width = width;
cvs.height = height

// 获取绘制上下文
const ctx = cvs.getContext('2d')

// 列宽
const columnWidth = 20

//列数
const columnCount = Math.floor(width / columnWidth)

// 记录每列写到了第几个文字
const columnNextIndexes = new Array(columnCount)
//一开始肯定是从第一个[1,1,1]往下画
columnNextIndexes.fill(1)


function getRandomColor() {
    const fontColors = [
        '#33b5e5',
        '#0099cc',
        '#aa66cc',
        '#9933cc',
        '#99cc00',
        '#669900',
        '#ffbb33',
        '#ff8800',
        '#ff4444',
        '#cc0000',
    ]
    return fontColors[Math.floor(Math.random() * 10)]
}
function getRandomChar() {
    const str = 'console.log("Hello World")'
    return str[Math.floor(Math.random() * str.length)]
}
function draw() {
    ctx.fillStyle = 'rgba(255,255,255,0.1)'//渐变
    ctx.fillRect(0,0,width,height)//填充矩形
    const fz = 20
    ctx.fillStyle = getRandomColor()//颜色
    ctx.font = `${fz}px "Roboto Mono"`//文字
    for (let i = 0; i < columnCount; i++) {
        const x = i * columnWidth
        const y = fz * columnNextIndexes[i]
        ctx.fillText(getRandomChar(),x,y)//填充颜色和坐标
        if (y > height && Math.random() > 0.99){//一屏，防止超出无限绘制，Math.random() > 0.99导致了不规则效果，1%的随机性归零
            columnNextIndexes[i] = 0
        }else {
            columnNextIndexes[i]++
        }

    }
}

// 定时渲染
setInterval(draw,40)
// 这段代码是一个绘制字符雨效果的函数。函数首先设置画布的填充样式为半透明白色，然后填充整个画布。接下来，定义了一个变量fz，表示每个字符的大小。然后设置画布的填充样式为一个随机颜色，并设置字体为"Roboto Mono"，大小为fz。接下来，通过循环绘制字符雨效果。循环中，根据每一列的索引值计算出字符的x坐标和y坐标，然后在对应位置绘制一个随机字符。如果字符的y坐标超过了画布的高度，并且随机数大于0.99，则将该列的索引值重置为0，否则将索引值加1。
//  代码步骤解释：
// 1. 首先，设置画布的填充样式为半透明白色，使用rgba(255,255,255,0.1)表示。
// 2. 然后，使用ctx.fillRect(0,0,width,height)方法填充整个画布，将画布清空。
// 3. 定义一个变量fz，表示每个字符的大小，这里设置为20。
// 4. 设置画布的填充样式为一个随机颜色，使用getRandomColor()函数生成随机颜色。
// 5. 设置字体为"Roboto Mono"，大小为fz，使用ctx.font属性设置。
// 6. 进入循环，循环次数为columnCount，表示列数。
// 7. 在循环中，根据当前列的索引值计算出字符的x坐标和y坐标，分别为i * columnWidth和fz * columnNextIndexes[i]。
// 8. 使用ctx.fillText(getRandomChar(),x,y)方法，在计算出的位置绘制一个随机字符，使用getRandomChar()函数生成随机字符。
// 9. 判断字符的y坐标是否超过了画布的高度，并且随机数是否大于0.99。
// 10. 如果满足条件，将该列的索引值重置为0，表示字符从顶部重新开始下落。
// 11. 如果不满足条件，将该列的索引值加1，表示字符继续下落。
// 12. 循环结束，函数执行完成。

10、图片九宫格（鼠标移入后拼合）

在这里插入图片描述

思路就是背景position定位，三组一设置

    <style>
        .img_container{
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
        }
        .img1{
            box-shadow: inset 0 0 0 1px #fff;
            transition: 0.5s;
            background-size: 300px 300px;
            background-image: url(./headGif.gif);
        position: relative;
        }
        .img1:nth-child(3n+1){
            left: -20px;
            background-position-x: 0;
        }
        .img1:nth-child(3n+2){
            left: 0;
            background-position-x: -100px;
        }
        .img1:nth-child(3n){
            left: 20px;
            background-position-x: -200px;
        }
        .img1{
            top: 20px;
            background-position-y: -200px;
        }
        .img1:nth-child(-n+6){
            top: 0;
            background-position-y: -100px;
        }
        .img1:nth-child(-n+3){
            top: -20px;
            background-position-y: 0;
        }
        .img_container:hover .img1{//鼠标移入拼合
            left: 0;
            top: 0;
            box-shadow: inset 0 0 0 0 #fff;
        }
    </style>
</head>
<body>
<div class="img_container">
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
</div>

11、连续光影

live.csdn.net/v/311294?sp…

		<div class="text-area">
			<span>文</span>
			<span>字</span>
		    <span>连</span>
		    <span>续</span>
		    <span>光</span>
		    <span>影</span>
		</div>

	span {
		font-size: 40px;
	    color:#faebdf;
	    animation:shadowing 1s ease-in-out infinite alternate;//alternate交替反向变换
	}
	@keyframes shadowing{
		to{
			color: #ff0266;
			text-shadow:20px 0 70px #ff0266;
		}
	}
			span:nth-child(n + 1){
			    animation-delay:0.2s
			}
			span:nth-child(n + 2){
			    animation-delay:0.4s
			}
			span:nth-child(n + 3){
			    animation-delay:0.6s
			}
			span:nth-child(n + 4){
			    animation-delay:0.8s
			}
			span:nth-child(n + 5){
			    animation-delay:1s
			}
			span:nth-child(n + 6){
			    animation-delay:1.2s
			}
	//有sass预处理器可以这么写
	span {
	  @for $i from 1 through 6 {
	    &:nth-child(n +#{$i}) {
	      animation-delay: #{$i*0.2}s;
	    }
	  }
	}

blog.csdn.net/m0_47901007…

12、奥运五环

在这里插入图片描述

//很抽象
 /* 准备工作 */
        .olympic-rings {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            position: relative;
            transform-style: preserve-3d;
        }
        /* 画圆 */
        .olympic-circle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            position: absolute;
        }
        /* 第一个圆，蓝色 */
        .olympic-circle.blue {
            top: 10px;
            left: -120px;
            border: 20px solid blue;
            transform: rotateX(-1deg);
        }
        /* 第二个圆，黄色 */
        .olympic-circle.yellow {
            top: 0;
            left: 270px;
            border: 20px solid yellow;
            transform: rotateX(-1deg);
        }
        /* 第三个圆，黑色 */
        .olympic-circle.black {
            top: 80px;
            left: 0px;
            border: 20px solid black;
            transform: rotateX(1deg);
        }
        /* 第四个圆，绿色 */
        .olympic-circle.green {
            top: 80px;
            left: 140px;
            border: 20px solid green;
            transform: rotateX(1deg);
        }
        /* 第五个圆，红色 */
        .olympic-circle.red {
            top: 0px;
            left: 70px;
            border: 20px solid red;
            transform: rotateX(-2deg);
        }


<div class="olympic-rings">
    <div class="olympic-circle blue"></div>
    <div class="olympic-circle black"></div>
    <div class="olympic-circle red"></div>
    <div class="olympic-circle yellow"></div>
    <div class="olympic-circle green"></div>
</div>

13、重复渐变的边框

在这里插入图片描述 lorem+tab可以随机生成一串字

www.bilibili.com/video/BV1y1…

.card {
            width: 300px;
            margin: 0 auto;
            padding: 5px;
            background: repeating-linear-gradient(
                    -45deg,
                    #e8544d,
                    #e8544d 10px,
                    #fff 10px,
                    #fff 20px,
                    #75adf8 20px,
                    #75adf8 30px,
                    #fff 30px,
                    #fff 40px
            ) -20px -20px/200% 200%;
            transition: 0.5s;
        }

        .card:hover {
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            background-position: 0 0;
        }

        .container {
            padding: 10px;
            background: #fff;
        }
<div class="card">
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto aspernatur, dicta doloremque earum
        eligendi est ex ipsum, magni molestiae mollitia neque obcaecati officia optio quam vel voluptatem? Doloribus,
        molestias?`
    </div>
</div>

问题是，中间如何保持透明，我们现在是设置了#fff;

14、磨砂玻璃

filter: blur(5px);
backdrop-filter: blur(5px);

filter 在这里插入图片描述 backdrop-filter

www.bilibili.com/video/BV1dh…

* {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url('xxxxxxxxx');
            background-image: url(https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg);
            /* 把图片大小设为全部铺满 */
            background-size: cover;
            height: 100vh;
        }

        .model {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            /* 过渡效果，持续时间2S */
            transition: all 2s;
            border-left: 5px solid #333;
            /* 灰度设置，被遮盖的部分全部变为灰色 */
            backdrop-filter: grayscale(1);
        }

        body:hover .model {
            width: 0;
        }
        <div class="model"></div>

15、网格布局实现瀑布流（兼容性不好）

用容器把内容包起来

.container{
	display:grid;//网格布局
	grid-template-columns:repeat(4,1fr);
	grid-gap:10px;
	grid-template-rows:masonry;//砖块布局，兼容性不好
}
img{
	width:100%;
	display:block;
}

呃，补补网格布局吧……

在这里插入图片描述

兼容性不好，且需要打开设置在这里插入图片描述后来我的移动端是应用了v-masonry第三方插件

import {VueMasonryPlugin} from "vue-masonry";
Vue.use(VueMasonryPlugin);

<div v-masonry transition-duration="0.3s" item-selector=".item" class="waterfallFlow"
               fit-width="true" origin-left="true" gutter="10">
	<div v-masonry-tile class="item" v-for="(item, i) in list" :key="i"></div>
</div>

16、立体文字

在这里插入图片描述

增加伪元素，倾斜，层级，缩放scale，位置，模糊filterblur，远处淡近处深-webkit-mask-image:linear-gradient(transparent,#000)

17、elementUI select下拉渐变效果

在这里插入图片描述

<style>

        .text-select, input, .select {
            width: 200px;
            box-sizing: border-box;
        }

        .select {
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            line-height: 30px;
            color: #333;
            border: 1px solid #767676;
            margin-top: -2px;
            padding: 0 20px;

            /*css注释的是plan A*/
            max-height: 0;
            transition: 1s;
            /*过度的是，实际高度，不是最大高度，所以最大高度设置值越高，这个动画消失就会出现延迟*/

            /*plan B*/
            /*z-index: -1;*/
            /*transform: scaleY(0);*/
            /*transform-origin: 0 0;*/
            /*transition: 1s;*/
        }

        .text-select .text:focus ~ .select {
            max-height: 1000px;
            /*transform: scaleY(1);*/
        }
    </style>


<div class="text-select">
    <input type="text" class="text">
    <div class="select">
        <span>Lorem ipsum dolor sit.</span>
        <span>Ea optio quae ut?</span>
        <span>Dolore explicabo quae tempora!</span>
        <span>Dolor facilis neque quas.</span>
    </div>
</div>
<script>
    // // plan C
    // const input = document.querySelector('.text')
    // const select = document.querySelector('.select')
    // input.onfocus = () => {
    //     select.style.transition = 'none'
    //     select.style.height = 'auto'
    //     const height = select.offsetHeight;
    //     select.style.height = '0';
    //     select.offsetHeight;//强制渲染页面，触发页面重排
    //     select.style.transition = '1s'
    //     select.style.height = height + 'px'
    // }
    // input.onblur = () => {
    //     select.style.transition = '1s'
    //     select.style.height = '0'
    // }
</script>

18、拖拽排序

www.bilibili.com/video/BV1i8…

详情参考个人QQ空间

19、故障风格

div {
            background: url("https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg"), #0ff;
            width: 1500px;
            height: 844px;
            /*背景混合模式*/
            background-blend-mode: lighten;
            position: relative;
        }

        div::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: url("https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg"), #f00;
            background-blend-mode: lighten;
            /*整体混合模式*/
            mix-blend-mode: darken;
            margin-left: 10px;
            animation: shake 30ms infinite;
        }
        @keyframes shake {
            50%{
                transform: translateX(0.1%);
            }
        }

在这里插入图片描述题外

 /*对比度*/
/*filter: contrast(3);*/

20、下划线

www.bilibili.com/video/BV1rp…

这边需要用span不能用div

	span {
            background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
            color: #333;
            /*背景重复*/
            background-size: 0 2px;
            transition: background-size 1300ms;
        }

        span:hover {
            /*和上面的right决定了消退的方向*/
            background-position-x: left;
            background-size: 100% 2px;
        }

21、交融展开

www.bilibili.com/video/BV1cG…

.content {
            background-color: #000;
            filter: contrast(30);
        }

        span {
            font-size: 100px;
            color: #fff;
            animation: letter 3s forwards;
        }

        @keyframes letter {
            from {
                letter-spacing: -50px;
                filter: blur(10px);
            }
            to {
                letter-spacing: 10px;
                filter: blur(0);
            }
        }

22、文字穿透

在这里插入图片描述

body {
    --bg: url(https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg) no-repeat;
    background: var(--bg);
}

.box {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100vw;
    height: 100vh;
}

h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12vw;
    text-stroke: 1px #fff;
    -webkit-text-stroke: 1px #fff;
    background: var(--bg);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
<div class="box">
    <h1>ABCDEFG</h1>
</div>

23、图片主色调

www.bilibili.com/video/BV148… vue3

<template>
  <div class="box">
    <div class="item" v-for="item in 4" :key="item" :class="item === hoverIndex ? 'over' : ''">
      <img crossorigin="anonymous" @mouseenter="onMouseEnter($event.target, item)" @mouseleave="onMouseLeave"
           :src="`https://picsum.photos/438/300?id=${item}`" alt=""
           :style="{ opacity: hoverIndex === -1 ? 1 : item === hoverIndex ? 1 : 0.2 }">
    </div>
  </div>
</template>

<script setup>
import ColorThief from "colorthief";
import {ref} from "vue";
const colorThief = new ColorThief()
const hoverIndex = ref  (-1) //设置变换样式的响应式变量
const html = document.documentElement
const onMouseEnter = async (img, i) => {
  hoverIndex.value = i //将响应式变量改成自身，样式就生效了
  const colors = await colorThief.getPalette(img, 3)//得到调色盘，前三种主要颜色，返回promise
  console.log(colors); //获取到三个数组，将其数组改造成rgb格式
  const [c1, c2, c3] = colors.map((c) => `rgb(${c[0]},${c[1]},${c[2]})`)//将三个颜色解构出来
  html.style.setProperty('--c1', c1) //给html设置变量，下面有步骤
  html.style.setProperty('--c2', c2)
  html.style.setProperty('--c3', c3)
}
const onMouseLeave = () => {
  hoverIndex.value = -1
  html.style.setProperty('--c1', '#fff')
  html.style.setProperty('--c2', '#fff')
  html.style.setProperty('--c3', '#fff')
}

</script>
<style>
.box{
  background-image: linear-gradient(to bottom, var(--c1), var(--c2),var(--c3));
}
</style>
<style lang="scss" scoped>
.box {
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  background-color: rgb(var(--c1), var(--c2), var(--c3));
}

.item {
  border: 1px solid #fff;
  margin-top: 50px;
  transition: 0.8s;
  padding: 5px;
  box-shadow: 0 0 10px #00000058;
  background-color: #fff;
}

img {
  transition: .8s;
}
</style>

24、3D卡片效果

www.bilibili.com/video/BV1Sr…

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
}

.card {
    position: relative;
}

img {
    position: absolute;
    left: 0;
    transition: 0.5s;
}

.belowImg {
    z-index: 1;
}

.aboveImg {
    z-index: 2;
    opacity: 0;
    left: 100px;
}

.card:hover .belowImg {
    transform: perspective(500px) rotateX(25deg);
    /*X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色*/
    box-shadow: 0 35px 35px -8px rgba(0, 0, 0, 0.75);
}

.card:hover .aboveImg {
    opacity: 1;
    /*perspective，近大远小*/
    transform: perspective(500px) translate3d(0, -50px, 100px);
}
<div class="card">
    <img src="https://picsum.photos/400/300?r=1" alt="" class="belowImg">
    <img src="https://picsum.photos/200/200?r=2" alt="" class="aboveImg">
</div>

25、渐变阴影

裁剪思路

<div class="card">
    <div class="belowImg"/>
</div>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
    --sx: 120px;
    --sy: 120px;
}

.belowImg {
    position: relative;
    width: 400px;
    height: 300px;
    border: 1px solid red;
}

.belowImg::after {
    position: absolute;
    content: '';
    left: var(--sx);
    top: var(--sy);
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(20px);
    background: conic-gradient(
            #ffd700,
            #f79d03,
            #ee6907,
            #e6390a,
            #de0d0d,
            #d61039,
            #cf1261,
            #c71585,
            #cf1261,
            #d61039,
            #de0d0d,
            #ee6907,
            #f79d03,
            #ffd700,
            #ffd700,
            #ffd700
    );
    /*vmax指的是视口高度和宽度取最大值*/
    /*clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,*/
    /*        0 0,0 100%,100% 100%,100% 0,0 0px);*/
    /*    假如有便宜的话，left和top*/
    clip-path: polygon(-100vmax -100vmax,100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax,
    calc(0px - var(--sx)) calc(0px - var(--sy)),
    calc(0px - var(--sx)) calc(100% - var(--sy)),
    calc(100% - var(--sx)) calc(100% - var(--sy)),
    calc(100% - var(--sx)) calc(0px - var(--sy)),
    calc(0px - var(--sx)) calc(0px - var(--sy)));
}

26、旋转中的视察效果

www.bilibili.com/video/BV1Uh…

.card {
    width: 300px;
    height: 300px;
    display: grid;
    margin: 120px auto;
    /*设置container元素的3列，宽度为1fr*/
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    grid-template:
            "A A B"
            "C D B"
            "C E E";
    grid-gap: 10px;
    /*父元素顺时针旋转，子元素逆时针旋转*/
    --r:360deg;
}
.item{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
}
.item img{
    /*利用变量，复用动画*/
    --r:-360deg;
    /*设置img元素旋转的图像尺寸，解决旋转过程中的白边问题*/
    width: 230%;
    height: 230%;
    /*保持图像的宽高比*/
    object-fit: cover;
}
.card,.item img{
    animation: rotation 10s linear infinite;
}

.item:nth-child(1){
    grid-area: A;
}
.item:nth-child(2){
    grid-area: B;
}
.item:nth-child(3){
    grid-area: C;
}
.item:nth-child(4){
    grid-area: E;
}
.item:nth-child(5){
    grid-area: D;
}
@keyframes rotation {
    to{
        transform: rotate(var(--r));
    }
}


<div class="card">
    <div class="item"><img src="https://picsum.photos/300/200?r=1" alt=""></div>
    <div class="item"><img src="https://picsum.photos/300/200?r=2" alt=""></div>
    <div class="item"><img src="https://picsum.photos/300/200?r=3" alt=""></div>
    <div class="item"><img src="https://picsum.photos/300/200?r=4" alt=""></div>
    <div class="item"><img src="https://picsum.photos/300/200?r=5" alt=""></div>
</div>

27、文字适应纹理

svg滤镜

置换滤镜作用

28、异形布局

这个很基础

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 90%;
            margin: 2em auto;
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .column {
            flex: 1 1 0;
            display: flex;
            align-items: center;
        }

        .content {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .content img {
            width: 100%;
            box-shadow: 0 0 3px #fff;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .content img:hover {
            transform: scale(1.1);
            /* 鼠标悬停时放大1.1倍 */
        }

        .content_img {
            position: relative;
        }

        .content_tag {
            position: absolute;
            right: 6px;
            top: 6px;
            background: linear-gradient(128deg, #ff5b15, #ff5967);
            color: #fff;
            border-radius: 2px 10px;
            padding: 0 6px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            z-index: 1;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="column">
        <div class="content">
            <div class="content_img">
                <div class="content_tag">五一</div>
                <img src="https://picsum.photos/400/600.webp?r=1" alt="" />
            </div>
            <div class="content_img">
                <div class="content_tag">劳动节</div>
                <img src="https://picsum.photos/400/400.webp?r=01" alt="" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="content">
            <div class="content_img">
                <img src="https://picsum.photos/400/400?r=2" alt="" />
            </div>
            <div class="content_img">
                <img src="https://picsum.photos/400/600?r=02" alt="" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="content">
            <div class="content_img">
                <img src="https://picsum.photos/400/400?r=3" alt="" />
            </div>
            <div class="content_img">
                <img src="https://picsum.photos/400/400?r=03" alt="" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="content">
            <div class="content_img">
                <img src="https://picsum.photos/400/600?r=4" alt="" />
            </div>
            <div class="content_img">
                <img src="https://picsum.photos/400/400?r=04" alt="" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="content">
            <div class="content_img">
                <img src="https://picsum.photos/400/600?r=5" alt="" />
            </div>
            <div class="content_img">
                <img src="https://picsum.photos/400/400?r=05" alt="" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="content">
            <div class="content_img">
                <img src="https://picsum.photos/400/400?r=6" alt="" />
            </div>
            <div class="content_img">
                <img src="https://picsum.photos/400/400?r=06" alt="" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="content">
            <div class="content_img">
                <img src="https://picsum.photos/400/400?r=7" alt="" />
            </div>
            <div class="content_img">
                <img src="https://picsum.photos/400/600?r=07" alt="" />
            </div>
        </div>
    </div>
</div>
</body>
</html>

29、鼠标移动的高亮边框效果

图片 img-blog.csdnimg.cn/direct/cc3b…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: #000;
        }
        .card-wrap {
            display: grid;
            margin: 0 auto;
            width: 90%;
            margin-top: 1em;
            color: #f0f0f0;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            text-align: center;
        }
        .card {
            aspect-ratio: 4/3;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, .1);
            position: relative;
            overflow: hidden;
        }
        .card .inner {
            position: absolute;
            inset: 2px;
            background-color: #222;
            border-radius: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
        }
        .card::before {
            content: "";
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            inset: 0;
            background: radial-gradient(closest-side circle, rgba(255, 255, 255, 0.6) 0%, transparent);
            border-radius: inherit;
            transform: translate(var(--x, -1000px), var(--y, -1000px));
        }
    </style>
</head>
<body>
<div class="card-wrap">
    <div class="card">
        <div class="inner">wish you every success</div>
    </div>
    <div class="card">
        <div class="inner">wish you every success</div>
    </div>
    <div class="card">
        <div class="inner">wish you every success</div>
    </div>
    <div class="card">
        <div class="inner">wish you every success</div>
    </div>
    <div class="card">
        <div class="inner">wish you every success</div>
    </div>
    <div class="card">
        <div class="inner">wish you every success</div>
    </div>
</div>

<script>
    const cardWrapEl = document.querySelector(".card-wrap")
    const cardEls = document.querySelectorAll(".card")

    cardWrapEl.onmousemove = function (e) {
        for (const card of cardEls) {
            // getBoundingClientRect提供了元素的大小及其相对于视口的位置。
            const react = card.getBoundingClientRect()
            const x = e.clientX - react.left - react.width / 2
            const y = e.clientY - react.top - react.height / 2
            card.style.setProperty('--x', `${x}px`)
            card.style.setProperty('--y', `${y}px`)
        }
    }
</script>
</body>
</html>

30、文字环绕

弧形环绕

图img-blog.csdnimg.cn/direct/d866…

MDN developer.mozilla.org/zh-CN/docs/…

shape-outside:circle

题外object-fit: cover;保留图片原有比例