CSS3效果 发廊灯(渐变效果)

最新推荐文章于 2024-07-08 17:07:45 发布
最新推荐文章于 2024-07-08 17:07:45 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 前端 文章标签： css3 渐变 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			html,body{
				height: 100%;
				overflow: hidden;
			}
			
			#wrap{
				width: 40px;
				height: 300px;
				border: 1px solid;
				margin: 100px auto;
				overflow: hidden;
			}
			#wrap > .inner{
				height: 600px;
				background:repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner"></div>
		</div>
	</body>
	<script type="text/javascript">
		var inner = document.querySelector("#wrap > .inner");
		var flag =0;
		
		setInterval(function(){
			flag++;
			if(flag==300){
				flag=0;
			}
			inner.style.marginTop = -flag+"px";
		},1000/60)
		
	</script>
</html>
Cokeny.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何用纯 CSS 实现酷炫的霓虹灯效果？
祈澈菇凉
07-27 1312
最近关注了油管上的 CSS Animation Effects Tutorial 系列，里面介绍了非常多有意思的 CSS 动效。其中第一个就是很酷炫的霓虹灯效果，这里就实现思路做一个简单的...
前端高级技术之CSS3+Less+BootStrap实战教程
01-06
CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本套视频旨在向学员全面剖析css3中的新增的各类属性与方案。深入了解预处理less，并从源码的角度解读Bootstrap相关实现。CSS3是最新的 CSS 级别,对CSS2.1中的边框、背景、文本、字体等做了扩展。新增2D、3D变换,过渡,动画。新增Flex、响应式、多列布局方案。Less 是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。Bootstrap是一套简洁、直观、强悍的前端开发框架，它可以让web开发更迅速、简单。
CSS 实现动态流光线条效果和颜色渐变效果的实现方法详解
pleaseprintf的博客
06-29 3235
在前端开发中，为网页添加动态效果可以提升用户体验。本文将介绍如何使用 CSS 实现动态流光线条效果和颜色渐变效果，为你的网页增添炫目的视觉效果。通过以上方法，你可以使用 CSS 实现动态流光线条效果和动态流光线条颜色渐变效果，为你的网页增加动感和吸引力。希望本文能对你在实现动态流光线条效果和颜色渐变效果方面有所帮助。如有任何疑问或意见，欢迎留言讨论。需要系统源码或者BiShe加V。
css：repeating-linear-gradient实现托尼老师理发店门口的灯柱子
彭世瑜的博客
12-24 1187
<link rel="stylesheet/less" type="text/css" href="style.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script> <div class="bar"></div> <div class="bar overflow...
css3实现背景动态渐变效果
11-21
在CSS3中，实现背景动态渐变效果是一个非常有趣且实用的特性，它能为网页设计增添更多视觉吸引力。在本篇文章中，我们将探讨如何利用CSS3的`linear-gradient()`函数来创建背景颜色的渐变效果，并通过`@keyframes`...
CSS3下的渐变文字效果实现示例
09-24
在CSS3中，我们可以利用一些新的特性为文字添加丰富的视觉效果，其中渐变文字效果就是一种非常吸引人的设计。本文将详细讲解如何通过两种方法在CSS3下实现渐变文字效果。 首先，我们来看第一种方法，利用`mask-...
css3做的渐变和分列效果
11-24
在CSS3中，渐变和分列效果是两种强大的视觉设计工具，它们为网页设计师提供了更丰富的表现力，使得网页的样式更加现代化和吸引人。接下来我们将深入探讨这两个概念及其应用。 **一、CSS3 渐变效果** CSS3 渐变主要...
纯css3渐变进度条动画特效
07-24
首先，我们要理解"渐变效果"在CSS3中的实现。CSS3提供了两种类型的渐变：线性渐变和径向渐变。线性渐变沿着一个方向从一种颜色平滑过渡到另一种颜色，而径向渐变则从一个圆形或椭圆形的中心向外扩散颜色。在进度条...
纯css3实现走马灯效果
09-25
主要介绍了纯css3实现走马灯效果，主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，有需要的小伙伴参考下
CSS技巧：理发店门口的柱子效果
m0_47883103的博客
10-24 509
核心难点在于动画的首尾如何衔接上，需要自己尝试计算。 <div class="bar"></div> <div class="bar overflow"></div> scss html, body { width: 100%; height: 100%; display: flex; } .bar { position: relative; width: 400px; height: 30px;
HTML+CSS+JavaScript基础
12-19
本阶段内容主要涵盖技术: HTML + CSS + JavaScript基础，同时包括JS函数式框架jQuery
HTML+CSS渐变效果—理发店彩带
zbq764522533的博客
07-27 972
div{ width: 1200px; height: 100px; margin:10px auto; background:linear-gradient( 135deg, black 0%, black 10%, white 10%, white 20%, black 20%, black 30%,
css实现一个按钮
rabbit_moon的博客
01-04 167
效果展示： ## HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>按钮</title> <link rel="stylesheet" href="./sty
CSS理发店招牌
liuhao9999的博客
07-04 189
CSS理发店招牌
html高级篇
qq_48257021的博客
07-04 832
translform:translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）transform:translate3d（x，y，）：其中x、y、z分别指要移动的轴的方向的距离。translform:translateX（100px）：仅仅是在x轴上移动。translform:translateY（100px）：仅仅是在Y轴上移动。·z轴：垂直屏幕注意：往外面是正值，往里面是负值。·x轴：水平向右注意：X右边是正值，左边是负值。
前端面试题24（css3）
God's asylum的博客
07-08 595
回答要点：CSS Sprites 是一种将多个小图标或图像合并到一个大图像中的技术，这样可以减少 HTTP 请求次数，从而提高页面加载速度和性能。
Crypto_30_vHsm_Types.h
07-09
Crypto_30_vHsm_Types
vmware虚拟机安装教程.pdf
最新发布
07-10
VMware虚拟机安装教程是一个详细且系统的过程，涵盖了从下载、安装到配置虚拟机的多个步骤。以下是一个详尽的VMware虚拟机安装教程，旨在帮助用户顺利搭建自己的虚拟环境。
css 设置border边框颜色渐变效果
12-30
以下是两种CSS设置边框颜色渐变效果的例子： 1. 使用background-image和linear-gradient创建渐变边框： ```css .gradient-border { border: 2px solid; border-image: linear-gradient(to right, red, blue); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值