`

css3 伪类伪元素的实例

    博客分类：
  • css
 
阅读更多 
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>css3 伪类伪元素的实例</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style>
		div {
			position: relative;
			left: 3%;
			padding: 5px;
		}

		ul {
			list-style: none
		}

		li {
			list-style: none;
			display: inline-block;
		}

		li:not(:last-child)::after {
			content: '   |'
		}

		.div2 {
			width: 200px;
			height: 100px;
			background: red;

		}

		.div2::before {
			display: inline-block;
			border: 5px solid transparent;
			border-right-color: black;
			position: relative;
			content: '';
			left: -15px;
		}

		.div3::before {
			content: '☌';
			transform: rotate(180deg);
			float: left;
			font-size: 25px;
			position: absolute;
			left: 10px;
			line-height: 30px;
		}

		.div3 input {
			display: block;
			padding-left: 25px;
			height: 30px;
			box-sizing: border-box;
		}

		button {
			border: none;
			outline: none;
			color: white;
			font-size: 1.2em;
			cursor: pointer;
			border-radius: 100px;
			position: relative;
			appearance: none;
			background: #f72359;
			padding: 1em 2em;
			overflow: hidden;
		}

		button span {
			position: relative;
		}

		button::before {
			--size: 0;
			content: '';
			position: absolute;
			left: var(--x);
			top: var(--y);
			width: var(--size);
			height: var(--size);
			background: radial-gradient(circle closest-side, #4405f7, transparent);
			transform: translate(-50%, -50%);
			transition: width .2s ease, height .2s ease;
		}

		button:hover::before {
			--size: 400px;
		}
	</style>
</head>

<body>
	<div>
		<ul>
			<li>html</li>
			<li>css</li>
			<li>js</li>
			<li>用伪类伪元素代替不必要的列表项</li>
		</ul>
	</div>
	<br/>
	<div class="div2">
		测试border生成三角形，在div前插入伪类伪元素
	</div>
	<br/>
	<div class="div3">
		<input placeholder="伪类伪元素生成font图标" type='text' />
	</div>
	<br/>
	<div>
		<button>
			<span>hover i am awedome</span>
		</button>
	</div>

	
<script>
		document.querySelector('button').onmousemove = (e) => {
			const x = e.pageX - e.target.offsetLeft
			const y = e.pageY - e.target.offsetTop
			var tag = e.target.tagName == 'BUTTON' ? e.target : e.target.parentNode;
			tag.style.setProperty('--x', `${x}px`)
			tag.style.setProperty('--y', `${y}px`)
		}
	</script>
</body>

</html>
分享到：
| react-redux 中store action reducer 和组 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css动画 伪类基础使用实例

    本教程聚焦于CSS中的动画和伪类基础，通过实例帮助开发者掌握这些重要概念，提升网页交互体验。 首先，让我们了解什么是CSS动画。CSS动画是通过关键帧来定义元素从一种样式逐渐变为另一种样式的视觉效果。这种效果...

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    8. **伪类和伪元素**：伪类如`:hover`、`:active`、`:focus`等，用于添加动态效果；伪元素如`::before`、`::after`则可以插入额外内容。 9. **CSS预处理器**：Sass、Less和Stylus等预处理器提供了更强大的语法，如...

    HTML5+CSS3实例源码（包含20个）

    此外，这些实例可能还会涉及到Web字体、响应式图像、自定义CSS伪元素等其他进阶特性。 总的来说，HTML5和CSS3的结合为网页开发者提供了一套强大的工具箱，能够创建出既美观又功能丰富的网页。通过深入学习和实践...

    CSS伪类:before在元素之前 :after 在元素之后实例讲解

    特别地，CSS伪类中的`:before`和`:after`是生成内容的伪元素，它们能够在元素内容的前面或后面动态地添加额外的元素，让网页表现更加丰富和灵活。 ### CSS伪类:before和:after的基本概念 `:before`和`:after`被...

    两种CSS3伪类选择器详细介绍

    css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...

    CSS3+jQuery技术应用的几个实例

    5. **3D变换与伪元素**：CSS3的`transform`和`perspective`属性实现了3D空间内的元素旋转、缩放和位移。结合使用`::before`和`::after`伪元素，可以创建复杂的装饰性元素。jQuery可以控制这些变换的触发时机，增加...

    CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法： selector:pseudo-element {property:value;} CSS类也可以使用伪元素： selector.class:pseudo-element {property:value;} :first-line 伪元素 ...

    CSS教程实例大全 很多实例在里面

    1. **选择器**：包括类选择器、ID选择器、元素选择器、伪类和伪元素等，它们用于定位需要样式的HTML元素。 2. **属性和值**：如颜色、字体、边距、填充、背景、边框等，这些是定义元素样式的关键。 3. **盒模型**...

    第39章 UI元素状态伪类选择器

    在本章中，我们将深入探讨UI元素状态伪类选择器这一关键CSS概念，它是构建响应式和交互式用户界面的核心工具。伪类选择器允许我们根据元素的不同状态来应用特定的样式，使得网页的视觉反馈更加直观和动态。 首先，...

    css3之UI元素状态伪类选择器实例演示

    CSS3引入了多种UI元素状态伪类选择器，这些选择器允许我们在不同的用户交互状态下改变元素的样式，从而使Web界面更加动态和用户友好。以下详细介绍和实例演示了几个常用的UI元素状态伪类选择器。 1. E:hover选择器 ...

    HTML5 3D/CSS3 3D爱心动画项目实例源码

    同时，可能还运用了CSS3的选择器，如伪类选择器（`:hover`、`:active`等），使得用户与爱心的交互更加生动。 在这个项目中，HTML5和CSS3的结合展示了它们在创建复杂动态效果时的强大能力。学习并理解这个实例，可以...

    一个经典的CSS实例

    可能使用了伪类选择器如`:hover`来改变鼠标悬停在菜单项上的样式。 `divBackground.jpg`和`Background.jpg`可能是用作背景图片的文件。在CSS中，可以使用`background-image`属性来设置背景图片，`background-repeat...

    个人主页css3实例源码

    其次，CSS3提供了丰富的选择器，如伪类选择器(:hover, :active, :focus)和属性选择器([attr=value])，使得我们可以根据用户的交互状态来改变元素的样式。这对于个人主页的导航菜单、按钮等交互元素的设计尤为重要，...

    html+css实例

    另外，CSS3引入了许多新特性，如过渡（transition）、动画（animation）、伪类（`:hover`, `:active`, `:focus`等）和新的选择器（如`:nth-child()`，`:not()`），这些都可以提升用户体验并增加网页的动态效果。...

    CSS实例代码

    此外，更高级的选择器如伪类（`:hover`, `:active`, `:focus`）和伪元素（`::before`, `::after`）能帮助我们实现动态效果和增强内容呈现。 CSS的布局技术也是其核心部分。传统上，我们使用`display: block`和`...

    JS+CSS3绘制数字科技脸元素图形特效

    6. **伪元素（::before和::after）**：用于添加额外的结构元素，如创建鼻子或嘴巴的细节。 通过JS与CSS3的巧妙结合，我们可以创建出极具创意的网页特效，而“JS+CSS3绘制数字科技脸元素图形特效”就是一个很好的...

    CSS教程（实例大全）

    - **优先级**：CSS的优先级规则决定了样式的应用顺序，内联样式（`style="..."`）&gt; ID选择器 &gt; 类选择器/属性选择器/伪类选择器 &gt; 标签选择器/伪元素选择器 &gt; 浏览器默认样式。 ### 2. CSS布局 - **盒模型**：CSS...

    css金矿---css3的新属性

    但是对于网站前端开发人员来说，这个幻灯片绝对值得一看，它主要讲解了一些CSS3的新属性，包括伪类/伪元素和一些新增的属性，比如变形(transform)，阴影等。实例和配图很棒，相信对CSS3还有些疑惑的同学，看了这个...

    HTML5与CSS3实例教程 第二版 源代码

    1. **选择器增强**：CSS3增加了更多的选择器，如属性选择器、伪类选择器（`:hover`、`:active`、`:focus`）和伪元素选择器（`::before`、`::after`），使样式控制更精确。 2. **边框和背景**：CSS3引入了圆角边框...

Magicbox
Global site tag (gtag.js) - Google Analytics