位置: IT常识 - 正文

css 实现太极效果(简单的css特效)

编辑:rootadmin
css 实现太极效果 目录一、简述二、太极效果制作一、简述

推荐整理分享css 实现太极效果(简单的css特效),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css写太极图,css特效代码,用css画太极,html5做个太极图,css实现太极图,用css画太极,css实现太极图,css实现太极图,内容如对您有帮助,希望把文章链接给更多的朋友!

本次主要介绍::after,::before,box-shadow这三个属性。

::after,::before这两个是伪类选择器,box-shaow是用来设置元素的阴影效果 before:向选定的元素前插入内容 after:向选定的元素后插入内容 使用content 属性来指定要插入的内容,值可以为空,但是不能不写,如果不写的话伪类选择器就不会显示出来。

例如以下代码:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>test</title> <style>div:before{ content:"- 注意-";}</style></head><body><div>我的名字是 Donald</div></body></html>css 实现太极效果(简单的css特效)

伪类选择器的内容是不可选中的

二、太极效果制作

1.第一步:编写html部分 我们只需要定义一个div标签即可,用它来完成太极的制作

<!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>太极</title></head><body> <div></div></body></html>

2.第二步:设置div的样式

body{ background-color: antiquewhite;}div{ width: 150px; height: 300px; margin: 100px auto; background-color: white; border-radius: 50%; border-right: 150px solid black; box-shadow: 0px 0px 30px blueviolet; }

这里的box-shadow的第一个值是x轴移动的值,第二个值是y轴移动的值,第三个值代表模糊度,第四个是阴影的颜色。 效果: 第三步:通过伪类选择器画出两个小圆

div::after,div::before{ content: ""; display: block; border-radius: 50%; margin-left: 75px; border: 50px solid black; background-color: white; width:50px; height: 50px;}

content必须要写出来,值为空也可以,如果不写的话伪类选择器就不会显示。 设置它的边框颜色为黑色,然后就可以和大圆的黑色部分连接起来了。 效果: 4.第四步:将after的边框和背景分别改成白色和黑色。

/*覆盖上面::after的border和background-color两个属性*/div::after{ border: 50px solid white; background-color: black;}

效果: 5.当然你也可以给它个动画让它动起来,当我们鼠标移动到太极上时它就开始转动

div:hover{ animation: mytest 2s linear infinite; }@keyframes mytest { to{ transform: rotate(360deg); }}

CSS完整代码:

body{ background-color: antiquewhite;}div{ width: 150px; height: 300px; margin: 100px auto; background-color: white; border-radius: 50%; border-right: 150px solid black; box-shadow: 0px 0px 30px blueviolet; }div:hover{ animation: mytest 2s linear infinite; }@keyframes mytest { to{ transform: rotate(360deg); }}div::after,div::before{ content: ""; display: block; border-radius : 50%; margin-left: 75px; border: 50px solid black; background-color: white; width:50px; height: 50px;}div::after{ border: 50px solid white; background-color: black;}
本文链接地址:https://www.jiuchutong.com/zhishi/298349.html 转载请保留说明!

上一篇:ReID行人重识别(训练+检测,附代码),可做图像检索,陌生人检索等项目(行人重识别map)

下一篇:震撼,支持多模态模型的ChatGPT 4.0发布了(多模手机)

  • ipad怎么隐藏app(ipad怎么隐藏app使用时间)

    ipad怎么隐藏app(ipad怎么隐藏app使用时间)

  • 微信怎么设置免打扰(微信怎么设置免打扰个人消息提醒)

    微信怎么设置免打扰(微信怎么设置免打扰个人消息提醒)

  • 企业钉钉注册流程(钉钉企业注册需要什么手续吗)

    企业钉钉注册流程(钉钉企业注册需要什么手续吗)

  • 小米airdots无法充电(小米airdots接触不良怎么办)

    小米airdots无法充电(小米airdots接触不良怎么办)

  • oppor11怎样关闭后后运行程序(oppor11怎样关闭拍照声音)

    oppor11怎样关闭后后运行程序(oppor11怎样关闭拍照声音)

  • 为什么我的拼多多设置里面没有拼小圈(为什么我的拼多多没有运费险呢)

    为什么我的拼多多设置里面没有拼小圈(为什么我的拼多多没有运费险呢)

  • 手机硬件是什么(手机硬件损坏怎么修复)

    手机硬件是什么(手机硬件损坏怎么修复)

  • b站播放量怎么才算一次(b站播放量怎么提高)

    b站播放量怎么才算一次(b站播放量怎么提高)

  • reno4是什么处理器(opo reno 4是什么处理器)

    reno4是什么处理器(opo reno 4是什么处理器)

  • 华为闹钟响了一直不关闭(华为闹钟响了一次怎么关)

    华为闹钟响了一直不关闭(华为闹钟响了一次怎么关)

  • 退群群主会收到提示吗(退群群主会收到提示吗微信)

    退群群主会收到提示吗(退群群主会收到提示吗微信)

  • oppor9m怎么恢复出厂设置在哪里(oppor9m怎么恢复出厂设置)

    oppor9m怎么恢复出厂设置在哪里(oppor9m怎么恢复出厂设置)

  • 5g手机一定要用5g卡吗(4g手机和5g手机哪个更实用)

    5g手机一定要用5g卡吗(4g手机和5g手机哪个更实用)

  • 移动5g合约版是什么意思(移动5g合约版是5g吗)

    移动5g合约版是什么意思(移动5g合约版是5g吗)

  • 至强e52690相当于i几(至强e52690参数)

    至强e52690相当于i几(至强e52690参数)

  • 爱普生打印机打印不清晰怎么办(爱普生打印机打印照片颜色不对)

    爱普生打印机打印不清晰怎么办(爱普生打印机打印照片颜色不对)

  • 红米note7和note8贴膜通用吗(红米note7和note8pro贴膜通用吗)

    红米note7和note8贴膜通用吗(红米note7和note8pro贴膜通用吗)

  • 如何在word中加入目录(如何在word中加入新的文档)

    如何在word中加入目录(如何在word中加入新的文档)

  • 戴尔i7和i5有什么区别(戴尔i5和i7区别大吗)

    戴尔i7和i5有什么区别(戴尔i5和i7区别大吗)

  • iphone8plus机身尺寸(iphone8plus机身多少厘米)

    iphone8plus机身尺寸(iphone8plus机身多少厘米)

  • 手机怎么点餐(手机怎么点餐肯德基)

    手机怎么点餐(手机怎么点餐肯德基)

  • 快手怎么看直播人数(快手怎么看直播数据)

    快手怎么看直播人数(快手怎么看直播数据)

  • 苹果6听筒坏了如何自测(苹果听筒坏了要多少钱)

    苹果6听筒坏了如何自测(苹果听筒坏了要多少钱)

  • 库乐队有新消息怎么删(库乐队2021)

    库乐队有新消息怎么删(库乐队2021)

  • 苹果手机微信怎么解绑手机号(苹果手机微信怎么双开)

    苹果手机微信怎么解绑手机号(苹果手机微信怎么双开)

  • win10远程连接win7连接不上去怎么办解决方法(win10远程连接win7密码正确,无法登陆)

    win10远程连接win7连接不上去怎么办解决方法(win10远程连接win7密码正确,无法登陆)

  • 个人所得税信息采集怎么弄
  • 税率3%变成10%
  • 破产企业发放工资要不要纳税?
  • 怎么交税费
  • 利润分配未分配利润借贷方表示什么
  • 先开票后跨月预缴税款可以吗
  • 个体户2019年定额征收额度是多少
  • 国际货运代理0税率和免税
  • 滴滴出行发票可以抵扣进项税吗
  • 自产自销的苗木怎么做账
  • 资产减值损失属于什么科目借方增加还是减少
  • 签订合同发放工资可以税前扣除吗?
  • 固定资产附加的账务处理
  • 工程安装公司暂估人工费如何做会计核算?
  • 所得税汇算清缴分录怎么做
  • 预收房款发票开具需要注意哪些?
  • 国税局可以开增值税专用发票吗
  • 报税系统增值税纳税申报查询可以查几年的
  • 增值税即征即退政策
  • 烟草生产者消费税计算方法
  • 一般纳税人施工安装税点
  • 稳岗补贴会计怎么做账
  • 业务订单需求表
  • 工资扣除社保怎么算
  • 三证合一之后的税务登记
  • 个税房租和房贷抵扣一样吗
  • 成品加工为另一个产品
  • 费用化支出含义
  • 询证函是什么文书
  • 固定资产资产评估
  • 收到税费返还是什么现金流量
  • phpcookie
  • 预收的购货款属于收入吗
  • PHP:pg_lo_truncate()的用法_PostgreSQL函数
  • 金融工具减值会影响什么
  • 股权投资取得的收入计入什么科目
  • 营改增后一般纳税人缴纳增值税彩用简易征收3%
  • thinkphp in
  • 个体经营所得税申报表a
  • 新星计划会限流吗
  • yolo目标识别
  • 累计折旧大白话
  • 行政性罚款怎么结转损益
  • 租赁公司一般都有什么税
  • 织梦如何添加浮动广告
  • 织梦相关文章调用
  • 织梦会员功能
  • 母子公司资产划转税收政策
  • 纳税人有
  • 劳务公司给包工头转账交税吗
  • 企业增值税包含哪些税项及税率
  • 个体户年报纳税一般填多少合适
  • 合伙企业怎么建账
  • 结转生产成本的数据从哪来的
  • 存货核算科目设置
  • 公司采购产品赠送给客户会计分录
  • 出口转内销增值税报表怎么填
  • 研发费用如何做成本分析
  • 利润表怎么没有本月数
  • 生产的半成品怎么做分录
  • 财税讲座视频
  • sql查询字段被包含的内容
  • 请创建一个die类
  • mysql单表数据建议
  • centos怎么扩容
  • windows xp注册表清理
  • bhvc.exe
  • mmtraylsi.exe是什么进程 有什么作用 mmtraylsi进程查询
  • win8激活windows
  • win10在更新界面怎么办
  • Win10 Mobile 10586.107怎么更新?Lumia950/XL/550可升级
  • node.js有什么作用
  • python做应用软件界面
  • java中的多态性
  • sdk和安卓版本
  • 工信部新车申报目彿
  • 汽车车船税收费标准表山西
  • 跨区迁移税务需要注销吗?
  • 大东地税局
  • 湖北国税发票手机查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设