①折扇效果（2d动画）

②资料卡

③定格轮播（鼠标移上去会暂停）

度数，速度，颜色之类的可以自己再调整

效果图如下

<!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>*{margin: 0;padding: 0;}ul{list-style-type:none;}ul{margin: 10px auto;width: 600px;height: 400px;border: 4px solid gray;position: relative;    }li{width: 50px;height: 200px;position: absolute;left: 50%;margin-left: -30px;bottom: 30px;text-align: center;transform-origin: bottom center;transition: all 3s linear;border-radius: 5px;box-shadow: 2px 2px 2px black;}   ul li:nth-child(1),ul li:nth-child(13){ background-color: purple;}ul li:nth-child(2),ul li:nth-child(12){ background-color:blueviolet;}ul li:nth-child(3),ul li:nth-child(11){ background-color:rgb(226, 43, 226);}ul li:nth-child(4),ul li:nth-child(10){ background-color:pink;}ul li:nth-child(5),ul li:nth-child(9){ background-color:rgb(233, 108, 129);}ul li:nth-child(6),ul li:nth-child(8){ background-color:rgb(228, 66, 93);}ul li:nth-child(7){ background-color:rgb(167, 49, 69);}ul:hover li:nth-child(13){transform: rotate(-85deg);}ul:hover li:nth-child(12){transform: rotate(-75deg);}ul:hover li:nth-child(11){transform: rotate(-60deg);}ul:hover li:nth-child(10){transform: rotate(-45deg);}ul:hover li:nth-child(9){transform: rotate(-30deg);}ul:hover li:nth-child(8){transform: rotate(-15deg);}ul:hover li:nth-child(6){transform: rotate(15deg);}ul:hover li:nth-child(5){transform: rotate(30deg);}ul:hover li:nth-child(4){transform: rotate(45deg);}ul:hover li:nth-child(3){transform: rotate(60deg);}ul:hover li:nth-child(2){transform: rotate(75deg);}ul:hover li:nth-child(1){transform: rotate(85deg);}</style>
</head>
<body><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</body>
</html>

②资料卡

<!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>*{margin: 0;padding: 0;}img{display: block;}.box{width: 350px;overflow: hidden;margin: 0 auto;position: relative;}.box img{width: 100%;transition: all 1s}.box:hover img{transform: translateX(50px);opacity: 0.5;            }.box h2{position:absolute;left: 50px;top: 10px;color: wheat;transition: all 1s 0.3s;}.box:hover h2{transform: translateX(100px);}.box p{position: absolute;left:50px;width: 100px;color: white;background: rgb(108, 108, 190);}.box .p1{top: 60px;transform: translateY(300px);transition: all 1s;}.box:hover .p1{transform: translateY(0px);            }.box .p2{top: 110px;transform: translateY(400px);transition: all 1s;}.box:hover .p2{transform: translateY(0px);}.box .p3{top:160px;transform: translateY(400px);transition: all 1s;}.box:hover .p3{transform: translateY(0px);         }</style>
</head>
<body><div class="box"><img src="../tu/7.jpg" alt=""><h2>aespa</h2><p class="p1">black manba</p><p class="p2">savage</p><p class="p3">forever</p></div>
</body>
</html>

③定格轮播（鼠标移上去会暂停）

<!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>* {margin: 0;padding: 0;}.container {/* 固定高宽 */width: 640px;height: 300px;margin: 0 auto;overflow: hidden;}.swiper img {width: 640px;height: 300px;}.slider {float: left;}.swiper {width: 5000px;/* 只要大于图片加起来的宽度就行 */animation: swipers 8s linear infinite;}@keyframes swipers {/* 10,43,76实现图片定格*/0% {transform: translateX(0);}10% {transform: translateX(-640px);}33% {transform: translateX(-640px);}43% {transform: translateX(-1280px);}66% {transform: translateX(-1280px);}76% {transform: translateX(-1920px);}100% {transform: translateX(-1920px);}}.swiper:hover{animation-play-state: paused;}</style>
</head>
<body><div class="container"><div class="swiper"><div class="slider"><img src="../tu/5.jpg" alt=""></div><div class="slider"><img src="../tu/6.jpg" alt=""></div><div class="slider"><img src="../tu/7.jpg" alt=""></div><!-- 实现无缝轮播，第一张和最后一张图片一样 --><div class="slider"><img src="../tu/5.jpg" alt=""></div></div></div>
</body></html>

④三角形菜单栏

实现原理：先定义一个盒子，设置宽高，将border设置成不同的宽度和颜色

会出现以上效果，可以想象，当每个色彩栏中间的宽度不断缩小，就变成了三角形，当div的高宽变成0时，就变成了如图所示，将其他颜色改变为背景色是不可取的，如果背景色改变一眼就能看出，将其他改为transparent即可

效果图

<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>.box {width: 100px;height: 50px;line-height: 50px;text-align: center;background: lightblue;color: white;}span {width: 0;height: 0;display: inline-block;border: 5px solid transparent;  /*  变三角形 */border-top: 5px solid white;position: relative;   /*给三角形一个固定位置变化*/top: 2.5px;  transition: 0.3s; /* 0.3s变化*/}.box:hover span {border: 5px solid transparent;/*  变三角形 */border-bottom: 5px solid white;position: relative;/*给三角形一个固定位置变化*/top: -2px;}</style>
</head><body><div class="box"> 导航<span></span></div>
</body></html>

纯CSS简单案例合集（折扇效果，资料卡，定格轮播，菜单三角形）相关推荐

css简单样式（旋转正方形、纸片旋转、轮播图3D、简单轮播图）
旋转正方形 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
常见Z纯CSS小样式合集（三角形）
三角形 .sanjiao{ width:0px; height: 0px; overflow: hidden; border-width: 100px; border-color: transpare ...
八大医疗电子实用案例合集
八大医疗电子实用案例合集生命健康无小事,需要我们时刻注意,尤其是在高节奏生活的今天,加班熬夜导致猝死.因为无暇顾及导致老人走丢等问题频频发生,生命健康安全监测不容忽视,整理了一些医疗电子相关的设计方 ...
css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧
写样式,毕竟每个雨滴都长得不一致嘛.使用预处理器除了可以帮助我们减少工作量之外,还可以使用预处理器中的循环.变量等.最主要的是可以使用随机函数产生的随机值,让我们不需要单独处理上百个雨滴. 有关于HA ...
企业微信品牌私域运营案例合集
互联网下半场,正进入争夺流量.想尽办法抢占用户时间与心智的决赛圈.随着流量价格日益攀升,如何拉新.转化从而实现营收增长是企业亟待解决的问题.与此同时,私域流量一词也逐渐走进大众视野,从驻足观望到不得不 ...
# java swing，awt图形化界面代码案例合集
文章目录 java awt,swing图形化界面代码案例合集 java awt,swing图形化界面代码案例合集 package Demo1; import java.awt.*; public cl ...
html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
试用php语言写气泡,如何用纯CSS实现语音聊天气泡框效果
本篇文章主要给大家介绍怎么用纯css实现语音聊天气泡框效果. 推荐参考教程:<CSS教程> 语音聊天气泡框效果,在我们日常生活中或者社交网站上,都是非常常见且流行的一种对话框效果. 比如微 ...
华为云计算产品白皮书与案例合集
华为云计算产品白皮书与案例合集我国云计算发展一直"高烧"不退,云计算市场也是暗潮涌动,云计算已经成为众多互联网公司竞相角逐的领域.华为FusionCloud Omni Solut ...

纯CSS简单案例合集（折扇效果，资料卡，定格轮播，菜单三角形）

②资料卡

③定格轮播（鼠标移上去会暂停）

④三角形菜单栏

纯CSS简单案例合集（折扇效果，资料卡，定格轮播，菜单三角形）相关推荐

最新文章

热门文章