使用伪元素生成爱心

不多bb直接上代码

 .love {position: fixed;width: 20px;height: 20px;background-color: red;transform: rotate(45deg);opacity: 0;animation: love 1s ease;}.love::after {position: absolute;display: block;content: "";width: 20px;height: 20px;border-radius: 50%;transform: translate(0px, -10px);background-color: inherit;}.love::before {position: absolute;display: block;content: "";width: 20px;height: 20px;border-radius: 50%;background-color: inherit;transform: translate(-10px, 0px);}
<div class='love'></love>

我们可以通过使用伪元素结合之前说过的定位和css3的transform属性来生成爱心

那么我们想点击页面让爱心随着鼠标移动并且随机颜色的爱心，且当鼠标点击后爱心往上移动并逐渐失效

先申明一个函数生成十六进制的颜色

 function getColor() {let newStr = ''let str = '1234567890ABCDEF'for (let i = 0; i < 6; i++) {newStr += str.charAt(Math.floor(Math.random() * 16))}return '#' + newStr}console.log(getColor());

然后动画属性

 @keyframes love {0% {transform: rotate(45deg) translateY(0);opacity: 1;}100% {transform: rotate(45deg) translateY(-15px);opacity: 0;}}

现在需要的效果是鼠标点击页面，页面生成爱心，爱心的颜色是随机的。并且爱心有动画效果
思路：
1 点击页面生成div
2 给div加上love属性让它前后有伪元素生成爱心
3 获取鼠标的位置赋值给div的left top
4 将生成的div放到body中
5 给div赋值不同颜色
6 一段时间让dom消失
附上完整代码

<!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>@keyframes love {0% {transform: rotate(45deg) translateY(0);opacity: 1;}100% {transform: rotate(45deg) translateY(-15px);opacity: 0;}}html,body {height: 100%;width: 100%;}* {margin: 0;padding: 0;}.love {position: fixed;width: 20px;height: 20px;background-color: red;transform: rotate(45deg);opacity: 0;animation: love 1s ease;}.love::after {position: absolute;display: block;content: "";width: 20px;height: 20px;border-radius: 50%;transform: translate(0px, -10px);background-color: inherit;}.love::before {position: absolute;display: block;content: "";width: 20px;height: 20px;border-radius: 50%;background-color: inherit;transform: translate(-10px, 0px);}</style>
</head><body><!-- <div class="love"></div> -->
</body>
<script>// 编写一个函数，获得一个十六进制的随机颜色的字符串(例如：#20CD4F)function getColor() {let newStr = ''let str = '1234567890ABCDEF'for (let i = 0; i < 6; i++) {newStr += str.charAt(Math.floor(Math.random() * 16))}return '#' + newStr}console.log(getColor());// 给页面绑定点击事件document.querySelector('body').onclick = function(e) {let div = document.createElement('div')div.className = 'love'//获取鼠标位置 xy 位置let x = e.clientXlet y = e.clientYdiv.style.left = 5 + x + 'px'div.style.top = -30 + y + 'px'document.body.append(div);div.style.background = getColor()setTimeout(() => {div.remove()}, 500)}
</script></html>

上面的代码可以直接运行

css特效（使用伪元素生成随机颜色爱心）相关推荐

【CSS】457- CSS 伪元素指南
层叠样式表(css)是一种独立的语言,用于描述web应用程序的表示.这涉及到诸如颜色.字体和HTML元素布局的完全控制等概念. 在本文中,将为您介绍级联样式表中的伪元素,以及如何将它们与兼容性一起使用 ...
[css] 如何使用伪元素实现增大点击热区来增加用户体验？
[css] 如何使用伪元素实现增大点击热区来增加用户体验? .extend-via-pseudo-elem {position: relative; }.extend-via-pseudo-elem: ...
CSS 中的伪元素是什么，有什么用处
CSS 中的伪元素是一种特殊的元素,它们不是 HTML 元素,但通过 CSS 属性和关系运算符,我们可以为它们指定与实际 HTML 元素相同的样式.伪元素可以用于实现一些特殊的效果,比如动画.阴影.弹 ...
并不简单的翻页时钟（一）：样式篇（Flex布局、line-height、data-set用法、css before after伪元素）
目录并不简单的翻页时钟我以为的翻页时钟实际上的翻页时钟关键的知识点效果展示代码解析 HTML CSS 详解CSS 1.display:flex 元素居中 2.:before .:after ...
css伪元素覆盖,CSS :befor :after 伪元素的巧妙用法
本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...
CSS before / after伪元素
CSS伪类对象 after和before的用法 IE对after.before是不支持的,请在firefox.opera.chrome下试调! :before 语法:Selector : before ...
HTML与CSS基础之伪元素(五)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>伪元素 ...
Python攻城师的成长————css语法、伪元素选择器（部分）
今日学习目标熟悉并掌握css中各种修改属性的方法. 文章目录今日学习目标学习内容一.伪元素选择器 css操作文本内容选择器优先级二.css修改属性 css修改文字属性 css修改字体属性 ...
CSS如何使用伪元素选择器给所有的div里的文本前面添加小写罗马数字编号
一.需求说明假设现在我有三个div标签,它们在浏览器里显示的内容如下图所示: 我希望使用CSS给它们全部添加上序号,添加好序号后的样子如下图所示: 可以看到序号是递增的,不是普通的阿拉伯数字,而是小 ...

css特效（使用伪元素生成随机颜色爱心）

使用伪元素生成爱心

css特效（使用伪元素生成随机颜色爱心）相关推荐

最新文章

热门文章