位置: 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发布了(多模手机)

  • 微信营销传播力量难以估量(微信营销的意义及价值)

    微信营销传播力量难以估量(微信营销的意义及价值)

  • 拼多多预售可以取消吗(拼多多预售可以催发货吗)

    拼多多预售可以取消吗(拼多多预售可以催发货吗)

  • 苹果11激活流程(苹果11新机开机到激活流程)

    苹果11激活流程(苹果11新机开机到激活流程)

  • 关闭微博自动刷新的方法(微博怎么关闭自动登录)

    关闭微博自动刷新的方法(微博怎么关闭自动登录)

  • 苹果7plus返回键如何设置(苹果7plus返回键坏了能修吗)

    苹果7plus返回键如何设置(苹果7plus返回键坏了能修吗)

  • 华为nova5支持红外吗(华为nova 5z有红外线吗)

    华为nova5支持红外吗(华为nova 5z有红外线吗)

  • 苹果怎么发空白消息(苹果怎么发空白朋友圈)

    苹果怎么发空白消息(苹果怎么发空白朋友圈)

  • 华为nova内存卡插哪里(华为nova手机内存卡怎么装)

    华为nova内存卡插哪里(华为nova手机内存卡怎么装)

  • 手机电量跑得快怎么处理(手机电量跑得快从哪里看我开了什么)

    手机电量跑得快怎么处理(手机电量跑得快从哪里看我开了什么)

  • mh0w2cha是什么型号(mhqw2ch/a是什么型号)

    mh0w2cha是什么型号(mhqw2ch/a是什么型号)

  • 51单片机的cpu主要由什么组成(51单片机的cpu主要组成部件包括)

    51单片机的cpu主要由什么组成(51单片机的cpu主要组成部件包括)

  • 华为手机微信步数不更新怎么办(华为手机微信步数怎么关闭)

    华为手机微信步数不更新怎么办(华为手机微信步数怎么关闭)

  • 淘宝直播间为啥没人进来(淘宝直播间为啥抢不了红包了呢怎么回事)

    淘宝直播间为啥没人进来(淘宝直播间为啥抢不了红包了呢怎么回事)

  • 滴滴订单怎么删除不了(滴滴订单怎么删除开票记录)

    滴滴订单怎么删除不了(滴滴订单怎么删除开票记录)

  • qq音乐不能单曲购买了(qq音乐不可以单曲购买)

    qq音乐不能单曲购买了(qq音乐不可以单曲购买)

  • 淘小二在哪里(淘小二在哪里进入)

    淘小二在哪里(淘小二在哪里进入)

  • oppo手机a与r系列区别(oppoa系列与r系列的手机怎么样)

    oppo手机a与r系列区别(oppoa系列与r系列的手机怎么样)

  • 支付宝群红包上限是多少(支付宝群里抢红包)

    支付宝群红包上限是多少(支付宝群里抢红包)

  • 电脑突然进入睡眠模式怎么办(电脑突然进入睡眠界面)

    电脑突然进入睡眠模式怎么办(电脑突然进入睡眠界面)

  • 邮箱怎么发送文件(邮箱怎么发送文件夹不压缩)

    邮箱怎么发送文件(邮箱怎么发送文件夹不压缩)

  • 500kbps是多少网速(500kb/s是多少兆宽带)

    500kbps是多少网速(500kb/s是多少兆宽带)

  • miracast是什么意思(miracasttcl)

    miracast是什么意思(miracasttcl)

  • 华为手环4和5的区别(华为手环4和5的差别)

    华为手环4和5的区别(华为手环4和5的差别)

  • ps怎么画同心圆

    ps怎么画同心圆

  • newtv怎么看电视直播

    newtv怎么看电视直播

  • vsco注册后会扣费吗(注册vsco也要扣钱吗)

    vsco注册后会扣费吗(注册vsco也要扣钱吗)

  • 苹果三维触控怎么用(苹果三维触控怎么没有了)

    苹果三维触控怎么用(苹果三维触控怎么没有了)

  • 如何阻止网络95开头电话(如何阻止网络电话打入)

    如何阻止网络95开头电话(如何阻止网络电话打入)

  • tp路由器设置的网址(tp路由器设置的官网进不去了)

    tp路由器设置的网址(tp路由器设置的官网进不去了)

  • vivoy93有语音助手吗(vivoy93手机的语音助手怎么喊才会跳出来)

    vivoy93有语音助手吗(vivoy93手机的语音助手怎么喊才会跳出来)

  • Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间)(js时间格式转换时间戳)

    Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间)(js时间格式转换时间戳)

  • 土地使用税计入税金及附加吗
  • 产权转移书据印花税包括什么
  • 租赁类发票可以不写单价数量
  • 用银行支付本月生产车间保险费820元
  • 分公司可以独立签约吗
  • 企业所得税中的所得
  • 研发费用可以计入哪个科目
  • 企业为什么会有两个中征码
  • 合伙做生意账目
  • 保证金抵扣货款分录
  • 预收账款确认收入摘要怎么写
  • 车间领用周转材料会计分录怎么写
  • 经营期间银行存在的问题
  • 甲供工程选择适用简易计税方法后,36个月
  • 利息收入增值税计税依据
  • 如何查询增值税申报表
  • 北京市取暖标准
  • 个体户开发票要交税吗
  • 开专票需要哪些东西
  • 一般纳税人收到专票怎么做分录
  • 营业外收入怎么申报
  • 一般纳税人增值税及附加税费申报表怎么填
  • 企业 停业
  • 增值税退税金额怎么算
  • 一般纳税人资格登记表
  • 细说linux
  • neotrace.exe - neotrace是什么进程 有什么用
  • 期间费用包含哪些
  • 高新技术企业补助需要交所得税吗
  • 子公司使用母公司授信
  • 土地增值税预缴税率表
  • 啥叫同比增长
  • 国家公园好玩吗
  • 命令行查看ip地址
  • 划拨建设用地使用权没有使用期限的限制
  • es6面试题promise
  • php call stack
  • 奖金的发放应做到
  • 资本化过程
  • django中httpresponse
  • 公司对公账户没有流水怎么办
  • 个税汇算清缴时劳务报酬怎么计税
  • phpcms数据库文件
  • 帝国cms如何调用网络
  • 开票品名不一样有什么关系
  • 公司有收入可以做零申报吗
  • 工会经费发放奖励个税处理
  • c语言http请求解析表单内容
  • 公司法人怎么样才会没有责任
  • 只有收据没有发票怎么入账
  • 付出对价的公允
  • 经营过程中借股怎么处理
  • 先收票后收货
  • 退休人员返聘签订什么合同
  • 预收账款的账务处理怎么对企业有利
  • 已认证未申报抵扣怎么办
  • 物业公司收取电费服务费
  • 如何加强存货管理,提高存货周转率
  • 固定资产已经超额融资了还能发放置换贷款吗
  • sql server 2005如何使用
  • 动态sql中返回数组的值
  • WIN10系统优化技巧
  • 简述linux几种主流发行版本及其特点
  • 将哪一linux文件系统引入
  • win8.1系统安装教程
  • ubuntu系统安装谷歌浏览器
  • mac os10.11
  • xp系统修复怎么操作
  • 苹果mac系统怎么安装pip工具
  • win8资源管理器未响应
  • Bullet之了解Force Torque Impulse
  • unity引擎用什么模拟器
  • shell命令是干嘛的
  • jquery事件的响应
  • android需要学什么
  • shell读取文本
  • centos python2.7升级到3.7
  • 营业税未达起征点
  • 2020年青海国税工资待遇
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设