CSS

语言:

CSSSCSS

确定

body {

background-color: aqua;

}

#w {

width: 80px;

margin: 50px auto;

}

.icon {

width: 80px;

height: 80px;

background-color: #181818;

border-radius: 50%;

}

.icon.cross span {

background-color: #fff;

border-radius: 5px;

display: inline-block;

margin-top: 23px;

margin-left: 20px;

}

.icon.cross span::before {

content: '';

width: 40px;

height: 4px;

background-color: #fff;

border-radius: 5px;

position: absolute;

margin-top: 10px;

transition: All 0.5s cubic-bezier(0.65, 0.1, 0.65, 0);

transform: rotate(45deg) translateY(3px) translateX(3px);

}

.icon.cross span::after {

content: '';

width: 40px;

height: 4px;

background-color: #fff;

border-radius: 5px;

position: absolute;

margin-top: 20px;

transition: All 0.5s cubic-bezier(0.65, 0.1, 0.65, 0);

transform: rotate(135deg) translateY(3px) translateX(-4px);

}

.icon.vmark span {

background-color: #fff;

border-radius: 5px;

display: inline-block;

margin-top: 25px;

margin-left: 20px;

}

.icon.vmark span::before {

content: '';

width: 20px;

height: 4px;

background-color: #fff;

border-radius: 5px;

position: absolute;

margin-top: 10px;

transition: All 0.5s cubic-bezier(0.65, 0.1, 0.65, 0);

transform: rotate(45deg) translateY(8px) translateX(6px);

}

.icon.vmark span::after {

content: '';

width: 35px;

height: 4px;

background-color: #fff;

border-radius: 5px;

position: absolute;

margin-top: 20px;

transition: All 0.5s cubic-bezier(0.65, 0.1, 0.65, 0);

transform: rotate(-45deg) translateY(2px) translateX(10px);

}

html中小叉叉的图标,CSS3 勾和叉图标的变换动效相关推荐

  1. 对勾和叉怎么打_“对勾”“错叉”符号怎么打

    1. 在智能 ABC 状态下 , 按字母" V "键+数字键" 1 " , 再按"="翻页选择即可 : √ × 2. 在紫光输入法状态下,右 ...

  2. css3实现烟花效果,CSS3 带颤动效果的简易烟花动效

    CSS 语言: CSSSCSS 确定 body { margin: 0; padding: 0; background: #000; overflow: hidden; } .pyro > .b ...

  3. Win7电脑右下角声音图标小喇叭出现红叉没有声音解决方案

    Win7电脑右下角声音图标小喇叭出现红叉没有声音 1.确认电脑是否安装声卡驱动 右击 计算机 ==> 设备管理器 ==> 声音.视频和游戏控制器 ==> 查看Realtek High ...

  4. 使用多种方法在Word方框中打对勾√和叉叉×

    我们平常在一些金融机构填写表格的时候,都会看到一些表格上带有许多特殊符号,比如,最常见的就是方框中打钩或打叉这种符号.那这种符号是如何输入出来的呢?今天,易老师就来为大家分享几种在方框中打对勾和叉的技 ...

  5. python画大对勾_多种方法告诉你!Word如何在方框中打对勾√和叉叉×

    我们平常在一些金融机构填写表格的时候,都会看到一些表格上带有许多特殊符号,比如,最常见的就是方框中打钩或打叉这种符号.那这种符号是如何输入出来的呢?今天,易老师就来为大家分享几种在方框中打对勾和叉的技 ...

  6. LINUX:拷贝文件src/指定目录下,文件夹图标上有个叉.更改文件权限可解决该问题。

    1. Ubuntu环境下安装软件,在usr/share/指定目录下增加该软件的驱动文件时,文件夹图标上有个叉.该文件的权限信息不正确. 2.使用命令:chmod 更改文件权限.sudo chmod 7 ...

  7. Latex 打勾 打叉

    今天又学到一招,用latex/overleaf 写论文的时候,怎么加入对勾或者叉叉呢? 先引入这个包: \usepackage{bbding} 画勾:一个细一点,一个粗一点 \Checkmark\Ch ...

  8. 如何在execl表格中打对勾和叉叉?

    相信很多使用execl表格的同志们不知道如何在表格里面像老师批改试卷那样随意打"对勾"和"叉叉",作为小白的我当然也是不知道的呢~~~为了方便以后查找起来方便, ...

  9. Android 9.0 10.0wifi图标出现感叹或者叉的情况的解决方案

    在os定制化开发中,对wifi做定制化也是常有的事情,而在10.0中,开发网络白名单的时候,由于对网络做了部分限制,所以 可能在刚连接网络的时候,会出现wifi图标出现感叹或者叉的情况 借鉴别人的博客 ...

最新文章

  1. springboot 集成jpa_基于Spring Boot+JPA Restful 风格的数据
  2. linux看测试环境版本,最新版 EOS 在 Ubuntu 18.04.1 LTS 环境上的安装测试教程
  3. 【错误记录】AS 编译报错 ( Android Support plugin 版本太高 | 升级 Android Studio 到最新版本 )
  4. 增强 用文本增强修改SAP标准屏幕中的字段名称 属于元素的文本增强
  5. 运筹学_单纯形表法_0(matlab实现)
  6. ES5 getter setter
  7. 容器编排技术 -- Kubernetes kubectl rollout undo 命令详解
  8. MySQL 基础 —— DDL(数据定义)、DCL(数据控制)
  9. SpringBoot中Interceptor和Filter的使用
  10. VJC中机器人走多边形转向角度、速度、时间数值的计算
  11. linux 中文字体 推荐,Linux 下何种字体最好看
  12. 《程序员修炼之道(第2版)》到货!屹立20年影响力大作归来!
  13. 计算机的网络说课稿模板,小学信息技术说课稿优秀模板
  14. warning: control reaches end of non-void function [-Wreturn-type]
  15. 用两天整理出来的python英文单词大全,需要的赶快保存啦
  16. 监控系统服务器存储,监控系统中存储服务器的选择
  17. 几乎所有的RPG游戏(一种源自《龙与地下城》的游戏类型)在进入游戏时都会让用户自己来创建自己喜欢的角色。本次上机要求编写一个简化的创建游戏角色的程序。
  18. 安卓打开cbr文件_什么是CBR和CBZ文件,为什么将它们用于漫画?
  19. ASP.NET是什么?与.NET有什么关系
  20. 【流程标准化】标准操作规程(SOP)基础知识

热门文章

  1. 2021年安徽省安全员C证模拟试题及安徽省安全员C证模拟考试题库
  2. PDF怎么转换成PPT?这个方法拿捏一下。
  3. 【ARKit、RealityKit】把图片转为3D模型
  4. ticktock卖给oracle,ticktock第三章怎么过 ticktock第三章玩家一通关攻略
  5. 借助Google Translate API实现网站多国语言翻译功能
  6. Web性能测试基本指标
  7. 台式计算机消耗的电,计算机一天要消耗多少电量
  8. redis数据结构应用
  9. 小米和android全面屏手势,小米全面屏手势来了,这三个窍门你务必知晓
  10. 树莓派基于分类器的识别环保标志(三)分类器xml创建